svg图标封装组件

VUE项目中将svg图标封装为组件,后续拷贝进svg文件直接使用

icon组件

<template>
  <svg :class="svgClass" aria-hidden="true" 

  // /* 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>

配置自动引入svg文件

使用webpack的require.contextAPI，两种方法

assets/icon是存放svg图标文件的路径

1. 在assets/icon新建index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

Vue.component('svg-icon', SvgIcon)

const importAll = r => r.keys().forEach(r)

const svgContext = require.context('@/assets/icon', false, /\.svg$/);// 获取该目录下所有.svg的context

importAll(svgContext)

//在main.js中导入

import '@/assets/icon/index'

2. 或者直接在main.js中

import SvgIcon from '@/components/SvgIcon'

const importAll = r => r.keys().forEach(r)

const svgContext = require.context('@/assets/icon', false, /\.svg$/);// 获取该目录下所有.svg的context

importAll(svgContext)
Vue.component('svg-icon',SvgIcon) // 全局注册

devDependencies

• svg-baker-runtime
• svg-sprite-loader
• 配置

  // vue.config.js
  chainWebpack: (config) => {
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icon"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "[name]",
      });
  },

使用

尺寸可以自己覆盖样式

<svg-icon
  :icon-class="cardData.platform"
  style="width: 2em; height: 2em;vertical-align:middle"
></svg-icon>