vue

在vue.config.js中，添加配置

  module.exports = {      ...      chainwebpack: config => {          // 一个规则里的 基础loader          // svg是个基础loader          英语4级多少分过const svgrule = config.module.rule("svg");          // 清除已有的所有 loader。          // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。          svgrule.us.clear();          // 添加要替换的 loader          svgrule          .u("svg-sprite-loader")          .loader("svg-sprite-loader")          .options({              symbolid: "icon-[name]"          });      },      ...  }

创建vue公共svg组件svgicon.vue

  <template>  <svg :clas黄小琥资料s="svgclass" aria-hidden="true">      <u :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}`          }el {              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 s打工人感恩致辞vgicon from '@/components/svgicon'  vue.component('svg-icon', svgicon)   // 挂载在全局  const requireall = requirecontext => requirecontext.keys().map(requirecontext)  const req = require简短笑话.context('./svg', fal, /\.svg$/)  requireall(req);

使用 <svg-icon icon-class="svgname" /> // svgname必须与/svg-icon/svg/下的svg文件命名一致。