Generate SVG icons for React.Js Typescript

Generate SVG icons for React.Js Typescript

I was keep looking for a library that can generate typescript icons but i didn’t get success so i decided to make a library myself.

Generate React Icon Component from SVG icons to show, resize and recolor them. The default template is a typescript template.

npm install --save-dev react-svg-icon-generator-v2

Setup a node file

Default mode

const generator = require('react-svg-icon-generator-v2');
const config = {
    svgDir: './src/ui/icons/',
    destination: './src/components/ui/Icon.tsx'
};
generator(config);

Split mode

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

Use generate Icon component

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>
    );
  }
}

You can find example here Github