在笔者的公司前端项目中采用的是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图标了。