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

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

[TOC]

online github

Vue cli 3.0 使用 svg-symbol(svg 雪碧圖)，整個 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. 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