SVG-Sprite uses the SVG symbol element to include each icon in the symbol, using the use element to use the symbol. Click to see the detailed principle

SVG-Sprite Advantages and Pros:

Modify the ID can change the icon, easy to use. Small amount of page code, low maintenance cost. Icon can change the color size, reduce the load of duplicate images and reduce the number of image requests. Disadvantages:

Polychromatic, gradient color can not change the color of the icon through the color value, the designer needs to redesign the icon. Browser rendering performance is mediocre. Browser compatibility is poor, support IE9 +, modern browsers. Tool 1, SVG-Sprite-Loader to solve the pain point according to the imported SVG file automatically generate the symbol tag (SVG Sprite map) and insert HTML.

The installation

NPM install svg-sprite-loader –save-dev vue-cli2.0 webpack We exclude the SVG handler from processing the icon. We exclude the SVG handler from processing the icon.

// build/webpack.base.conf.js

{

test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, exclude: [resolve('src/assets/icons/svg')], loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') }

} We need to do image processing for the icon: Sprite the SVG files in the include. The option can set the symbolID, or otherwise the default ID will be the SVG file name.

// build/webpack.base.conf.js

{

test: /\.svg$/, include: [resolve('src/assets/icons/svg')], loader: 'svg-sprite-loader', options: { symbolId: 'icon-[name]' // specify symbolId as SVG file name if not specified}

} Vue-CLI3.0 Webpack configuration WebApck configuration customization, can refer to the official demo

// vue.config.js

const path = require(‘path’)

function resolve(dir) {

return path.join(__dirname, ‘./’, dir)

}

module.exports = {

chainWebpack: config => {

config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/)  .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: '[name]' })

}} Use methods in the page after Webpack configuration can be used directly in the page. Import introduces the icon icon to be used

Import ‘./assets/ ICONS/SVG/za-icon-vatic. SVG ‘to check if the page has loaded the symbol tag content (i.e. SVG Sprit) as follows:

<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” style=”position: absolute; width: 0; height: 0″ id=”__SVG_SPRITE_NODE__”>

<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 18" Id ="icon name ">{{icon path omitted}}</symbol>

symbol is loaded successfully, use the SVG tag in the template. XLink’s href is replaced with the ID of the SVG icon or a custom ID in Webpack.

< SVG >

<style type=”text/css”>

.za-svg-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}

> is now ready to use ICONS.

Componentization currently uses ICONS by importing them with Import, drawing them with SVG, and writing common styles. You can simplify things a little more and put them into a common component. The components are as follows:

// src/components/SvgIcon.vue

<use :xlink:href="iconName"/>

</svg>

</template>

<script>

export default {

name: ‘SvgIcon’,

props: {

iconClass: {
  type: String,
  required: true
},
className: {
  type: String,
  default: ''
}

},

computed: {

iconName () {
  return `#za-icon-${this.iconClass}`
},
svgClass () {
  if (this.className) {
    return `za-svg-icon za-icon-${this.iconClass} ` + this.className
  } else {
    return `za-svg-icon za-icon-${this.iconClass}`
  }
}

}

}

</script>

now only takes two steps to use the component.

Import ‘./assets/ ICONS/SVG/za-icon.svg ‘
Each time an icon is used, an import is required. You can use Webpack’s ==require.context== method to dynamically import the icon icon. The specific document is stamped here.

import Vue from ‘vue’

import SvgIcon from ‘@/components/SvgIcon.vue’

// register svg-icon (‘svg-icon’, SvgIcon)

// import const requireAll = requireContext => requireContext.keys().map(requireContext)

// import all three SVG parameters that meet the criteria: Folder, whether to use subfolders, regular const req = require.context(‘@/assets/ ICONS/SVG ‘, true, /.svg$/) requireAll(req) Now just use the svg-icon component directly in the page, To display an icon, modify the icon-class.

Step 1: Copy the generated symbol code below the project:

// at.alicdn.com/t/font_8d5l8fzk5b87iudi.js Step 2: Add common CSS code (just introduce it once) :

<style type=”text/css”>

.icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; }

<svg class=”icon” aria-hidden=”true”>

<use xlink:href="#icon-xxx"></use>

< / SVG > reprint articles: https://segmentfault.com/a/11…