vue项目配置使用svg图标

五一劳动节雨纷纷，来篇文章分享分享——svg图标的使用。

svg-sprite-loader将加载的svg图片拼接成雪碧图，放到页面中，其它地方通过use复用

安装：

npmi-Dsvg-sprite-loader

webpack（vue.config.js）配置：

chainWebpack:config={config.module.rule("svg").exclude.add(resolve("src/icons/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()}

WARNING

一般情况下都会有配置url-loader，注意urlloader中要将icons文件夹排除,不让url-loader处理该文件夹

关键字：exclude:[resolve(src/icons)]

在src下建立以下目录和文件：

src

转载请注明：http://www.jinchangjk.com/afhzp/2090.html