分购体验商城系统开发

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

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章