@engineerapart/react-svg-loader
v2.1.0
Published
Optimize svg and load it as a React Component
Downloads
17
Readme
react-svg-loader
Install
npm i react-svg-loader --save-dev
or
yarn add react-svg-loader --dev
Usage
// without webpack loader config
import Image1 from 'react-svg-loader!./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}/>
Loader output
By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with babel-loader + babel-preset-env to compile it down to your target.
// In your webpack config
{
test: /\.svg$/,
use: [
{
loader: "babel-loader"
},
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
}
]
}
SVGO options
{
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{ removeTitle: false }
],
floatPrecision: 2
}
}
}
]
}
Internals
Assumptions and Other gotchas
- Root element is always
<svg>
- SVG is optimized using SVGO