mp-svg-loader

mp-svg-loader

A Webpack loader which processing SVG image by URI search params.

// will add fill="red" to svg element
import mySvg from './my.svg?fill=red';

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>'s src 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.

License

MIT