Learn Nuxt with a Collection of 100+ Tips!

nuxt-phosphor-icons
nuxt-phosphor-icons

Just a simple integration for @phosphor-icons in Nuxt

Nuxt Phosphor Icons

npm versionnpm downloadsNuxt

Just a simple integration for Phosphor Icons in Nuxt

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"],
});
  1. 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:

Edit OyewoleOyedeji/nuxt-phosphor-icons/main

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

Deploy with Vercel

Playground

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