Vue自定义svg字体图标

1.安装svg-sprite-loader

npm install svg-sprite-loader --save-dev
cnpm install svg-sprite-loader --save-dev

在vue.config.js中配置

// 最上方加入 方法resolve
function resolve(dir) {
  return path.join(__dirname, dir);
}
chainWebpack: (config) => {
    // 图片打包压缩，使用了 --- image-webpack-loader --- 插件对图片进行压缩
    config.plugins.delete("prefetch");
    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      })
      .end();
  },

2.在src目录下新建icon文件

（1.）新建index.js文件用来注册全局组件

 import Vue from "vue";
 import SvgIcon from "@/components/SvgIcon";
 
 // register globally
 Vue.component("svg-icon", SvgIcon);
 
 const req = require.context("./svg", false, /\.svg$/);
 const requireAll = requireContext => requireContext.keys().map(requireContext);
 requireAll(req);

（2.）svg文件用来放.svg的字体图标

3.components下新建SvgIcon文件

在SvgIcon文件下index.vue中编写以下代码

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </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>

4.main中引入

引入

import "./icons";

5.使用

<template>
  <div>
  //任意页面中使用<svg-icon icon-class="" />即可
    <svg-icon icon-class="user" />
  </div>
</template>