preface

The iconfont icon was chosen as the common icon library after searching for many solutions to the common ICONS encountered in the project.

However, in practical development, there are many inconveniences in using the development mode provided by IconFONT. For example, when you need to add an icon, you need to update the link online, and then replace the link in the project.

Next, note how to encapsulate the icon in vUE and use it more efficiently.

This article is taken from: Hand touch, with your elegant use of icon

Packaging components

Let’s start by creating a single page file for the common component Icon

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconClass"></use>
  </svg>
</template>

<script>
export default {
  name: "svgClass", props: {// Icon type to use icon iconName: {type: String,
      required: true}, // Whether to add class style className: {type: String,
      default: ""
    }
  },
  computed: {
    iconClass() {
      return `#icon-${this.iconName}`;
    },
    svgClass() {
      if (this.className) {
        return `icon ${this.className}`;
      } else {
        return`icon`; }}}}; </script> <styletype="text/css"scoped> .icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

File to import

After writing the single page file, you need to register the component as a global component and import the SVG icon used in the project. In this case, I imported all of the. SVG files in the SVG file

import Vue from 'vue'; // Import icon from the written icon component'@/components/icon'; // Register with Vue.component('icon'Const requireContext = require.context() const requireContext = require.context();'./svg'.false, /\.svg$/) // Const importAll = r => r.keys().map(r) importAll(requireContext)Copy the code

Add SVG – Sprite – loader

Since we are using file import, we need to use the loader. Vue-cli scaffolding actually handles.SVG files for us

// By default, 'vue-cli' handles SVG and matches files with the suffix. SVG. After successful matches, urL-loader is used for processing. {test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, loader:'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')}}Copy the code

However, this default processing is no longer applicable. This default method only helps us to pack in the IMG folder without any optimization.

This is where an SVG loader comes in.

svg-sprite-loader

This loader allows you to embed SVG in a single page application, dynamically importing the added SVG file at the beginning of the HTML

Next add svG-Sprite-loader

Here I’m using the vuE-cli3 version and first create vue.config.js

Module. exports = {// webpack attribute chainWebpack: config => {// modify internal SVG rule const SVG = config.module.rule()"svg");
    svg.exclude.add(resolve("src/icons")).end(); Const svgSpriteLoader = config.module.rule() const svgSpriteLoader = config.module."svg-sprite");
    svgSpriteLoader
      .test(/\.svg$/)
      .include.add(resolve("src/icons/svg"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"}); }}Copy the code

SRC /icon is excluded from the SVG default loader extraction directory. Add svG-sprite-loader to extract only SRC/ICONS/SVG directory, generate SVG format named icon-[name]

use

After the appeal, the next step is to use it.

Very simple to use, the code is as follows:

<icon :iconName="icon-name"></icon>