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

目錄

• @vue/cli 3.0 使用 svg-sprite-loader 加載本地 SVG 文件
  • 運行
  • 使用
  • 配置 svg-sprite-loader
  • 調用當前環境下的顏色
  • props

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

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