@transitionsag/phosphor-solid

SolidJS components for the Phosphor Icons family. This package implements one SolidJS component per icon, covering 1,500+ icons across six weights: thin, light, regular, bold, fill, and duotone. Icons are sourced from @phosphor-icons/core.

Installation

pnpm add @transitionsag/phosphor-solid

Usage

import { ArrowRightIcon } from "@transitionsag/phosphor-solid";

function App() {
  return <ArrowRightIcon weight="bold" class="w-6 h-6 text-white" />;
}

Components accept any standard SVG attributes plus a weight prop. Sizing and coloring are handled via CSS — fill="currentColor" is set by default.

Props

| Prop | Type | Default | Description | | -------- | --------------- | ----------- | --------------------- | | weight | IconWeight | "regular" | Icon stroke weight | | … | SVGAttributes | — | Any standard SVG attr |

type IconWeight = "thin" | "light" | "regular" | "bold" | "fill" | "duotone";

Imports

For optimal tree-shaking, import individual icons by their kebab-case name:

import { ArrowRightIcon } from "@transitionsag/phosphor-solid/arrow-right";
import { GithubLogoIcon } from "@transitionsag/phosphor-solid/github-logo";

Or import multiple icons from the package root (also tree-shakeable):

import { ArrowRightIcon, GithubLogoIcon, HouseIcon } from "@transitionsag/phosphor-solid";

Or import the entire set from the /icons entrypoint:

import * as Icons from "@transitionsag/phosphor-solid/icons";

<Icons.ArrowRightIcon />;

License

MIT — icons from Phosphor Icons.