@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

nuxt.config.tsのmodulesセクションにmy-moduleを追加します。

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