mp-svg-loader's Introduction

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`