- v2.0.0-alpha.0 - master branch
- Drops Node 0.12 support (use at your own risk)
npm i react-svg-loader
// without webpack loader config
import Image1 from 'react-svg!./image1.svg';
// or if you're passing all .svg files via react-svg loader,
import Image2 from './image1.svg';
// and use it like any other React Component
<Image1 width={50} height={50}/>
<Image2 width={50} height={50}/>
By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with babel-loader to compile it down to ES5.
// In your webpack config
{
test: /\.svg$/,
loaders: [
{
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
loader: 'react-svg',
query: {
jsx: true
}
}
]
}
Pass loader query jsx=true
.
// In your webpack config
{
test: /\.svg$/,
loader: 'react-svg?jsx=1'
}
{
test: /\.svg$/,
loader: 'react-svg',
query: {
svgo: {
// svgo options
plugins: [{removeTitle: false}],
floatPrecision: 2
}
}
}
or if you're using with babel-loader, you can
{
test: /\.svg$/,
loader: 'babel!react-svg?' + JSON.stringify({
svgo: {
// svgo options
plugins: [{removeTitle: false}],
floatPrecision: 2
}
}),
}
{
test: /\.svg$/,
loaders: [ 'babel',
{
loader: 'react-svg',
query: {
svgo: {
plugins: [{removeTitle: false}],
floatPrecision: 2
}
}
}
]
}
Input SVG
↓
SVG Optimize using SVGO
↓
Babel Transform with preset=react
and plugin=svgToComponent
Going from bottom up, the following transformations are applied and the same can be checked in the partly annotated source - babel-plugin
<svg pointer-events="none">
<path stroke-width="5"/>
</svg>
is transformed to
<svg pointerEvents="none">
<path strokeWidth="5"/>
</svg>
React expects style attribute value to be an object. Also, Hyphenated style names are converted to camel case.
<svg style="text-align: center">
<circle style="width: 10px"/>
</svg>
is transformed to
<svg style={{textAlign: 'center'}}>
<circle style={{width: '10px'}}/>
</svg>
The props passed to the output component is passed on to the root SVG node and the props already defined are overridden by the props passed.
<svg width="50">
...
</svg>
is transformed to
<svg width="50" {...this.props}>
...
</svg>
<svg class="hello"/>
is transformed to
<svg className="hello"/>
The loader should now export the svg component. And this is done by wrapping it in a Component Class.
<svg>...</svg>
is transformed to
import React from 'react';
export default class SVG extends React.Component {
render() {
return <svg>...</svg>;
}
}
<svg style='text-align: center; width: 100px' pointer-events="stroke">
<circle cx="50" cy="50" r="25" style="text-align: center;" stroke-width="5" />
</svg>
import React from "react";
export default class SVG extends React.Component {
render() {
return <svg
style={{ textAlign: "center", width: "100px" }}
pointerEvents={this.props.pointerEvents ? this.props.pointerEvents : "stroke"}
{...this.props} >
<circle cx="50" cy="50" r="25" style={{textAlign: "center"}} strokeWidth="5" />
</svg>;
}
}
The react-svg-loader comes with a cli (svg2react
) that you can use to convert svg files to react components. Use this tool when you'd want to customize your svg component by hand. Otherwise the loader just works.
`npm bin`/svg2react file1.svg file2.svg
and the following files will be emitted
file1.svg.react.js
file2.svg.react.js
in the SAME directory as the files
--jsx
: Outputs JSX code instead of compiling it to JavaScript using babel-preset-react--stdout
: Outputs to STDOUT--svgo <config_file>
: Supports SVGO Config YAML / JSON / JS--svgo.plugins <...plugins>
: Takes in an array of plugins that need to be enabled--svgo.plugins.<plugin> <true|false>
: - Enable/Disable the plugin--svgo.floatPrecision $N
: Set floatPrecision toN
for SVGO. SVGO supports 1-8.
`npm bin`/svg2react file1.svg --es5 -0
- Root element is always
<svg>
- SVG is optimized using SVGO
MIT License - https://boopathi.mit-license.org/2015