react-easy-svgs is a react component that facilitates rendering inline svgs from a single json file.

Installing

$ npm install react-easy-svgs

Using

For code reusability it is recommended to create an Icon component wrapper and use that throughout your project

icon.js

import React, { PureComponent } from 'react';
import IconJSON from './icons.json';
import createSvgFromSet from 'react-easy-svgs';
const Svg = createSvgFromSet(IconJSON);

export default class Icon extends PureComponent {
  render() {
    return (
      <Svg {...this.props} />
    )
  }
}

myComponent.js

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

export default class MyComponent extends Component {
  render() {
    return (
      <Icon name='left-arrow' color='red' width='54' height='54' />
    )
  }
}

Props

• color: sets fill color for all paths in svg
• width: width of svg
• height: height of svg
• ...any other svg-compatible attributes

Creating an SVG JSON file

It is recommended to use svgson to generate a JSON file from a directory of SVGs

• Install svgson globally

  $ npm install -g svgson
  

• input /svgs folder | output icons.json file

  $ svgson --input svgs --output icons.json -t