svg-sprite-loader 自动替换图标

作用：每次在iconfont下载的图标引入到项目里，如果重新添加了图标，就要重新下载来覆盖原项目的图标文件，svg-sprite-loader可以省略这一步骤。

1.进入iconfont网站www.iconfont.cn，找到你需要的图标复制svg

image.png

2.创建文件夹

创建icons文件夹 -> svg -> help.svg (将上面复制的svg代码copy到help.svg文件里)

image.png image.png

3.icons文件夹内 index.js配置

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

req.keys().map(req)

4.npm i svg-sprite-loader -D

5.vue.config.js

const path = require('path’)

function resolve(dir) {

return path.join(__dirname, dir)

}

chainWebpack: config => {

config.module.rule('svg').exclude.add(resolve('src/assets/icons'))

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]' })

}

6.main.js

import './assets/icons/'

7.使用

<svg>

<use Xlink:href=‘#icon-help'></use>

</svg>