手摸手，优雅实现vue中使用 svg-icon

svg

1. 安装依赖

npm install svg-sprite-loader --save-dev#yarn add svg-sprite-loader

`svg-sprite-loader` 是 webpack loader，可将多个 svg 打包成 svg-sprite

安装完后还需要进行改造，原因是：`vue-cli` 默认情况下会使用 `url-loader` 对svg进行处理，会将它放在 `/img` 目录下，这时候引入`svg-sprite-loader`会引起冲突

//默认`vue-cli` 对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}}

改造：

`svg-sprite-loader` 只处理指定文件下的svg
`url-loader` 只处理指定文件以外的所有svg

vue-cli2

在webpack.base.conf.js的 `rules` 中加上：

{test: /\.svg$/,loader: 'svg-sprite-loader',include: [resolve('src/icons')],options: {symbolId: 'icon-[name]' // name代表图标的名字}},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',exclude: [resolve('src/icons')], // 使用exclude排除src/icons，让url-loader只处理除此文件夹之外的svgoptions: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}}

vue-cli3 在 `vue.config.js` 中添加如下webpack的配置

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")) // 使用exclude排除src/icons，让url-loader只处理除此文件夹之外的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();},};

2. 在 `@/src/components` 下新建 `SvgiCon.vue`组件

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"></use></svg></template><script>export default {name: "svg-icon",props: {iconClass: {type: String,required: true,},className: {type: String,},},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>

3. 在src目录下新建icons、svg文件夹和index.js文件,目录结构如下

svg 文件夹存放要使用的 .svg 图片，然后使用 index.js 自动引入 `@/src/icons/svg` 下的所有图标

index.js 如下：

import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// svg组件// 全局注册组件Vue.component('svg-icon', SvgIcon)// 定义一个加载目录的函数const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context('./svg', false, /\.svg$/)// 加载目录下所有 .svg文件requireAll(req)

这样每次只要增删改对应的图标，就会自动生成 `svg symbol`

4. 在 `main.js`中引入

import './icons'

5. 在页面中使用

<svg-icon iconClass="chart"></svg-icon>

iconClass的赋值名字要和svg文件名一致

ps:index.js中require.context的使用

一般情况下，文件引入使用import，但是像这种情况，文件夹下有多个svg文件，如果单个import，就会很繁琐，而且以后增加了svg文件，都需要修改index.js，针对这种场景，就需要用到context，此方法接受三个参数，文件路径，是否引入文件的子目录，正则匹配文件，如

const req = require.context('./svg', false, /.svg$/)