Phosphor Icons meets Nuxt

An easier way of using @phosphor-icons/vue in your Nuxt project!

  • Nuxt 3 ready.
  • Typescript support.
  • Handy utility function for getting list of icons.
  • Fully compatibility with components from @phosphor-icons/vue.
Get started View project

Setup

Run the following command to add the module to your project:

bash >_

$ pnpm dlx nuxi@latest module add nuxt-phosphor-icons

You have successfully add the module to your project and can now browse phosphor-icons for icons to use, congratulations 🎉.

Usage

I want to read about the

vue YourComponent

<PhosphorIcon name="sun" />

You can use the props below to customize how the icon being rendered

vue 

<PhosphorIcon name="moon-stars" />

Choose what icon to render from @phosphor-icons/vue

Required: true

Type: String

Configuration

You can configure the module using the phosphorIcons key in the nuxt.config

Select a key from the options below to see details specific to such key

ts nuxt.config

export default defineNuxtConfig({
  phosphorIcons: {
    prefix: "phi",
  },
});

Default: phosphor-icon

This key allows you to set the prefix for the component registered by the module.

The snippet below shows how to use the prefixed component:

vue 

<Phi />