React show svg

Simple react component that transforms plain svg to usable icon.

TL;DR

import React from 'react';
import ReactShowSvg from 'react-show-svg';
import SvgIcon from 'path/to/icon.svg';

class App extends React.Component {
  render() {
    return (
      <ReactShowSvg
        size="30px"
        fill="#000000"
        icon={SvgIcon}
      />
    );
  }
}

IMPORTANT

First you need to add svg-inline-loader to your webpack project!

$ npm install svg-inline-loader --save

Update your webpack config file:

const config = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-inline-loader'
          }
        ]
      }
    ]
  }
}

NPM

$ npm install react-show-svg --save

Yarn

$ yarn add svg-inline-loader && react-show-svg

Usage

Import raw svg file with svg-inline-loader and pass it as icon property.

You can also pass width & height or size properties ( pass size if you want width & height to be equal ).

API

• icon: string
• width: string
• height: string
• size: string ( width & height )
• fill: string
• className: string
• onClick: function
• ref: function
• id: string

Dependencies

• svg-inline-loader
• svg-to-jsx