Get started

This page would guide you through using this module.

Setup

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

bash >_

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

Congratulations 🎉. You have successfully add the module to your project and can now browse the icon library

Note: This module would add a little bit of an overhead in the development and production environments.

Why? Well, this module loads 1512 icons globally as async chunks with no prefetching/preloading — I might add. No further explanation, that's all.

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

Choose icon stroke/fill color. It can be any CSS color string, including hex, rgb, rgba, hsl, hsla, named colors, or the special currentColor variable.

vue

<PhosphorIcon color="#eee" />

Configuration

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

This key allows you to set the name of the component registered by the module.

Default: phosphor-icon

ts nuxt.config

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