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

Preview of Generated Component

source directory with SVG and this is output component from gulp task 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

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

Setup gulp task simple

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

const configureSvgIcon = require('react-svg-icon-generator').default;

configureSvgIcon({
  comment: 'Generated by gulp svg-icon, if you add new icon run gulp svg-icon',
  destination: path.join(__dirname, 'components', 'Icon.js'),
  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
• reactPureRender (optional) - it will use import Component from 'react-pure-render/component'; instead of import {Component} from 'react';
• radium (optional) - it will import radium and wrap Icon component with Radium wrapper
• template (optional) - provide path to your custom template, you can look at example at Icon.template

run it by gulp svg-icon

Setup gulp task own name

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',
  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

import React, {Component} from 'react';
import Icon from './Icon';

export default class App extends Component {
  render() {
    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 size (square)
        <Icon kind='close' color='red' size={600} />

        Setup onClick behavior
        <Icon kind='close' onClick={() => alert('clicked on icon')} />

        Show all icons at once with description (for finding right icon)
        <Icon preview />
      </div>
    );
  }
}

Development

git clone git@github.com: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 from Dan Abramov