vue引入svg图标（svg-sprite-loader）

安装 svg-sprite-loader

npm i svg-sprite-loader

components下面创建svg文件然后下面再来一个index.vue

index.vue

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <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>

src下面创建 icons文件下面由svg图标和index.js

index.js

import Vue from 'vue'
import SvgIcon from '@/components/svg'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

vue.config.js 配置 svg-sprite-loader

const path = require('path')
module.exports = {
  // 输出文件目录
  outputDir: 'PC',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false, //关闭eslint
  chainWebpack: () => { },
  productionSourceMap: false,//代码可读性
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  parallel: require('os').cpus().length > 1,
  pwa: {},
  // eslint-disable-next-line no-dupe-keys
  chainWebpack: config => {
    //修改或新增html-webpack-plugin的值，在index.html里面能读取htmlWebpackPlugin.options.title
    config.plugin('html')
      .tap(args => {
        args[0].title = "腕豪求抱抱";
        return args;
      })
     //配置 svg-sprite-loader
    // 第一步：让其他svg loader不要对src/icons进行操作
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))//注意：路径要具体到存放的svg的路径下，不然会报错
      .end()
    // 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))//注意：路径要具体到存放的svg的路径下，不然会报错
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => { }
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
}
// 重要!!!
function resolve (dir) {
  return path.join(__dirname, dir)
}

main.js引入

import './icons'

使用

<svg-icon class="svg" slot="prefix" icon-class="login"></svg-icon>

结束