Vue-Cli4使用SVG的3种方式

第一种：直接使用SVG文件地址

1.创建组件 /components/Svg.vue

2.全局注册组建 /main.js

...
import Svg from "@/components/Svg.vue"
Vue.component('v-icon', Svg)

3.应用 /view/Test.vue

4.运行结果

• 优点：简单，按需请求
• 缺点：请求增加，无法改变图标颜色

第二种：使用svg-sprite-loader，按需加载

1.在vue项目中安装 svg-sprite-loader

D:Vue\project>npm install svg-sprite-loader --save-dev

2.修改根目录配置文件 vue.config.js ,没有就手动创建，修改配置记得要重新 npm run serve 一下

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]'
            })
            .end()
    }
}

3.创建组件 components/Svg.vue，22行的前缀要与配置一致

4.新建 /src/icons 和 /src/icons/svg 目录，把.svg文件都放到 /src/icons/svg 目录里
5.新建 /src/icons/index.js 文件并编辑

import Vue from 'vue'
import Svg from '@/components/Svg'
Vue.component('v-icon', Svg)

6.全局引入Icons，main.js

...
import Icon from './icons'
new Vue({
    ...
    Icon,
    ...
})

7.应用 /view/Test.vue

8.运行结果：在下面会增加一个

...


...

    

...

• 优点：无请求，页面顶部会预加载已经import的.svg的DOM，可以进行CSS样式修改。
• 缺点：每次使用都要import对应的.svg文件

第三种：使用svg-sprite-loader，指定目录下svg文件全部自动加载

1.上面我们创建 icons/svg 目录就是为了这个目的，只需要在之前的 /icons/index.js 文件加上3句代码，就可以实现 icons/svg 目录下全部.svg自动加载

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

2.应用中无需import，直接可以用 /view/Test.vue

3.运行结果：页面中会把 icons/svg 目录下的所有svg都预加载出来，一个symbol为一组

...


...

    

...

• 优点：无请求，会将指定目录中所有.svg文件dom加载到页面顶部
• 缺点：非按需加载，如果上百个SVG都加载会不会开销很大？

本人为自学初学，水平有限，有错请指教。