pphat.me logoRegistry
Docs/icons/usage

Using Icons

Download, manage, and remove custom vector icons directly in your frontend project using the @pphatdev/registry CLI.


Quick Start

1. Initialize Configuration

❯npx pphat init

Select Icons and choose your preferred formats (svg, nextjs, or nuxtjs) and destination paths.

2. Browse Available Icons

❯npx pphat list icons

3. Add Icons

Since v1.4.0 the CLI accepts two equivalent grammars. Both write the same files based on your pphatdev.json:

Subcommand grammar

❯npx pphat add icon react vue github

Hyphenated grammar

❯npx pphat add-icon react vue github

npx pphat add react (no subcommand) is preserved as a legacy shortcut for add icon react.


Format & Directory Overrides

To download an icon into a specific folder or format without updating pphatdev.json:

Download as Next.js (.tsx) Component

❯npx pphat add icon github -f nextjs

Download as Nuxt.js (.vue) Component

❯npx pphat add icon github -f nuxtjs

Download as Raw SVG

❯npx pphat add icon github -f svg

Custom Output Directory

❯npx pphat add icon react vue -d src/assets/icons

Removing Icons

Use remove icon (or the hyphenated remove-icon) to delete previously downloaded icons. Removal mirrors add's path resolution, so it only touches files an equivalent add would have written. Missing files are treated as "already gone" — no error, exit 0.

Remove from Every Enabled Format

❯npx pphat remove icon react vue
❯npx pphat remove-icon react vue

Restrict to a Specific Format or Directory

❯npx pphat remove icon react -f svg -d public/icons
❯npx pphat remove-icon github -f nextjs