vue cli3使用svg-sprite-loader

iconfont symbol对比svg-sprite-loader

iconfont symbol在SVG使用上简单，但是对于后期修改不方便。
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关
目前symbol方式的iconfont:

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。
  使用iconfont的symbol方法

具体操作步骤

1. 首先在iconfont官网批量下载svg图片，可以操作

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png

2. 将下载好的SVG放在目录src/icons/svg
3. 安装svg-sprite-loader

yarn add svg-sprite-loader --dev

4. 配置vue.config.js,加入一段代码

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

module.exports = {
 chainWebpack: config => {
        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]'
            })
    }
}

5.在compoents下新建SvgIcon组件index.vue

image.png

6. 在src/icons下新建index.js

   
   
   

   image.png

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

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

7. 在main.ts下添加import '@/icons'

   
   
   

   image.png

OK,完成以上配置即可添加svg