Package assembly svg

Author: smile warm _Tini

Original link: juejin.im/post/5cf79b...

How to package components svg icon

There svg icon package components are many ways, if you just simply want to use the icon svg, svg can export fonts using the font icon, but doing so will lose svg original style and dimensions, may be treated as img pictures or background introduction, but this is very tedious.

Recent projects need a lot of svg icons, describes a way to use svg icons by vue components here:

First, look at the use of elements svg icons.

<svg>
  <defs>
    <g id="shape">
        <rect x="0" y="0" width="50" height="50" />
        <circle cx="0" cy="0" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />
</svg>
复制代码

For example, I draw an id for the shape of the svg element, when I want to reuse, impossible to copy and paste the code again, then use the aid elements, so xlink:hrefdesignated #shape, it will look for the corresponding svg element and cloned in order to achieve multiplexing.

convenient to use element is the same in a long document, use can be referenced to, a single element which can be reused, may be reused a group <g>or <symbol>element can be invoked only when the selector is scaled by id.

Want to know the specific contents use cloned placed where the underlying svg and more content, reference: to the content of SVG with CSS to style

Package assembly vue

First, the svg file you want to use UI provides unified in one folder:

├── src
    ├── svg
        ├── user.svg
        └── course.svg
复制代码

Development vue components:

// svg-icon.vue
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
import './icons';

export default {
  name: 'SvgIcon',
  props: {
    // svg图标名称
    name: {
      default: ''
    },
    // 自定义样式
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.name}`;
    },
    svgClass() {
      return [
        'svg-icon',
        this.className ? this.className:''
      ]
    }
  }
};
</script>

<style scoped>
.svg-icon {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
复制代码

We look forward to using the svg-icon to unify all components of svg files, to change the corresponding svg file by specifying the name.

Svg file you want to use, then also need to unify all the svg file is loaded into memory, you can use import 'svg/user.svg'such a way a reference here to the aid of require.contexta one-time introduction of all svgfiles.

// icons.js

const req = require.context('@svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);
复制代码

This time, not through svg-icon specified component name by way of references against the svg file. We also need each svg file for further processing, the icon of the contents of the package into their document symbolelements, use to achieve the following results:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol class="icon" viewBox="0 0 970 740" id="icon-user">...</symbol>
</svg>
复制代码

Here can make use of webpack plugin: SVG-the sprite was dropped-Loader

webpack reconstruction project configuration

Because the project is based vue-cli3 customizable, so here only explain how to configure vue-cli3 in svg-sprite-loader.

code show as below:

module.exports = {
    ...
    chainWebpack: config => {
        ...
        config.module
          .rule('svg')
          .exclude.add(resolve('src/svg'))
          .end();
        config.module
          .rule('svgs-loader')
          .test(/\.svg$/)
          .include.add(resolve('src/svg'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]'
          })
          .end();
    }
}
复制代码

Here we must note, configure svg-sprite-loaderbefore, first to replace vue-cli3 own file-loaderrules, which loaderwill svg resources like the picture output alone out here configured file-loaderto ignore all of the following svg svg files.

Finally, in the vue can be used by the corresponding icon svg svg-icon assembly.

As the article content error, please understand, I hope you can let me know.

Please indicate the source