sui-svg

Converts your SVG files into React Components wrapped with @s-ui/atom-icon.

Features:

• Building the components
• Showing up a demo locally

Installation

1$ npm i -SE @s-ui/svg

Usage

Add bundling scripts to your package.json

1{
2  "name": "my-awesome-package",
3  "version": "1.0.0",
4  "scripts": {
5    "prepublishOnly": "sui-svg build",
6    "start": "npm run prepare && sui-svg demo"
7  }
8}

Expected folder structure

A src folder with all the .svg files to be converted inside.

Output

A lib folder with the generated components will be created/overridden.

⚠️ Advice: no index.js will be generated inside the lib folder, each component should be imported independently for performance reasons.

How to use the generated lib

1import YourIcon from 'your-svg-repo/lib/YourIcon'
2
3const YourAwesomeComponent = () =>
4  <div>
5    <YourIcon />
6    <p>Awesome text/<p>
7  </div>

Also, keep in mind, you need to import the needed styles for the icons at least once in your app:

1@import 'your-svg-repo/lib/index';

Template

Every icon svg will be wrapped using an <AtomIcon> that means you could use all the props accepted by the component.

The wrapped code is minimal, in order to avoid performance penalties. You could check it here.