Nuxt Phosphor 图标

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

贡献

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

或在本地为以下任一项做出贡献

文档

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

注意：托管在 Vercel 上

游乐场

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