Encapsulation and configuration of svg icon components in the vue project (global import)

 Usually the icons in the project use img, iconfont, etc. The benefits of using svg icons are:

1. Performance

One of the most important aspects affecting web performance is the size of the files used on web pages. SVG graphics are typically smaller files compared to raster graphics such as GIF, JPG, and PNG.

2. Accessibility

SVG files are text-based and can be searched and indexed. This makes them readable by screen readers, search engines and other devices.

1. Install npm install svg-sprite-loader --save-dev

2. Create a custom component 

Specific code:

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

<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script>

<style scoped>
    .svg-icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

3. Create icons in the root directory, create a new index.js (global import), and create a new svg directory, dedicated to svg pictures (Ali's iconfont can download svg pictures)

 The specific code of index.js is as follows:

import Vue from 'vue'
import SvgIcon from '@/components/svgIcon'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

 4. Import main.js globally for import

 5. The project needs to be configured vue.config.js

const path = require('path')
module.exports = {
    lintOnSave: false,
    devServer: {
        open: true,
        port: 8080,
    },
    chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        svgRule.uses.clear()
        svgRule
            .test(/\.svg$/)
            .include.add(path.resolve(__dirname, './src/icons')).end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
        const fileRule = config.module.rule('file')
        fileRule.uses.clear()
        fileRule
            .test(/\.svg$/)
            .exclude.add(path.resolve(__dirname, './src/icons'))
            .end()
            .use('file-loader')
            .loader('file-loader')
    }
}

6. Use components in the project

Note: The value of icon-class is directly the file name of the svg. 

 The size can be set through font-size.