Use external-svg-sprite-loader instead.
A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.
You will need NodeJS v6+, npm v3+ and webpack.
To make it work in Internet Explorer you will also need SVG for Everybody.
npm i external-svg-sprite-loader
name
- relative path to the sprite file (default:img/sprite.svg
).prefix
- value to be prefixed to the icons name (default:icon
).
emit
- determines if the sprite is supposed to be emitted (default: true). Useful when generating server rendering bundles where you just need the SVG sprite URLs but not the sprite itself.
If you have the following webpack configuration:
// webpack.config.js
import path from 'path';
import SvgStorePlugin from 'external-svg-sprite-loader/lib/SvgStorePlugin';
module.exports = {
module: {
loaders: [
{
loader: 'external-svg-sprite',
test: /\.svg$/,
},
],
},
output: {
path: path.resolve(__dirname, 'public'),
publicPath: '/',
},
plugins: [
new SvgStorePlugin(),
],
};
You will be able to import your SVG files in your JavaScript files as shown below.
The imported SVG will always correspond to a JavaScript object with keys symbol
, view
and viewBox
:
- The
symbol
url can be used on a<use>
tag to display the icon; - The
view
url is supposed to be used in CSS; - The
viewBox
value is required by some browsers on the<svg>
tag.
The URLs will have the following format:
symbol
:webpackConfig.output.publicPath
/loader.name
#loader.prefix
-your-svg-file-name
-icon-file-hash
view
:webpackConfig.output.publicPath
/loader.name
#view-loader.prefix
-your-svg-file-name
-icon-file-hash
/*
* {
* symbol: '/public/img/sprite.svg#icon-logo',
* view: '/public/img/sprite.svg#view-icon-logo',
* viewBox: '0 0 150 100'
* }
*/
import logo from './images/logo.svg';
class {
render() {
return (
<svg viewBox={logo.viewBox}>
<use xlinkHref={logo.symbol} />
</svg>
);
}
}
In CSS files, you can import your SVG files as shown bellow (assuming you are using the ExtractTextPlugin).
The imported value will be converted into the view
url shown above.
.special-icon {
/* the url will be replaced with the url to the sprite */
background-image: url('./icons/special.svg') no-repeat 0;
}
You can find working examples in the examples
folder. To test them under the example folder run:
npm install
npm start
And then you can see the result in https://localhost:3000
.
First of all, thank you for contributing, you are awesome.
Here are a few rules to follow in order to ease code reviews, and discussions before maintainers accept and merge your work:
- Make sure your commit messages make sense (don't use
fix tests
,small improvement
,fix 2
, among others). - Before creating a pull request make sure of the following:
- your code is all documented properly;
- your code passes the ESLint rules;
- variable, function and class names are explanatory enough;
- code is written in ES2015.
- When creating a pull request give it a name and description that are explanatory enough. In the description detail everything you are adding, do not assume we will understand it from the code.
Thank you!