Generate React Icon Component from SVG icons to show, resize and recolor them. The default template is a typescript template.
This codebase is built on node v6: https://nodejs.org/en/blog/release/v6.9.0/
You need to add this just to development, because it will generate self contained React component directly to your codebase.
npm install --save-dev react-svg-icon-generator-v2
const generator = require('react-svg-icon-generator-v2');
const config = {
svgDir: './src/ui/icons/',
destination: './src/components/ui/Icon.tsx'
};
generator(config);
const generator = require('react-svg-icon-generator-v2');
const config = {
svgDir: './src/ui/icons/',
mode: 'split',
destination: './src/components/ui/Icon.tsx',
iconDestination: './src/components/ui/icons/'
};
generator(config);
- 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')
- mode (optional) (single or split) - choose mode for generating icons. default mode is generate icons to one file. split is mode for generating each icon to react component
- comment (optional) - it will be added to generated component, so other developer will know what to do
- template (optional) - provide path to your custom template, you can look at example at Icon.template
- iconTemplate (optional) - provide path to your custom template for each icon, you can look at example at Icon.template
run it by gulp icon
import React, {Component} from 'react';
import AppIcon from './AppIcon';
export default class App extends Component {
render() {
return (
<div>
Simple possible usage
<AppIcon name='clock' />
Setup color and bounding width and height
<AppIcon name='close' color='#748' width={500} height={100} />
Setup color and bounding width and height to size (square)
<AppIcon name='close' color='red' size={600} />
Setup onClick behavior
<AppIcon name='close' onClick={() => alert('clicked on icon')} />
Show all icons at once with description (for finding right icon)
<AppIcon preview />
</div>
);
}
}
This package was build upon react-svg-icon-generator-v2