# @transitionsag/phosphor-solid

SolidJS components for the [Phosphor Icons](https://phosphoricons.com) 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](https://github.com/phosphor-icons/core).

## Installation

```sh
pnpm add @transitionsag/phosphor-solid
```

## Usage

```tsx
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 |

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

## Imports

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

```ts
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):

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

Or import the entire set from the `/icons` entrypoint:

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

<Icons.ArrowRightIcon />;
```

## License

MIT — icons from [Phosphor Icons](https://phosphoricons.com).
