Nuxt Phosphor Icons

Just a simple integration for Phosphor Icons in Nuxt

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

Quick Setup

1. Add nuxt-phosphor-icons dependency to your project

   # 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. Add nuxt-phosphor-icons to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-phosphor-icons"],
});

3. Icon usage in your code

<PhosphorIcon{ icon-name } />

Example :-

<!-- Phone icon -->
<PhosphorIconPhone :size="32" color="#fafafa" weight="fill" />

<!-- Envelope Simple icon -->
<PhosphorIconEnvelopeSimple :size="32" color="#fafafa" weight="fill" />

That's it! You can now use nuxt-phosphor-icons in your Nuxt app ✨

Resources

1. Documentation: https://nuxt-phosphor-icons.vercel.app
2. Phosphor Icons: https://phosphoricons.com

Contributing

You can contribute to this module with StackBlitz:

or locally for either

Documentation

1. Clone the repository
2. Install dependencies with pnpm install
3. Run development server with pnpm docs:dev

Note: Hosted on Vercel

Playground

1. Clone the repository
2. Install dependencies with pnpm install
3. Run development server with pnpm playground:dev