分购体验商城系统开发

执行命令安装插件分购体验商城系统开发（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文件命名一致。