Nuxt Phosphor 图标

只是一个在 Nuxt 中集成 Phosphor 图标 的简单模块

• ✨  发布说明
• 🏀 在线演练场
• 📖  文档

快速设置

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 图标: https://phosphoricons.com

贡献

您可以使用 StackBlitz 为此模块做出贡献

或者在本地进行以下操作

文档

1. 克隆存储库
2. 使用 pnpm install 安装依赖项
3. 使用 pnpm docs:dev 运行开发服务器

注意：托管在 Vercel 上

演练场

1. 克隆存储库
2. 使用 pnpm install 安装依赖项
3. 使用 pnpm playground:dev 运行开发服务器