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.

1npm install --save-dev typescript-react-svg-icon-generator

Setup a node file

1const generator = require('typescript-react-svg-icon-generator')
2
3const config = {
4    svgDir: './src/assets/svg/',
5    destination: './src/components/Icon/index.tsx'
6}
7generator(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')
• 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

1import React, {Component} from 'react'
2import Icon from './Icon'
3
4export default class App extends Component {
5  render() {
6    return (
7      <div>
8        Simple possible usage
9        <Icon kind='clock' />
10
11        Setup color and bounding width and height
12        <Icon kind='close' color='#748' width={500} height={100} />
13
14        Setup color and bounding width and height to size (square)
15        <Icon kind='close' color='red' size={600} />
16
17        Setup onClick behavior
18        <Icon kind='close' onClick={() => alert('clicked on icon')} />
19
20        Show all icons at once with description (for finding right icon)
21        <Icon preview />
22      </div>
23    )
24  }
25}

Thanks

This package was build upon react-svg-icon-generator-ts & react-svg-icon-generator