1)安装插件
npm install svg-sprite-loader --save-dev
2)封装svgIcon组件
在componemts里新建svgIcon文件夹,新建index.vue,封装成组件
<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; fill: currentColor; overflow: hidden; } </style>
3)在src下新建icons文件夹,此文件夹下新建svg文件夹。其中svg文件夹存放所有的svg文件
4)在icons下新建index.js,由于配置svg
import Vue from 'vue' import SvgIcon from '@/components/svgIcon' Vue.component('svg-icon', SvgIcon) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) requireAll(req)
5)在svg文件夹下新建user.svg。打开阿里图标仓库,找一个用户的图标的svg并复制,粘贴到user.svg中
6)在vue.config.js添加下面的内容
const path = require('path') function resolve(dir) { return path.join(__dirname, '.', dir) } module.exports = { chainWebpack: config => { config.module.rules.delete("svg"); //重点:删除默认配置中处理svg, config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include .add(resolve('src/icons')) //处理svg目录 .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }, }
7)在main.js里引入
import './icons'
8)在页面中使用
svg图标<svg-icon icon-class="user"></svg-icon>
其中icon-class指定的是svg文件的名字。查看页面如下: