@s-ui/svg v3.25.0
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.
10 months ago
1 year ago
1 year ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago