vue--封装维护自己的Svg图标组件库

1.安装 svg-sprite-loader

npm i svg-sprite-loader

2.建立维护文件 src/icons/svg

在svg文件夹下创建wx.svg并将相关svg代码拷入

<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.247054-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.685997zM541.309024 313.76717c0.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.76717zM302.38954 315.568189c-1.362021-25.524327-14.19121-37.346583-35.80753-41.939181-19.998473-4.247744-47.560202 12.521175-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.777643c-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.435293c21.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>

3.配置 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'));
           //添加svg-sprite-loader
           config.module.rule('icons')
              .test(/\.svg$/) //设置test
              .include.add(resolve('src/icons')) //加入include
                 .end()  //add完上下文进入数组，使用end回退
                 .use('svg-sprite-loader')  //添加loader
                 .loader('svg-sprite-loader')   //切换上下文到loader
                 .options({symbolId:'icon-[name]'})
                 .end()
    }
}

4.封装图标组件 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.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5.遍历加载svg图标 并引入封装的组件 src/icons/index.js

import Vue from "vue"
import Icon from "@/components/Icon.vue"

//图标自动导入
//利用webpack 的require.context自动导入
//返回的req是只去加载svg目录中的模块的函数
const req = require.context('./svg',false,/\.svg$/)
console.log(req.keys());
req.keys().map(req);

//Icon组件全局注册
 Vue.component('Icon',Icon)

6.在mian.js 中 引入

import './icons/index'

7.在页面中使用图标

<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>