moox / react-svg-inline

DEPRECATED, I recommend you the tool SVGR

DEPRECATED, I recommend you the tool SVGR

---

react-svg-inline

A react component to clean and display raw SVGs.

Install

$ npm install react-svg-inline

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

Usage

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>
)

Webpack to require() SVGs

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>
)

Options (props)

className

PropTypes.string

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

classSuffix

PropTypes.string

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

component

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

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

svg

PropTypes.string.isRequired

fill

PropTypes.string

Color to use

cleanup

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.

cleanupExceptions

PropTypes.array

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

width

PropTypes.string

height

PropTypes.string

accessibilityLabel

PropTypes.string

This value is added as an svg <title> element that is accessible to screen readers. (Note: when this option is used, an SVG id attribute will be automatically injected).

accessibilityDesc

PropTypes.string

This value is added as an svg <desc> element that is accessible to screen readers.

---

CONTRIBUTING

• ⇄ 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).

CHANGELOG

LICENSE

react-svg-inline's Issues

How can I use it with a svg file which contains all the svg icon?

If a svg file which contains all the svg icon, then how can i use it?
For example, I used it <svg><use xlink:href='myicon.svg#icon-plus'></use></svg>.
Now,how can I used it with react-svg-inline?

Remove wrapping tag

I love using this module, as it is the only one fulfilling my needs. The only thing bugging me is that every SVG will be wrapped inside a span by default. I'd love an option to disable the wrapper. At least I couldn't figure out how to remove the span using the component prop.

Replace cleanup options with svgo-loader?

I seems to me that some options in cleanup are better addressed by using svgo-loader, any take on this?

Disable suffix by default

If you use this component with postcss-local-modules-by-default it clashes with this suffix, I'm not sure as to the reason why this component has this enabled by default. Seems like something you would let the user configure optionally.

Why raw-loader required?

Time to time I want to use svg as a background property in styles. In this case I need a link to svg, not its content.

Does raw-loader really needed?

width/height inline CSS doesn't have units

Any reason why the inline CSS for width/height doesn't have unit?
It makes the icons break my design on Firefox.

It should specify px unit.

dangerouslySetInnerHTML

Hi,

thanks for sharing this Component!

I think the React team chose the name for this property for a good reason.

Is there any way around using this property? (except copy and pasting the SVG markup into jsx )
It would make me sleep much better ;)

best,
oleg

UMD Build?

Hi!

Would you consider publishing a UMD build? I'm using an old build system that uses require.js, and I can not get this package to work, even if I try to build it as a UMD module with browserify (has an issue finding classnames).

I'm using webpack and I'm getting a <span> as output

I'm trying to inline my SVG's using this library, but I'm not getting any SVG's. Only span's with the svg path in them.

This is my code:

import SVGInline from 'react-svg-inline'
import starPath from './assets/star.svg'

<SVGInline svg={starPath} />

And this is how my environment.js looks (I'm using Rails 5.1 with webpacker):

const { environment } = require('@rails/webpacker')

environment.loaders.set('json', {
  test: /\.svg$/,
  use: 'raw-loader'
})

module.exports = environment

And this is my output:

<span class="SVGInline">/packs/components/Header/assets/star-9e223cf57b348993582090a549f0fc40.svg</span>

Any suggestions as to what I might be doing wrong?

Possibility to add/modify <title> for A11Y purposes

Something like this:

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" role="img">
<title xmlns="http://www.w3.org/2000/svg">ArrowDown_ico</title>
<path xmlns="http://www.w3.org/2000/svg" d="M.134 1.194l4.505 4.359c.2.192.522.192.72 0l4.505-4.359a.538.538 0 0 0 0-.779.575.575 0 0 0-.389-.159L.536.254a.574.574 0 0 0-.402.161.538.538 0 0 0 0 .78"></path>
</svg>

react

<SVGInline svg={ iconSVG } title="this is a icon" id="myIcon" />

output:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" role="img" aria-labelledby="myIcon">
<title id="myIcon">this is a icon</title>
<path d="M.134 1.194l4.505 4.359c.2.192.522.192.72 0l4.505-4.359a.538.538 0 0 0 0-.779.575.575 0 0 0-.389-.159L.536.254a.574.574 0 0 0-.402.161.538.538 0 0 0 0 .78"></path>
</svg>

TypeScript type definitions

Hello!

I use typescript in my project and it would be perfect to have type definitions for your library.
http://definitelytyped.org/

Thanks

Why are fills removed?

Why are fills removed? I'm using google material design icons and some of them use fills. They render incorrectly with svg inline because the fills gets stripped out.

Any suggestions for dealing with conflicting SVG IDs?

I just spent a few days hunting down the fact that I had an existing SVG with:

<defs>
  <ellipse id="a" cx="6" cy="6" rx="6" ry="6"></ellipse>
</defs>

And then I added a new SVG with:

<defs>
  <ellipse id="a" cx="16" cy="16" rx="16" ry="16"></ellipse>
</defs>

The usages of #a in the second SVG were all using the definition from the first SVG, causing much confusion.

The current workaround is to ensure that all of our source files have unique ids, but is there
something more automatic that we could do here?

It appears that tools like SVGInjector or SVGInject add unique prefixes to the IDs and their usages (see also conflicting ids in two different SVG files included in the same HTML document).

style prop

Have you considered accepting a style prop as opposed to only width and height?

Sometimes I use margins, for example. I made a quick patch to allow just the styling changes I need, but can put something together to accept a style prop (similar to other react components) if that makes sense.

It doesn't work with React 16

TypeScript defs

I made types of this component and created PR to DefinitelyTyped.
DefinitelyTyped/DefinitelyTyped#26987

Please check it and tell me if found something wrong.

Option to easily add filters?

Hello,

I really like your component. It's nice and efficient.

However, I would like to be able to add some filter on my SVG at runtime.

I don't think it is easily possible in current state. Do you think something like this could be added?

Thanks.