mp-svg-loader

0.1.1 • Public • Published

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

Package Sidebar

Install

npm i mp-svg-loader

Weekly Downloads

0

Version

0.1.1

License

MIT

Unpacked Size

24.2 kB

Total Files

24

Last publish

Collaborators

  • malash