如何在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

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. 在页面中使用组件

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