vue-cli3使用svg矢量图标

四个步骤：

• 安装依赖 svg-sprite-loader
• 配置webpack
• 编写组件 <svg-icon></svg-icon>
• 全局注册组件（自动导入）
• 引用

1.安装 svg-sprite-loader

npm i svg-sprite-loader --save

2.配置webpack

'use strict';
const path = require('path');

function resolve(dir) {
    return path.join(__dirname, dir)
}

const port = 8080 ;

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: process.env.NODE_ENV === 'development',
    productionSourceMap: false,
    devServer: {
        port: port,
        open: false,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/api': {
                target: `http://219.132.138.58:28081`,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    // 此处配置svg
    chainWebpack(config) {
        // set svg-sprite-loader
        config.module.rules.delete("svg");
        config.module
                .rule('svg')
                .exclude.add(resolve('src/icons')) // 此处对应下文的自动导入svg图标所存放的地址
                .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()
    }
};

这是一份完整的vue.config.js文件，请读者自行挑选需要拷贝的部分

3.编写组件

<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>

组件所存放位置自行确定；本文位置为 src/components/SvgIcon/index

4.全局注册组件（自动导入）

分两步：

• 新建图标存放位置 icons 目录

目录包含两个文件svg文件夹和index.js文件，svg文件夹下放置下载好的svg图标，index.js实现自动导入和全局注册

index.js代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // 读者的组件位置需自行匹配

// 全局注册
Vue.component('svg-icon', SvgIcon);
// 自动导入
const req = require.context('./svg', false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext);
requireAll(req);

• main.js导入

import './icons'

5.引用

 <svg-icon icon-class="bug"></svg-icon>

效果: