Vue used in the project svg icon

svg pictures with custom color custom size advantage. Ali icon library can be downloaded svg picture.
Then vue framework of how we use it svg pictures
This time it uses webpack plug SVG -sprite- Loader

First of all it is to install a natural

npm i svg-sprite-loader --save


Create a svg file directory / src / icons / svg svg files inside it placed all there / src / iconsThe / index.js

//index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
/* require.context("./test", false, /.test.js$/);
    This line will go to test folder (not including subdirectories) below to find all files with file names ending .test.js can require documents.
    More straightforward to say that we can introduce the corresponding file module through a regular match.
     require.context has three parameters:
     directory: the need to retrieve directory
     useSubdirectories: Retrieves whether subdirectories
     regExp: Positive expression matching file * / 
// global registration 
Vue.component ( 'SVG-icon' , SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)


Adding rules in the configuration file webpack.base.conf.js

       //webpack.base.conf.js
      {
        test: /\.svg$/,
        loader: "svg-sprite-loader",
        the include: [path.resolve (__ dirname, '../src/icons/svg')], // including font icon file 
        // Options: { 
          // symbolId: 'icon- [name]' // this is not in force, in effect is the default name 
        // } 
      }


Then modify the url - Loader Configuration

       //webpack.base.conf.js
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader",
        exclude: [
          path.resolve (__ dirname, '../src/icons/svg'), // exclude font icon file 
        ],
        options: {
          limit: 10000,
          name: utils.assetsPath("img/[name].[hash:7].[ext]")
        }
      }


Creating vue components SVG - icon

<!-- @/components/SvgIcon -->
<template>
    <svg :class="svgClass" aria-hidden="true" @click="$emit('click')">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script>
/**
 * Svg Icon Component
 * IconClass = "icon name"
 * ClassName = "style name"
 */
export default {
  name: 'svg-icon',
  props: {
    iconClass: { type: String, required: true },
    className: { type: String }
  },
  computed: {
    iconName () {
      return `#${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>



Introduced in main.js

import './icons/index.js'


This allows the use of a specific format follows vue

<Svg-icon icon-class = "svg filename" />