A React component to inline your SVGs.
npm install react-svg-inline
> A react component to clean and display raw SVGs.
``console`
$ 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:
`js
import React from "react"
import SVGInline from "react-svg-inline"
export default () => (
Webpack to
require() SVGsUse the raw-loader to require() raw SVGs files and pass them to
react-svg-inline.`js
module.exports = {
loaders: [
{
test: /\.svg$/,
loader: 'raw-loader'
}
]
}``js
import React from "react"
import SVGInline from "react-svg-inline"
import iconSVG from "./myicon.svg"export default () => (
)
`Options (props)
$3
PropTypes.stringClass name used for the component that will wrap the SVG.
$3
PropTypes.stringThe class suffix that will be added to the svg className (default: "-svg").
$3
PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
]),The component that will wrap the svg (default:
span).$3
PropTypes.string.isRequired$3
PropTypes.stringColor to use
$3
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.
$3
PropTypes.arrayThis allow you to whitelist some svg attributes to keep while cleaning some
others.
$3
PropTypes.string$3
PropTypes.string$3
PropTypes.stringThis value is added as an svg
element that is accessible to screen readers.
(Note: when this option is used, an SVG id attribute will be automatically injected).$3
PropTypes.stringThis value is added as an svg
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`).