A react component to clean and display raw SVGs.


$ npm install react-svg-inline

You might also need to npm install raw-loader if you want to use this with webpack.

Here is an example of a usage in a React stateless component:

import React from "react"
import SVGInline from "react-svg-inline"

export default () => (
  <div>
    <SVGInline svg={"<svg....</svg>"} />
  </div>
)

Use the raw-loader to require() raw SVGs files and pass them to react-svg-inline.

module.exports = {
  loaders: [
    {
      test: /\.svg$/,
      loader: 'raw-loader'
    }
  ]
}

import React from "react"
import SVGInline from "react-svg-inline"
import iconSVG from "./myicon.svg"

export default () => (
  <div>
    <SVGInline svg={ iconSVG } />
  </div>
)

PropTypes.string

Class name used for the component that will wrap the SVG.

PropTypes.string

The class suffix that will be added to the svg className (default: "-svg").

PropTypes.oneOfType([ PropTypes.string, PropTypes.func, ]),

The component that will wrap the svg (default: span).

PropTypes.string.isRequired

PropTypes.string

Color to use

PropTypes.oneOfType([ PropTypes.bool, PropTypes.array, ])

This allow you to cleanup (remove) some svg attributes. Here are the supported value that can be removed:

• title
• desc
• comment
• defs
• width
• height
• fill
• sketchMSShapeGroup
• sketchMSPage
• sketchMSLayerGroup

If cleanup === true, it will remove all the attributes above.

PropTypes.array

This allow you to whitelist some svg attributes to keep while cleaning some others.

PropTypes.string

PropTypes.string

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests ($ npm test).