1.1.0 • Published 7 years ago

m-svg-sprite-loader v1.1.0

Weekly downloads
-
License
ISC
Repository
-
Last release
7 years ago

M SVG sprite loader

A simple SVG sprites loader inspired by svg-sprite-loader

Why M SVG sprite loader

The original SVG sprite loader has an 13KB (uglified) runtime, which is a little heavy for mobile. And there are some bugs (#179, #183) working with raster image on IE9.

So I create this loader, which is basically compatible with the original SVG sprite loader, aimed to having a very lightweight runtime.

How to use

Add m-svg-sprite-loader to webpack.config.js

{
  test: /\.svg$/,
  loader: 'm-svg-sprite-loader',
  options: {
    symbolId: 'icon-[name]',
  },
},

Import SVGs

import './a.svg'
import './b.svg'

This will auto insert a hidden <svg> to <body>:

<svg [hidden]>
  <symbol id="icon-a"></symbol>
  <symbol id="icon-b"></symbol>
</svg>

Then you can use <use> to use Icon:

<svg xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="#icon-a"></use>
</svg>