如何在vue中优雅的使用svg

1. svg-sprite-loader

安装loader处理svg文件

npm install svg-sprite-loader --save

2. 在src中新建文件夹icons

icons/svg 存放svg图标
icons/index.js 全局注册svg组件，导入所有svg图标

image.png

// icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg component
// register globally
Vue.component('SvgIcon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3. 创建svg组件

// src/components/ScgIcon/index.vue
<template>
  <svg :class="svgClass" 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>

4. 在vue.config.js中使用loader

首先找到原有的svg规则，将src/icons文件夹排除（exclude），添加一个新的规则icons，让其规则包含（include）src/icons文件夹，并使用svg-sprite-loader处理这些文件，会给这些文件生成一个 icon-[name]唯一标识，name为svg文件名

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {
    port: 8080,
    open: true
  },
  chainWebpack (config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

5. 在main.js中导入icons/index.js

// main.js
import '@/icons/index' // svg

6. 在页面中使用组件

<SvgIcon iconClass="eye-open"></SvgIcon>

直接使用svg文件名作为iconClass
更多文章关注：辰漪博客