@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

[TOC]

online github

Vue cli 3.0 使用 svg-symbol(svg 雪碧图)，整个 的图标库为你所用，加快开发速度.

Vue 脚手架升级 3.0，项目也随之升级。

运行

使用

使用svg-symbol引入图标

svg 文件会导入到 HTML 文件中，无需使用两张 png 切换

./src/main.js引入import "./icons";

在./src/icons/svg文件夹下的 svg 文件会自动导入项目

下载图标下载的 svg 图标放在./src/icons/svg文件夹下为了使用当前环境下的颜色，去掉 svg 的 fill 属性调用<svg-icon icon-name="home" class-name="test"></svg-icon>

配置svg-sprite-loader

// ./vue.config.jsmodule.exports = {chainWebpack: config => {const svgRule = config.module.rule("svg");svgRule.uses.clear();svgRule.use("svg-sprite-loader").loader("svg-sprite-loader").options({symbolId: "icon-[name]",include: ["./src/icons"]});}};复制代码

调用当前环境下的颜色

当前环境的颜色改变，图标颜色也会跟着改变

<!--SvgIcon--><style>.svg-icon {width: 1em;height: 1em;fill: currentColor; /*关键*/overflow: hidden;}</style>复制代码

props