@vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
[TOC]
online github
Vue cli 3.0 使用 svg-symbol(svg 雪碧图),整个 的图标库为你所用,加快开发速度.
Vue 脚手架升级 3.0,项目也随之升级。
运行
装包yarn
ornpm i
运行npm run serve
使用
使用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>复制代码