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