Nuxt Phosphor Icons

Just a simple integration for phosphor-icons in Nuxt

Features

A <PhosphorIcon /> component (the name can be changed) — this renders the icons

Quick Setup

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

Add nuxt-phosphor-icons to the modules section of nuxt.config.ts

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

  // Optionally change the default prefix - PhosphorIcon
  phosphor: {
    prefix: "your-prefix",
  },
});

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

Usage

This module exposes a <PhosphorIcon /> that you can use in your Nuxt app.

<template>
  <!-- This uses the defaults -->
  <PhosphorIconAirplane />

  <!-- This overrides the defaults -->
  <PhosphorIconAirplane size="40" color="green" />
</template>

Note

To find out more about props for the component, refer to https://github.com/phosphor-icons/vue
To find the list of icons, refer to https://phosphoricons.com

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the playground
pnpm dev

# Build the playground
pnpm dev:build

# Run ESLint
pnpm lint

# Release new version
pnpm release