mp-svg-loader
A Webpack loader which processing SVG image by URI search params.
// will add fill="red" to svg element;
Why
In WeChat Mini Program development there are much lack of SVG image support. For example:
-
Don't support use inline SVG.
-
Don't support changing fill / stroke color by CSS.
-
Don't support SVG without
xmlns
within<image>
'ssrc
attribute. ( This is not only a Mini Program issue but also other browsers. )
This Webpack loader is designed for solving there problems if you are developing WeChat Mini Program with Webpack, e.g. mina-webpack or wxapp-webpack-plugin , or any Webpack project.
Setup
Install package to your project:
npm i mp-svg-loader --save-dev
Add mp-svg-loader
to your Webpack config file.
In most case you also use other loader like file-loader
, url-loader
or svg-inline-loader
. Here is an example works with file-loader
:
module: rules: test: /\.svg$/ use: loader: 'file-loader' options: name: 'assets/[name].[hash:6].[ext]' loader: 'mp-svg-loader' ;
Other examples can be found in fixtures.
Please not that the order of Webpack loaders is important. See Loader Features - Webpack
Usage
Add URI search params when import
your SVG images.
Webpack loader use loader-utils
' parseQuery for parse URI search params which is different with the WHATWG URL.
All rules here:
key | type | description | example |
---|---|---|---|
fill | String | Add fill attribute for svg element |
my.svg?fill=red my.svg/fill=#008489 my.svg?fill=rgb(127%2C%20127%2C%200) ( became fill="rgb(127, 127, 0)" ) |
stroke | String | Add stroke attribute for svg element |
Same as fill |
xmlns | Boolean | Add / remove xmlns attribute( for inline / standalone image ) |
my.svg?+xmlns my.svg?-xmlns |
If the rule you want to use is not listed above please create a issue / pull-request.