Nuxt Phosphor Icons

在 Nuxt 中針對 Phosphor Icons 的簡單整合

• ✨  發行說明
• 🏀 線上遊樂場
• 📖  文件

快速設定

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-phosphor-icons 加入 nuxt.config.ts 的 modules 區塊

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 執行開發伺服器