# Solid Icon Library

> Browse 24 solid icons, choose a color, copy SVG or React usage, and download individual SVGs.

- Name: `solid-icon-library`
- Status: beta
- Categories: icons, assets, downloads
- Files: the install writes `solid-icon-library.tsx`, and any part files named `solid-icon-library-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@txbrendan/panel-switch`, `@txbrendan/accordion`, `@txbrendan/toast`, `@txbrendan/solid-icon`, `@txbrendan/button`, `@txbrendan/search-field`, `@txbrendan/icon-color-picker`. The install adds them.
- Gallery: https://txbrendan.dev/blocks/solid-icon-library
- Registry item: https://txbrendan.dev/r/solid-icon-library.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@txbrendan": "https://txbrendan.dev/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@txbrendan` in a public list that txbrendan/ui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @txbrendan/theme
   ```

3. Add the block. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @txbrendan/solid-icon-library
   ```

## Use it for

- Place one Toaster in your app layout to show brief copy confirmations.
- A searchable browser for the original solid icon collection.
- Search by name or category. Selecting an icon shows its sizes, SVG download, and individual React import.
- Choose an icon color with the picker or a 3- or 6-digit hex value. The color applies to previews, downloads, and copied SVG or React code, and stays selected while browsing. Use text color restores inheritance.
- Downloads are generated locally from the same paths as the React icons. No hosted assets or API keys are required.

## Avoid it for

- A single icon in a control: install Solid Icon instead.
- A general asset manager. This browser contains only the bundled solid icons.

## Props

- `className`: `string`. Extra classes on the container; later classes win.

## Accessibility

- The picker and hex field are labeled. Invalid hex keeps the last valid color and shows an associated message. Custom artwork colors are not contrast-checked; labels and controls keep their theme colors.
- Search and selection buttons are named. Selection is exposed through aria-pressed.
- Copy success uses a toast. Counts and clipboard failures are announced in a status line.
- Clipboard access requires a secure context and permission. Download and selectable React code remain available when copying fails.

## Examples

### Browse the collection

```tsx
<SolidIconLibrary />
```