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 pnpmpnpm add -D nuxt-phosphor-icons# Using yarnyarn add --dev nuxt-phosphor-icons# Using npmnpm 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 dependenciespnpm install# Generate type stubspnpm dev:prepare# Develop with the playgroundpnpm dev# Build the playgroundpnpm dev:build# Run ESLintpnpm lint# Release new versionpnpm release