@coremyslo/nuxt-icon-font

Nuxt 圖示字型產生器

注意： 這僅是 Nuxt 3 相容的模組。

功能

🕵️‍♂️ 監看指定的資料夾（和子資料夾）中的 SVG 圖示，並在變更時產生字型
💅 透過 SVGO 優化 SVG 檔案
🤯 手動或基於 browserslist 自動偵測要產生的字型格式
🏗️ 產生自訂屬性（變數）並將圖示代碼注入到頁面中，其中 SVG 檔案名稱用作變數名稱
❤️ 偵測並產生最流行的字型格式作為 base64，以減少頁面跳動效果

使用方式

<template>
  <p>I'm a text with icon!</p>
</template>
<style scoped lang="scss">
  p {
    &:before {
      content: var(--icon-font-house);
      font-family: "icon-font";
    }
  }
</style>

設定

將 @coremyslo/nuxt-icon-font 依賴項新增到您的專案

npx nuxi@latest module add icon-font

將 my-module 新增到 nuxt.config.ts 的 modules 區段

export default defineNuxtConfig({
  modules: [
    "@coremyslo/nuxt-icon-font"
  ]
})

選用在 nuxt.config.ts 中設定您的需求。以下是預設設定。

export default defineNuxtConfig({
  // ...
  iconFont: {
    // Font name to be used in "font-family" and custom properties generated prefix "--icon-font-svgiconfilename"
    name: "icon-font",
    // folder with icons to watch
    sourceDirPath: "assets/icon-font",
    // target folder for generated fonts in "public" folder
    targetDirPath: "icon-font",
    // font formats to generate, fallback to ["woff2"] in case browserslist is not used, example for manual configuration: ["svg", "ttf", "woff", "woff2", "eot"] in any order
    formats: getFontFormatsList(browserslist()),
    // Generates font in memory as "woff" and injects it as base64 to reduce page jump effect, ignores "formats" option
    base64: true,
    // unicode symbol for first icon in iconfont (makes sense to change only if you're not going to use custom properties)
    unicode: "0xE900",
    // generated custom properties (variables) format. Other options are: "snake", "pascal", "camel", "header", "constant"
    case: "kebab"
  }
})