Nuxt Phosphor Icons

一个简单的 Phosphor Icons 在 Nuxt 中的集成

• ✨  更新日志
• 🏀 在线 Playground
• 📖  文档

快速设置

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 上

Playground

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