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