Nuxt Phosphor Icons

Phosphor Icons を Nuxt で簡単に統合するためのモジュールです

• ✨  リリースノート
• 🏀 オンラインプレイグラウンド
• 📖  ドキュメント

クイックセットアップ

1. プロジェクトに nuxt-phosphor-icons 依存関係を追加します

   # Using pnpm
   pnpm add -D nuxt-phosphor-icons
   
   # Using yarn
   yarn add --dev nuxt-phosphor-icons
   
   # Using npm
   npm install --save-dev nuxt-phosphor-icons
   

2. nuxt.config.ts の modules セクションに nuxt-phosphor-icons を追加します

export default defineNuxtConfig({
  modules: ["nuxt-phosphor-icons"],
});

3. コード内でのアイコンの使用法

<PhosphorIcon{ icon-name } />

例 :-

<!-- Phone icon -->
<PhosphorIconPhone :size="32" color="#fafafa" weight="fill" />

<!-- Envelope Simple icon -->
<PhosphorIconEnvelopeSimple :size="32" color="#fafafa" weight="fill" />

以上です！ Nuxtアプリで nuxt-phosphor-icons を使用できます✨

リソース

1. ドキュメント: https://nuxt-phosphor-icons.vercel.app
2. Phosphor Icons: https://phosphoricons.com

貢献

StackBlitzでこのモジュールに貢献できます

またはローカルで、次のどちらかのために

ドキュメント

1. リポジトリをクローンします
2. pnpm install で依存関係をインストールします
3. pnpm docs:dev で開発サーバーを実行します

注: Vercelでホストされています

プレイグラウンド

1. リポジトリをクローンします
2. pnpm install で依存関係をインストールします
3. pnpm playground:dev で開発サーバーを実行します