React SVG Icon Generator Typescript
Generate React Icon Component from SVG icons to show, resize and recolor them. The default template is a typescript template.
Dependencies
This codebase is built on node v6: https://nodejs.org/en/blog/release/v6.9.0/
Instalation
You need to add this just to development, because it will generate self contained React component directly to your codebase.
npm install --save-dev typescript-react-svg-icon-generator
Setup a node file
const generator = const config = svgDir: './src/assets/svg/' destination: './src/components/Icon/index.tsx'
- 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')
- 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
- tslintDisable (optional) - add
/* tslint:disable */
after comment
Use generate Icon component
{ return <div> Simple possible usage <Icon kind='clock' /> Setup color and bounding width and height <Icon kind='close' color='#748' width=500 height=100 /> Setup color and bounding width and height to <Icon kind='close' color='red' size=600 /> Setup onClick behavior <Icon kind='close' onClick= /> Show all icons at once with <Icon preview /> </div> }
Thanks
This package was build upon react-svg-icon-generator-ts & react-svg-icon-generator