@mt-gloss/icons

A scalable SVG icon library for the Gloss UI design system. Icons are compiled into a single sprite for optimal performance and can be styled via CSS using currentColor.

Installation

npm install @mt-gloss/icons

Peer Dependencies

• react ^18 || ^19
• react-dom ^18 || ^19

Usage

Basic Setup

Wrap your application with the SpriteProvider to inject the icon sprite into the DOM:

import { SpriteProvider } from '@mt-gloss/icons';

function App() {
  return (
    <SpriteProvider>
      <YourApp />
    </SpriteProvider>
  );
}

Using Icons

import { Icon } from '@mt-gloss/icons';

function MyComponent() {
  return (
    <div>
      <Icon name="check" size="md" />
      <Icon name="chevron-down" size="lg" className="text-blue-500" />
      <Icon name="close" size="sm" />
    </div>
  );
}

Available Icons

The library includes 27 icons extracted from the Gloss UI design system:

• alert-circle - Alert/warning indicator
• book - Documentation/reading
• check - Checkmark/success
• check-square - Checkbox checked
• chevron-down - Dropdown indicator
• chevron-left - Navigation arrow
• close - Close/dismiss
• credit-card - Payment
• droplet - Color/theme
• grid - Spacing/layout
• hash - Tag/categorization
• home - Home/dashboard
• info - Information
• input - Input field
• layers - Layers/organization
• layout - Layout/structure
• lightbulb - Ideas/tips
• link - Hyperlink
• lock - Security/password
• log-in - Authentication
• menu - Navigation menu
• more-vertical - More options
• refresh - Reload/refresh
• square - Button/control
• star - Favorite/rating
• tag - Label/tag
• type - Typography

Icon Sizes

Available sizes with corresponding pixel dimensions:

• sm - 16px
• md - 20px (default)
• lg - 24px
• xl - 32px

Styling

Icons inherit the current text color by default due to currentColor usage in fill/stroke:

<div className="text-blue-600">
  <Icon name="check" /> {/* Will be blue */}
</div>

<Icon name="close" style={{ color: '#ef4444' }} /> {/* Inline style */}

Advanced Usage

Manual Sprite Injection

For SSR or custom rendering scenarios, you can manually inject the sprite:

import { spriteContent } from '@mt-gloss/icons';

// Insert sprite into the DOM
const div = document.createElement('div');
div.innerHTML = spriteContent;
div.style.display = 'none';
document.body.insertBefore(div, document.body.firstChild);

Custom Icon Component

You can extend the Icon component for custom behaviors:

import { Icon, IconProps } from '@mt-gloss/icons';

interface CustomIconProps extends IconProps {
  rotate?: number;
}

export function CustomIcon({ rotate = 0, style, ...props }: CustomIconProps) {
  return (
    <Icon
      {...props}
      style={{
        ...style,
        transform: `rotate(${rotate}deg)`,
        transition: 'transform 0.2s',
      }}
    />
  );
}

Development

Adding New Icons

1. Add SVG file to src/assets/ (e.g., new-icon.svg)
2. Ensure currentColor is used for fills/strokes
3. Run the build script:

npm run build:sprite

Building the Library

nx build gloss-icons

License

MIT