` 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](CHANGELOG.md) ## [LICENSE](LICENSE) </article></body></html>

# react-svg-inline [![Travis (Unix) Build Badge](https://img.shields.io/travis/MoOx/react-svg-inline/master.svg?label=unix+build)](https://travis-ci.org/MoOx/react-svg-inline) > A react component to clean and display raw SVGs. ## Install ```console $ 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: ```js import React from "react" import SVGInline from "react-svg-inline" export default () => (

"} />

) ``` # Webpack to `require()` SVGs Use 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) ### 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 `` 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](CHANGELOG.md) ## [LICENSE](LICENSE) </article></body></html>

	Stars	Issues	Version	Updated	Created
react-svg-inline	224	3	2.1.1	6 years ago	8 years ago
svg-inline-react	131	15	3.2.1	3 years ago	8 years ago
svg-react-loader	558	52	0.4.6	6 years ago	9 years ago
svg-url-loader	240	5	8.0.0	2 years ago	9 years ago
svgo			3.3.2	5 days ago	12 years ago

react-svg-inline vs svg-inline-react vs svg-react-loader vs svg-url-loader vs svgo

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past