Nuxt Icons
独自のSVGアイコンを素早く簡単に使用できるNuxt 4用モジュールです。
インストール
- `npx nuxi@latest module add icons
- nuxt.config.tsのmodulesに
nuxt-iconsを追加
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>
オンラインで入手可能なアイコンパックのアイコンを使用したい
アイコンをSVG形式でダウンロードして/iconsフォルダに入れるか、これをネイティブでサポートする別のモジュール、nuxt-iconを使用できます。
このモジュールがすること
このモジュールは、assets/iconsフォルダからすべてのsvgファイルを取得し、それらの高さと幅を上書きしてスケーラブルにし、<nuxt-icon>コンポーネントを使用してそれらを使用できるようにします。<nuxt-icon>はSVGコードを直接<span>に挿入します。
機能
- 簡単なSVGアイコン管理 ✅
- HMR (アイコンを再読み込みするためにプロジェクトをリセットする必要はありません) ✅
fill,width,heightの代わりに、color、font-sizeなどを使って、アイコンをフォントのように操作できる機能 ✅filled属性を使用して、複雑なアイコンの元の配色を使用できる機能 ✅- 使用された場合のみアイコンがロードされる ✅
開発
- 型スタブを生成するには、
npm run dev:prepareを実行してください。 npm run devを実行して、開発モードでplaygroundを開始します。
考察とToDo
- SVGファイルの自動最適化
- 非正方形の寸法を持つアイコンの比率を維持するための自動スケーリング（preserveAspectRatioを使用するかもしれません）
以前のNuxtバージョンでも使用可能(ただこのようなものを使用してください)- 同じアイコンがページに多数使用されている場合、個別のSVGスプライトを作成する（パフォーマンスが大幅に向上します）
プロジェクト開発における貴重なご協力に対し、@Diizzayyに心から感謝いたします。