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

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

目录

• @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
  • 运行
  • 使用
  • 配置 svg-sprite-loader
  • 调用当前环境下的颜色
  • props

online
github

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

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

运行

1. 装包 yarn or npm i
2. 运行 npm run serve

使用

使用 svg-symbol 引入图标

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

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

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

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

配置 svg-sprite-loader

// ./vue.config.js
module.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

props	说明	type
iconName	svg 文件名，不要加上后缀	string
className	图标样式类	string