Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blueberryapps/react-svg-icon-generator
Generate React Icon Component from SVG icons to show, resize and recolor them.
https://github.com/blueberryapps/react-svg-icon-generator
blueberry-opensource generator icon radium react react-component svg svg-icons
Last synced: about 7 hours ago
JSON representation
Generate React Icon Component from SVG icons to show, resize and recolor them.
- Host: GitHub
- URL: https://github.com/blueberryapps/react-svg-icon-generator
- Owner: blueberryapps
- License: mit
- Created: 2016-03-12T18:44:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T23:53:51.000Z (over 1 year ago)
- Last Synced: 2024-10-28T23:59:47.748Z (10 days ago)
- Topics: blueberry-opensource, generator, icon, radium, react, react-component, svg, svg-icons
- Language: JavaScript
- Homepage: https://react-svg-icon-live-generator.herokuapp.com
- Size: 865 KB
- Stars: 64
- Watchers: 26
- Forks: 21
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React SVG Icon Generator [](https://dependencyci.com/github/blueberryapps/react-svg-icon-generator)
Generate React Icon Component from SVG icons to show, resize and recolor them.
We have prepared live demo for you at [React SVG Icon Live Generator](https://react-svg-icon-live-generator.herokuapp.com)
📱Supports React Native 💕
## Fastest way to get your svg converted to React Component
```
yarn global add react-svg-icon-generator
yarn svg-icon-generate -- --svgDir ./icons --destination ./Icon.tsx
```
for detailed options run just `yarn react-svg-icon-generator`
## Preview of Generated Component
[source directory with SVG](https://github.com/blueberryapps/react-svg-icon-generator/tree/master/examples/simple/icons) and [this is output component from gulp task](https://github.com/blueberryapps/react-svg-icon-generator/blob/master/examples/simple/components/Icon.js) so in production you are without any dependencies at all.
## Instalation
you need to add this just to development, because it will generate self contained react component directly to your codebase
```bash
npm install --save-dev react-svg-icon-generator
```
## Setup gulp task simple
```js
const configureSvgIcon = require('react-svg-icon-generator').default;
configureSvgIcon({
destination: path.join(__dirname, 'components', 'Icon.js'),
svgDir: './icons',
});
```
- **svgDir** (required) - path to your directory with svg files. Can be relative path but it is better to use `path.join(__dirname, 'icons')` absolute path so it will work in any directory of project
- **destination** (required) - path.join(__dirname, 'components', 'Icon.js')
run it by `gulp svg-icon`
## Setup gulp task full
```js
const configureSvgIcon = require('react-svg-icon-generator').default;
configureSvgIcon({
comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon',
componentName: 'Icon',
destination: path.join(__dirname, 'components', 'Icon.js'),
keepFillColor: false,
native: false,
radium: true,
reactPureRender: true,
svgDir: path.join(__dirname, 'icons'),
template: path.join(__dirname, 'template', 'icon.nunjucks'),
});
```
- **comment** (optional) - it will be added to generated component, so other developer will know what to do
- **componentName** (optional) - it will change the name of the component, default to 'Icon'
- **keepFillColor** (optional) - it will keep the original fill color from imported SVG in case you want to use multiple colors in your icon, therefore you will not be able to use `color` prop
- **native** (optional) - it will generate component that can be used in React Native projects. This functionality depends on [react-native-svg](https://github.com/react-native-community/react-native-svg) library that has to be installed separately (it is not included in dependencies). You can easily overwrite [default native template](template/icon_native.nunjucks) using *template* option
- **reactPureRender** (optional) - it will use `import {PureComponent} from 'react';` instead of `import {Component} from 'react';`. If you use this, make sure you use React >= v15.3.0.
- **radium** (optional) - it will import radium and wrap Icon component with Radium wrapper. In order to use Radium it has to be installed separately (it is not part of dependencies).
- **template** (optional) - provide path to your custom template, you can look at example at [Icon.template](template/icon.nunjucks)
run it by `gulp svg-icon`
## Setup gulp task own name
```js
const {configureGenerator} = require('react-svg-icon-generator').default;
const config = {
comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon-whatever',
destination: path.join(__dirname, 'components', 'Icon.js'),
reactPureRender: true,
svgDir: path.join(__dirname, 'icons'),
template: path.join(__dirname, 'template', 'icon.nunjucks'),
}
gulp.task('svg-icon-whatever', configureGenerator(config));
```
same as previous + your own task name
## Use generate Icon component
```js
import React, {Component} from 'react';
import Icon from './Icon';
export default class App extends Component {
render() {
return (
Simple possible usage
Setup color and bounding width and height
Setup color and bounding width and height to size (square)
Setup custom style and className
Setup onClick behavior
alert('clicked on icon')} />
Show all icons at once with description (for finding right icon)
);
}
}
```
any prop which is not listed will be passed directly to svg as rest props.
## Development
```bash
git clone [email protected]:blueberryapps/react-svg-icon-generator.git
cd react-svg-icon
npm i
npm link
cd examples/simple
npm link react-svg-icon-generator
npm i
gulp svg-icon
npm start
open http://127.0.0.1:3000
```
## Thanks
This package was build upon [Library Boilerplate](https://github.com/gaearon/library-boilerplate) from [Dan Abramov](https://github.com/gaearon)
## Made with love by
[](https://www.blueberry.io)