@sbdesign/icons

SVG icon components for SB Design System.

Installation

npm install @sbdesign/icons

Usage

import { Plus, User, Moon, Sun } from '@sbdesign/icons';

function App() {
  return (
    <div>
      <Plus width={24} height={24} />
      <User width={20} height={20} style={{ color: 'red' }} />
    </div>
  );
}

Available Icons

• Plus
• User
• Image
• Check
• X (Close)
• ChevronLeft
• ChevronRight
• Moon
• Sun

Props

All icons accept standard SVG props:

type IconProps = React.SVGProps<SVGSVGElement>;

Common props:

• width - Icon width (default: 24)
• height - Icon height (default: 24)
• color - Icon color (uses currentColor by default)
• className - CSS class
• style - Inline styles

Adding New Icons

Create a new .tsx file:

import * as React from 'react';

export function MyIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
      <path d="..." stroke="currentColor" />
    </svg>
  );
}

Export in index.ts:

export * from './MyIcon';

License

MIT