@streamoid/icons

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

Installation

npm install @streamoid/icons

Usage

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:

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:

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