@s-ui/svg
v3.26.0
Published
Converts svg files into React Components
Downloads
5,459
Maintainers
Keywords
Readme
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
$ npm i -SE @s-ui/svg
Usage
Add bundling scripts to your package.json
{
"name": "my-awesome-package",
"version": "1.0.0",
"scripts": {
"prepublishOnly": "sui-svg build",
"start": "npm run prepare && sui-svg demo"
}
}
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
import YourIcon from 'your-svg-repo/lib/YourIcon'
const YourAwesomeComponent = () =>
<div>
<YourIcon />
<p>Awesome text/<p>
</div>
Also, keep in mind, you need to import the needed styles for the icons at least once in your app:
@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.