@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

deno add jsr:@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";

Development

deno task generate
deno task check

License

MIT — icons from Phosphor Icons.