yi-svg-sprite

yi-svg-sprite

yi-svg-sprite is used to build svg sprite in vue

How

This plugin uses 'file-loader' to load normal svg files, and uses 'svg-sprite-loader' to build svg sprite.

Also, it uses 'svgo' and 'svgo-loader' to compress svg sprite.(It deletes the titles and annotations in svg)

Getting Started

install

To begin, you'll need to install svg-sprite-loader and yi-svg-sprite:

npm i svg-sprite-loader --save-dev
npm i svgo svgo-loader --save-dev
npm i yi-svg-sprite

vue.config.js

Then add these settings to your vue.config.js file(if it does not exist, create one):

const path = require("path");

module.exports = {
  chainWebpack: config => {
    const resolve = dir => path.join(__dirname, dir);
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();

    svgRule
      .test(/\.(svg)(\?.*)?$/)
      .oneOf('name')
        .include
          .add(resolve('src/assets/sprite.svg'))
          .end()
        .use('file-loader')
          .loader('file-loader')
          .options({
            name: 'img/[name].[hash:8].[ext]'
          })
          .end()
        .end()
      .oneOf('normal')
        .exclude
          .add(resolve('src/assets/sprite'))
          .end()
        .use('file-loader')
          .loader('file-loader')
          .options({
            name: 'img/[name].[hash:8].[ext]'
          })
          .end()
        .end()
      .oneOf('sprite')
        .include
          .add(resolve('src/assets/sprite'))
          .end()
        .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'sprite-[name]'
          })
          .end()
        .use('svgo-loader')
          .loader('svgo-loader')
          .options({
            plugins: [
              {removeTitle: true},
              {convertColors: {shorthex: false}},
              {convertPathData: false}
            ]
          });
  },
};

tips

All your svg files (to be built into svg sprite) should be placed under src/assets/sprite folder.

main.js

Finally, import yi-svg-sprite in your main.js:

import SvgSprite from 'yi-svg-sprite';

Vue.use(SvgSprite);
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./assets/sprite', false, /\.svg$/);
requireAll(req);

tips

You can modify src/assets/sprite in both vue.config.js and main.js to change the default sprite folder.

examples

You can use YiSvg as a vue component anywhere like this:

<yi-svg svgId="haha" className="app-svg"/>

tips

svgId is required, it is the name of your svg file.

ToDo

• implement svgo plugin.
• change it to vue-cli3 plugin.