1. Install SVG – Sprite – loader

npm i svg-sprite-loader
Copy the code

2. Create the maintenance file SRC/ICONS/SVG

Create wx.svg in the SVG folder and copy in the associated SVG code

< SVG t = "1622382818055" class = "icon" viewBox = "0 0 1024 1024" version = "1.1" XMLNS = "http://www.w3.org/2000/svg" p - id = "1252" Width ="228" height="228"><path d="M407.368476 123.685997c16.274662 2.788509 32.714076 4.853541 48.797379 8.491395 60.918441 13.785981 117.402897 36.9434 165.829839 77.812203 45.685505 38.554084 79.480192 84.609003 94.866624 143.048997 1.159406 4.402263 1.812275 8.937556 2.955308 14.706957-96.430236-7.357572-180.793646 17.779945-248.077052 87.387279-68.477604 70.840418-91.054809 154.841577-64.401776 253.68477-20.464077 0-40.316218 1.711991-59.751872-0.407276-27.848255-3.036149-55.336306-9.261944-83.105766-13.220093-6.665817-0.949628-14.645558 0.026606-20.653389 2.942005-35.412534 17.163915-70.414723 35.173081-105.585757 52.835346-1.440815 0.725524-3.194762 0.827855-6.056949 1.52575 0-2.989077-0.603751-5.471618 0.090051-7.517207 9.465582-27.904537 18.871813-55.836703 28.856211 83.560114 3.080152 8.5487 2.801812-13.371542-5.796006-19.546172-53.267181-38.233789-94.90858-85.901439-115.561969-149.479453-4.15053-12.781094-7.2 47054-25.898857-10.829649-38.860053 0-24.717961 0-49.434899 0-74.15286 1.077541-1.613754 2.859118-3.116991 3.12927-4.855588 7.608282-48.925293 28.112268-92.15077 60.069097-129.433908 53.105498-61.95505 121.743762-97.344049 200.989617-113.419166 14.170744-2.876514 28.4254-5.334495 42.643216-7.981788C359.638405 123.685997 383.501906 123.685997 407.368476 123.685997 zM541.309024 313.76717 c0.211824-22.731724-17.2335-40.23333-40.703027-40.836057-23.478737-0.603751-48.463782-20.263509-48.742121 40.706097-0.26913 19.694551 24.028253 41.555441 46.575782 41.905412C522.806625 355.922269 541.083897 338.111624 541.309024 313.76717 zM302.38954 315.568189 c - 1.362021-25.524327-14.19121-37.346583-35.80753-41.939181-19.998473-4.247744-47.560202, 12.521175 to 52.132334 31.049157-1.673106 6.780427-2.255367 15.468296 0.586354 21.409612 8.758478 18.323321 24.808012 27.625174 44.919049 28.684296c281.829272 355.927385 302.592155 336.270696 302.38954 315.568189z" p-id="1253"></path><path d="M900.85482 913.777643 c - 29.519314-16.614399-58.965973-33.356712-88.673575-49.627281-2.76088-1.51347-7.355525-0.679475-10.80202 0.209778 40.551578 10.456143 81.531921 18.003026 123.551944 13.496385-109.176538-11.720949-197.336414-57.307194-244.8608-161.299663-36.887119-80.718393-17.977443-173.936471 44.859697-240.791112 52.099588-55.432497 117.371174-83.547835 192.255699-91.548042 90.882893-9.715269 171.962513 14.004969 241.920842 72.575946 51.487651 43.103704 81.982176 98.445126 85.644589 166.286234 2.192945 40.599673-10.528797 77.914534-31.988552 112.232131-20.531616 32.837896-46.691415 60.629869-77.431533 83.971483-8.102538 6.15007-9.648754 12.0525-6.655584 21.410636 7.741311 24.214495 14.617929 48.706305 21.839401 73.084529C902.560672 913.777643 901.706211 913.777643 900.85482 913.777643zM613.64961 586.435293 C21.441335 0.076748 40.7194-14.832823 41.062208-31.756261 0.366344-18.09103-19.232017-34.55398-41.279149-34.668591-17.46886-0.090051-34.634822-16.537651-34.735106 33.652448C578.597279 570.963926 595.025437 586.369801 613.64961 586.435293zM803.183314 586.449619c21.065781-0.069585 39.209-15.733333-38.920428-33.599236-0.288572-17.929348-19.490913-33.143864-41.405015-32.800034-16.759709 0.25992-33.579793 16.877389-33.744545 33.337269C766.779196 571.005882 783.772218 586.515111 803.183314 586.449619z" p-id="1254"></path></svg>Copy the code

3. Configure the 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/icons')); Rule (' ICONS ').test(/\.svg$/) // set test.include.add (resolve(' SRC/ICONS ')). // Add the context to the array, Use (' svG-sprite-loader ') // Add loader. Loader ('svg-sprite-loader') // Switch context to loader .options({symbolId:'icon-[name]'}) .end() } }Copy the code

4. Wrap the Icon component SRC/Components/icon.vue

<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use xlink:href="#icon-wx"></use> </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.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code

5. Iterate over loading SVG ICONS and importing the wrapped component SRC/ICONS /index.js

Import Vue from "Vue import" Icon from "@ / components/Icon. Vue" automatic import / / / / Icon using the require webpack. Automatically import the context Const req = require.context('./ SVG ',false,/\.svg$/) console.log(req.keys()); req.keys().map(req); Vue.component('Icon',Icon)Copy the code

6. Import in mian. Js

import './icons/index'
Copy the code

7. Use ICONS on the page

<template>
  <div class="about">
 <svg>
   <use xlink:href="#icon-wx"></use>
 </svg>
 <Icon icon-class="wx" class-name="myIcon"></Icon>
   
  </div>
</template>

<script>
import { cesi } from "@/api/test.js";
export default {
  data: function () {
    return {

  
    };
  },
  methods:{
    go(){
      cesi({}).then(res=>{
        console.log(res)
      })
    }
  }

}
</script>
<style >
 .myIcon{
  font-size: 40px;
  color: red;
}
</style>
Copy the code