The most convenient way to use ICONS in a project is to use iconfont, refer to the download file of iconfont for the usage method.

But if you want to customize some ICONS (such as SVG ICONS drawn in the team’s internal UI), Sprite is a better way to do it.

This article will discuss how to integrate and introduce SVG Icon in a Vue project by combining VUE-CLI and SVG-Sprite-Loader.

The core is the following 4 steps:

  • Webpack configuration SVG – Sprite – loader

  • Automatic import of SVG icon files (batch import)

  • Build custom SVG-Icon components

  • Importing component usage

Webpack configuration SVG – Sprite – loader

1. Install SVG – Sprite – loader

npm install -D svg-sprite-loader
Copy the code

2. The configuration

SVG as an icon and SVG as a normal image use different loaders

// vue.config.js
const path = require('path')
const resolve = dir= > path.join(__dirname, dir)
module.exports = {
  // ... order options
  chainWebpack(config) {
    // Configure SVG rules to exclude SVG file processing in the ICONS directory
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()

    // Add the ICONS rule and set svG-sprite-loader to handle SVG in the ICONS directory
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
      .end()
  },
}
Copy the code

Automatically import SVG files

// Create an icons.js file to import SVG files in batches
// This is built under utils @/utils/icons.js
const requireAll =
  requireContext= > requireContext.keys().map(requireContext)
const req = require.context('.. /assets/icons'.false, /\.svg$/)
requireAll(req)
Copy the code
// main.js
import '@/utils/icons.js'
Copy the code

Create a custom Icon component

Note the SVG color issue here, if your SVG file is already filled with a fill attribute, the CSS style fill attribute will not take effect. So to use CSS to control the color of SVG, you need to unfill the FILL property of SVG files.

// SvgIcon.vue <template> <svg :class="classes" :style="styles" aria-hidden="true" v-on="$listeners" > <use :xlink:href="iconName"></use> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true,}, color: {// Set the color type: String, required: true,}, size: [Number, String], // Customize size className: {type: String, default: ",},}, computed: { iconName() { return `#icon-${this.iconClass}` }, classes() { return this.className ? `svg-icon ${this.className}` : 'svg-icon' }, styles() { let style = {} if (typeof this.size === 'number') { style.width = `${this.size}px` style.height = `${this.size}px` } else { style.width = this.size style.height = this.size } if (this.color) { style.fill = this.color }  return style }, }, } </script> <style scoped> .svg-icon { width: 1em; height: 1em; fill: transparent; // Default does not populate overflow: hidden; } </style>Copy the code

SvgIcon can be registered as a global component

// main.js
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)
Copy the code

The introduction of

// component.vue
<template>
  <div>
    <svg-icon iconClass='your svg file name' color="#fff" size="30" />    
  </div>
</template>
Copy the code