@tdm-ui-kit/icons

Icon components for Sigma UI Kit with tree-shaking support.

Installation

pnpm add @tdm-ui-kit/icons

Usage

Import individual icons (Recommended)

import XMarkIcon from '@tdm-ui-kit/icons/XMarkIcon';
import CheckIcon from '@tdm-ui-kit/icons/CheckIcon';

function MyComponent() {
  return (
    <div>
      <XMarkIcon size={20} color="red" />
      <CheckIcon size={24} />
    </div>
  );
}

Import from main package

import { XMarkIcon, CheckIcon } from '@tdm-ui-kit/icons';

function MyComponent() {
  return (
    <div>
      <XMarkIcon size={20} color="red" />
      <CheckIcon size={24} />
    </div>
  );
}

Available Icons

• XMarkIcon - Close/X mark icon
• CheckIcon - Check mark icon
• ChevronDownIcon - Down chevron icon
• PlusIcon - Plus icon

Icon Props

All icons accept the following props:

interface IconProps {
  /**
   * The size of the icon
   * @default 24
   */
  size?: number;
  /**
   * The color of the icon
   * @default currentColor
   */
  color?: string;
  /**
   * Additional CSS class name
   */
  className?: string;
  /**
   * Additional inline styles
   */
  style?: React.CSSProperties;
  /**
   * Accessibility label for the icon
   */
  'aria-label'?: string;
  /**
   * Whether the icon is decorative (hidden from screen readers)
   * @default false
   */
  decorative?: boolean;
}

Development

Creating a new icon

# From project root
pnpm create:icon MyNewIcon

# This will:
# 1. Create src/icons/MyNewIcon.tsx
# 2. Create src/MyNewIcon/index.ts
# 3. Update src/index.ts
# 4. Update package.json exports

# Then update TypeScript paths
pnpm update:icon-paths

Manual icon creation

1. Create src/icons/IconName.tsx with your icon component
2. Create src/IconName/index.ts that exports from the icons folder
3. Add export to src/index.ts
4. Add export to package.json exports field
5. Run pnpm update:icon-paths to update TypeScript paths

Tree Shaking

This package is optimized for tree shaking. When you import individual icons:

import XMarkIcon from '@tdm-ui-kit/icons/XMarkIcon';

Only the XMarkIcon component and its dependencies will be included in your bundle.

TypeScript Support

Full TypeScript support is included with proper type definitions for all icons and props.