vue中使用svg

vue中使用svg

1. 新建svg组件

<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 scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

2. 设置为全局组件并读取svg

// svgIcon/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'

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

const requireAll = requireContext => requireContext.keys().map(requireContext)
// 
let path = '@/assets/icons' // svg 文件路径
const req = require.context(path, false, /\.svg$/)
requireAll(req)

3. 在main中引入

import '@/svgIcon'

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

// 1. 安装依赖    
yarn add svg-sprite-loader
// 2. 配置
chainWebpack: (config) => {
    const svgRule = config.module.rule('svg') // 找到svg-loader
svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
svgRule.exclude.add(resolve('src/assets/icons')) // //放置svg的路径
    .end()
config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/assets/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
    symbolId: 'icon-[name]'
})
    .end()
})

5.使用

<template>
  <svg-icon icon-class="bx-analyse" style="font-size: 16px;color: yellow"></svg-icon>
</template>