npm package: @streamoid/icons
Description: A collection of SVG icons for Streamoid applications, built as React components.
Latest version: 0.3.1

# @streamoid/icons

A collection of SVG icons for Streamoid applications, built as React components.

## Installation

```bash
npm install @streamoid/icons
```

## Usage

```tsx
import { SiconHome, SiconCredits } from "@streamoid/icons";

function App() {
  return <SiconCredits size={16} color="var(--alias-text---icons-primary)" />;
}
```

## Props

All icons accept the same props:

| Prop          | Type               | Default          | Description                          |
|---------------|--------------------|------------------|--------------------------------------|
| `size`        | `number \| string` | `24` (16 for credits) | Width and height of the icon    |
| `color`       | `string`           | `"currentColor"` | Stroke or fill color                 |
| `strokeWidth` | `number \| string` | `1.25`           | Stroke width (stroke-based icons)    |
| `className`   | `string`           | —                | Additional CSS class                 |
| `...props`    | `SVGProps`         | —                | Any valid SVG element attribute      |

## Icon Reference

### General Icons

| Export              | File                    | Description                        |
|---------------------|-------------------------|------------------------------------|
| `SiconArtifacts`    | sicon-artifacts         | Artifacts / documents              |
| `SiconAttach`       | sicon-attach            | Attachment / paperclip             |
| `SiconBilling`      | sicon-billing           | Billing / credit card              |
| `SiconBolt`         | sicon-bolt              | Lightning bolt / actions           |
| `SiconBrain`        | sicon-brain             | AI / intelligence                  |
| `SiconCart`         | sicon-Cart              | Shopping cart                      |
| `SiconCatalog`      | sicon-catalog           | Product catalog                    |
| `SiconCatalogix`    | sicon-catalogix         | Catalogix feature                  |
| `SiconClose`        | sicon-close             | Close / dismiss (X)                |
| `SiconCoins`        | sicon-Coins             | Stacked coins (stroke, 24px)       |
| `SiconCollapse`     | sicon-collapse          | Collapse / chevron                 |
| `SiconCredits`      | sicon-credits           | Credits / sparkle-coin (stroke, 16px) — **added v0.1.3** |
| `SiconCrown`        | sicon-Crown             | Crown / premium                    |
| `SiconDark`         | sicon-dark              | Dark mode                          |
| `SiconDelete`       | sicon-delete            | Delete / trash                     |
| `SiconDot`          | sicon-dot               | Dot / indicator                    |
| `SiconDoubleArrow`  | sicon-double-Arrow      | Double arrow (horizontal)          |
| `SiconDoubleArrowDown` | sicon-double-ArrowDown | Double arrow down                |
| `SiconDoubleArrowUp`   | sicon-double-ArrowUp   | Double arrow up                  |
| `SiconDownload`     | sicon-download          | Download                           |
| `SiconFolder`       | sicon-Folder            | Folder                             |
| `SiconHome`         | sicon-Home              | Home                               |
| `SiconImage`        | sicon-image             | Image / photo                      |
| `SiconInsights`     | sicon-insights          | Insights / analytics               |
| `SiconLeft`         | sicon-left              | Arrow left                         |
| `SiconLight`        | sicon-Light             | Light mode                         |
| `SiconLock`         | sicon-lock              | Lock / security                    |
| `SiconLogout`       | sicon-logout            | Logout                             |
| `SiconMeasure`      | sicon-measure           | Measurement / ruler                |
| `SiconMinus`        | sicon-minus             | Minus / subtract — **added v0.1.3** |
| `SiconMore`         | sicon-more              | More options (ellipsis)            |
| `SiconPhotogenix`   | sicon-photogenix        | Photogenix feature                 |
| `SiconPlus`         | sicon-plus              | Plus / add                         |
| `SiconPulse`        | sicon-pulse             | Pulse / activity                   |
| `SiconReferral`     | sicon-referral          | Referral / link                    |
| `SiconRight`        | sicon-right             | Arrow right                        |
| `SiconScout`        | sicon-scout             | Scout feature                      |
| `SiconSearch`       | sicon-Search            | Search / magnifier                 |
| `SiconSend`         | sicon-send              | Send / submit                      |
| `SiconSettings`     | sicon-settings          | Settings / gear                    |
| `SiconSupport`      | sicon-support           | Support / help                     |
| `SiconSwitch`       | sicon-switch            | Switch / swap                      |
| `SiconSystem`       | sicon-system            | System / monitor                   |
| `SiconTeam`         | sicon-team              | Team / people                      |
| `SiconUpload`       | sicon-upload            | Upload                             |
| `SiconUser`         | sicon-User              | Single user / profile              |
| `SiconUserAdd`      | sicon-userAdd           | Add user                           |
| `SiconWorkspace`    | sicon-workspace         | Workspace                          |

## Adding a New Icon

1. Create `src/sicon-<name>.tsx` following the pattern:

```tsx
import type { SVGProps } from 'react';

export type IconProps = Omit<SVGProps<SVGSVGElement>, 'color' | 'strokeWidth' | 'width' | 'height'> & {
  color?: string;
  strokeWidth?: number | string;
  size?: number | string;
};

const SiconName = ({ color = 'currentColor', strokeWidth = 1.25, size = 24, ...props }: IconProps) => {
  return (
    <svg {...props} width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* paste SVG path here */}
    </svg>
  );
};

export default SiconName;
```

2. Export from `src/index.ts`:
```ts
export { default as SiconName } from './sicon-name';
```

3. Add a row to the Icon Reference table in this README.

4. Build: `npm run build` in `packages/icons`

## Changelog

### v0.1.3
- Added `SiconCredits` — credits/sparkle-coin icon (16×16 viewBox, stroke-based). Used in workspace credits badge.

### v0.1.2
- Initial public release with 46 icons.

## License

ISC