vue-cli3配置引入svg图标

1,619 阅读1分钟

       在笔者的公司前端项目中采用的是vue的前端框架,项目用的是vue-cli3搭建起来的脚手架,近期接到需求要在项目中多处展示图片,考虑到svg图标相比于图片的优势,于是在项目中决定引入svg图标。

       但是在引入svg图标并配置的过程中,即使问度哥也是踩了不少坑。现把完整的配置和操作过程记录如下,便于以后自己忘记了可以回头查看参考,有遇到同样需求但是不会配置的也可以参考笔者这篇。如下提到的一些目录,可根据实际项目创建或者修改。

        第一步:在src/assets/icons目录下文件夹新建svg目录,放入svg图标,并在src/assets/icons目录下新建index.js。

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// register globally 注册到全局
Vue.component('svg-icon', SvgIcon)

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

第二步:在main.js引入icons

main.js

import './assets/icons' // icon

第三步:npm install svg-sprite-loader --save-dev

第四步:配置vue.config.js,没有在项目根目录新建一个即可

vue.config.js中svg相关的配置

const path = require('path')
const webpack = require('webpack')

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

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
    chainWebpack: (config) => {
        
        config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            });
    },
   
};

第五步:使用

在要显示字体图标的地方,

<svg-icon icon-class="ag-air-humidity"></svg-icon>

其中icon-class的值是字体图标svg的名称。

到此,可以在vue-cli3中使用svg图标了。