inline-svg-react

Inline your raw svg files with react with a little bit of accessibility

The component will inline your raw SVG file in react with a little bit of accessibility. There are various solutions that exist but I did this for the main purpose of my needs as I found this simpler. Plus it adds a little bit of accessibilty to the SVG elmenent. See this post for further details about SVG accessibility when inlined.

Install

$ npm install inline-svg-react
# or with yarn
$ yarn add inline-svg-react

Note: You need raw-loader eg. npm install raw-loader if you want to use this with webpack to require your svg files.

Usage

Basic example:

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

const Icon = '<svg><path d="M13 23h7V8L10 .631 0 8v15h7v-7h6v7z"/></svg>'

export default () => (
  <div>
    <InlineSVG icon={Icon} label="Home" />
  </div>
)

...Will output

<span>
  <svg role="img"><title id="svg-byng2">Icon - Home</title><path d="M13 23h7V8L10 .631 0 8v15h7v-7h6v7z"/></svg>
</span>

Usage with Webpack

Using raw-loader to require() your SVG files.

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

// With svgo-loader to optimize your svg files:

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

...then in your .js file require the svg as you would:

import React from "react"
import InlineSVG from "inline-svg-react"
import Icon from "./myicon.svg"

export default () => (
  <div>
    <InlineSVG icon={Icon} />
  </div>
)

Options (props)

icon (Required)

PropTypes.string

Your raw SVG element.

size (Optional)

PropTypes.number

Inline-svg-react can adds width and height to your wrapper element to keeps its styling consistent.

label (Optional)

PropTypes.string

The name of your SVG element/file. It will inject in the SVG element this:

<title id="svg-arn5g">Icon - NameOfYourSVGElement</title>

...rest

Everything else you would like pass to the wrapper element like style, className, etc...

Inspirations and Altenatives

• react-svg-inline
• svg-inline-react

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.

CHANGELOG

LICENSE