WebPack loader that converts SVG files into React Components
npm install svg-jsx-loaderWebpack loader that allows you to load your SVG files as React components.
npm install svg-jsx-loader
This loader outputs a React component. To use it for all of your .svg files you need to include it in your webpack module.loaders configuration as follows.
loaders: [
{ test: /\.svg$/, loaders: ['babel?presets[]=react', 'svg-jsx'] }
]
To use it for individual files:
var MyComponent = require('babel?presets[]=react!svg-jsx!../svg/my_component.svg');
In both cases babel with react preset is required to transpile resulting JSX.
Besides options that are passed to underlying svg-to-jsx module svg-jsx-loader supports a few options itself:
es6 {Boolean} Use ES6 compatible JavaScript syntax for component class. Defaults to false.
memo {Boolean} Only available when es6 option is set to true Use React.memo instead of React.PureComponent. Defaults to false.
displayName {String} displayName of generated class. Defaults to null.
This module was inspired by react-svg-loader.