3.0.3 • Published 5 years ago
react-svg-loader v3.0.3
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
LICENSE
3.0.4-alpha.3
5 years ago
3.0.4-alpha.2
5 years ago
3.0.3
5 years ago
3.0.2
5 years ago
3.0.2-alpha.2
5 years ago
3.0.2-alpha.1
5 years ago
3.0.1
5 years ago
3.0.0
5 years ago
2.1.1-alpha.36
5 years ago
2.2.0-alpha.90436959
6 years ago
2.2.0-alpha.b8e3c6d5
6 years ago
2.2.0-alpha.02daccb2
6 years ago
2.2.0-alpha.10f9a762
6 years ago
2.2.0-alpha.038ff855
6 years ago
2.2.0-alpha.52f0a7dd
6 years ago
2.2.0-alpha.a1496904
6 years ago
2.2.0-nightly.58aa6b3c
6 years ago
2.2.0-alpha.58aa6b3c
6 years ago
2.1.0
6 years ago
2.0.0
6 years ago
2.0.0-alpha.4
6 years ago
2.0.0-alpha.3
7 years ago
2.0.0-alpha.2
7 years ago
2.0.0-alpha.1
7 years ago
2.0.0-alpha.0
7 years ago
1.1.1
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago
1.0.0-3
8 years ago
1.0.0-2
8 years ago
1.0.0-1
8 years ago
1.0.0-0
8 years ago
0.1.0
8 years ago
0.0.6
9 years ago
0.0.5
9 years ago
0.0.4
9 years ago
0.0.3
9 years ago
0.0.2
9 years ago
0.0.1
9 years ago
0.0.0
9 years ago