SVG Sprite Webpack Plugin
Description
A webpack plugin/loader to make SVG <use>
-based icon systems easy in Webpack.
Creates an SVG sprite with <symbol>
tags from imported SVG files, and returns
a URL to be passed to an SVG <use>
tag. Uses kisenka's
svg-sprite-loader for internal
transformations (from standalone SVG file to <symbol>
tag).
Installation
npm install --save-dev svg-sprite-webpack-plugin
Usage
Webpack config
const IconPlugin = plugin; // NOTE:// Usage with the included webpack-isomorphic-tools parser requires that// the extracted filename match this format.const iconPlugin = 'icons-[hash].svg'; // ... inside the configuration object module: loaders: test: /\.svg$/ loader: iconPlugin plugins: iconPlugin
Webpack isomorphic tools
If using webpack-isomorphic-tools, add this to your config:
const iconParser = webpackIsomorphicParser; assets: svg: extension: 'svg' parser: iconParser
In code
An example using React 0.14 or later:
import Component from 'react';import myGreatIcon from './my-great-icon.svg'; { return <svg><use = /></svg> ; }
Suggested development mode config
If you're using the webpack-dev-server, it's advised to not use this plugin, and
instead go directly to svg-sprite-loader
.
const iconTest = /\.svg$/;if DEV configmoduleloaders; else configmoduleloaders;
Usage Caveats
Internet Explorer
Internet Explorer does not support <use>
tags with external references.
This has been fixed in Microsoft Edge 13, but until Edge's browser share gets to an acceptable level for you, I suggest using jonathantneal's excellent SVG4Everybody library.
CDNs
<use>
tags do not allow cross-origin requests, and from what I could tell,
aren't likely to start supporting them any time soon. Because of this, instead
of using the output.publicPath
webpack config, this library is currently
expecting that the generated icons svg will be accessible inside the /static
directory on the same domain as the website using the imported icons.
Development
This was originally developed to be used in-house, so I expect there are a number of usecases that are not being adequately covered. Issues and PRs are welcome!
Install dependencies:
npm install --global yarnyarn install
Make sure any code passes tests and the linter before submitting a PR!
yarn testyarn run lint
Meta
Distributed under the MIT License. See LICENSE
for more information.
Developers: