Nuxt Icons

独自の SVG アイコンを素早く、そして楽しく使用できる Nuxt 3 用モジュールです。

インストール

npm i nuxt-icons
nuxt-icons を modules に追加します。 nuxt.config.ts

export default defineNuxtConfig({
    modules: ['nuxt-icons']
})

使い方

assets 内に icons フォルダを作成します: assets/icons
.svg 拡張子のアイコンを icons フォルダにドロップします
プロジェクト内で <nuxt-icon name=""> を使用します。name はフォルダ内の svg アイコンの名前です

svg ファイルの元の色を使用する必要がある場合（たとえば、アイコンに defs がある場合）、filled 属性を使用する必要があります
<nuxt-icon name="mySuperIcon" filled />

サブフォルダ

より複雑なフォルダ構成を使用したい場合は、/icons からのパスを使用する必要があります。

次のようなネストされたディレクトリに svg アイコンがある場合

📁icons
  └📁admin
  ⠀⠀└ badge.svg
  └📁user
  ⠀⠀└ badge.svg

アイコンの名前は、独自のパスディレクトリとファイル名に基づきます。したがって、アイコンの名前は次のようになります

<nuxt-icon name="admin/badge"> and <nuxt-icon name="user/badge">

アイコンに割り当てられている基本的なスタイルが気に入らない！

アイコン用に作成されたスタイルは次のようになります

width: 1em;
height: 1em;
margin-bottom: 0.125em;
vertical-align: middle;

たとえば、index.vue ファイルで通常の CSS を使用して、これらのスタイルを簡単に変更できます

<style>
.nuxt-icon svg{
  margin-bottom: 0;
}
</style>

このモジュールの機能

このモジュールは、assets/icons フォルダからすべての svg ファイルを取得し、それらの height と width を上書きしてスケーラブルにし、<nuxt-icon> コンポーネントを使用してそれらを使用できるようにします。<nuxt-icon> は SVG コードを直接 <span> に挿入します。

特徴

簡単な SVG アイコン管理 ✅
HMR (アイコンを再読み込みするためにプロジェクトをリセットする必要はありません) ✅
fill, width, height の代わりに、color, font-size などを使い、フォントのようにアイコンを操作する機能 ✅
filled 属性を使用して、複雑なアイコンの元のカラースキームを使用する機能 ✅
アイコンは使用されている場合にのみロードされます ✅

開発

型定義を生成するには、npm run dev:prepare を実行します。
開発モードで playground を起動するには、npm run dev を使用します。

考えと ToDo

自動 SVG ファイルの最適化
縦横比を維持するために、正方形ではない寸法のアイコンの自動スケーリング（おそらく preserveAspectRatio を使用）
~~以前の Nuxt バージョンで使用可能~~ (代わりにこのようなものを使用してください)
ページで同じアイコンが多数使用されている場合は、個別の SVG スプライトを作成します (パフォーマンスが大幅に向上します)

プロジェクトの開発にご尽力いただいた @Diizzayy に心より感謝申し上げます