@vue/cli3.0 使用任意 SVG 圖示

nusr發表於2019-04-03
VueSVG

Vue cli 3.0 使用 svg-symbol

SVG Symbol

MDN

SVG 符號引入是現代瀏覽器未來主流的圖示引入方式。其方法是預先載入符號，在合適的地方引入並渲染為向量圖形，特點如下：

  • 支援多色圖示，不再受到單色圖示的限制
  • 通過一些技巧，支援像字型那樣，通過 font-size、color 來調整樣式
  • 支援IE 9+ 及現代瀏覽器

原始碼

線上檢視

Vue cli 3.0 使用 svg-symbol，整個 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>

./vue.config.js 需要配置 svg-sprite-loader

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"]
      });
  }
};

複製程式碼

關鍵

呼叫當前環境下的顏色，當前環境的顏色改變，圖示顏色也會跟著改變

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;  // 關鍵
  overflow: hidden;
}
</style>
複製程式碼

相關文章