分购体验商城系统开发

执行命令安装插件 分购体验商城系统开发（T：I8O-285I-O282 V 林 ）npm install svg-sprite-loader –save-dev
在 vue.config.js 中，添加配置

module.exports = {

  ...
  chainWebpack: config => {
      // 一个规则里的 基础 Loader
      // svg 是个基础 loader
      const svgRule = config.module.rule("svg");

      // 清除已有的所有 loader。// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。svgRule.uses.clear();

      // 添加要替换的 loader
      svgRule
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({symbolId: "icon-[name]"
      });
  },
  ...

}
创建 vue 公共 svg 组件 svgIcon.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 lang=”scss” scoped>
.svg-icon {

  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;

}
</style>
新建 svg-icon 文件夹，文件夹下包含 svg 和 index.js，分别为 svg 原文件和引入代码。index.js 内容为：

import Vue from ‘vue’
import svgIcon from ‘@/components/svgIcon’

Vue.component(‘svg-icon’, svgIcon) // 挂载在全局

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context(‘./svg’, false, /.svg$/)
requireAll(req);
使用 <svg-icon icon-class=”svgname” /> // svgname 必须与 /svg-icon/svg/ 下的 svg 文件命名一致。