@tcn/icons

@tcn/icons

A comprehensive icon library featuring 700+ SVG icons designed for modern web applications, with built-in accessibility features and responsive sizing.

Overview

@tcn/icons provides a vast collection of high-quality SVG icons that can be easily integrated into any React application. Each icon is designed with accessibility in mind and includes features like responsive sizing, RTL language support, and consistent styling.

What's Included

Icon Collection

• 700+ Icons: Extensive collection covering common UI patterns and use cases
• Categorized Icons: User interfaces, navigation, actions, media, business, and more
• Consistent Design: All icons follow the same design language and styling principles
• SVG Format: Scalable vector graphics for crisp rendering at any size

Icon Categories

• User & Profile: User icons, user management, authentication
• Navigation: Arrows, navigation elements, breadcrumbs
• Actions: Buttons, controls, interactive elements
• Media: Video, audio, image, file management
• Business: Finance, commerce, analytics, charts
• Technology: Devices, connectivity, development tools
• Communication: Messaging, notifications, social features

Features

• Responsive Sizing: Five size variants (xs, sm, md, lg, xl) with CSS custom properties
• RTL Support: Automatic icon flipping for right-to-left languages
• Accessibility: Proper ARIA attributes and semantic markup
• Customizable: Extends standard SVG props for flexibility
• TypeScript: Full type safety with excellent IntelliSense

Key Features

• Scalable Design: Icons automatically scale with your design system's scalar variable
• Consistent API: All icons follow the same component interface
• Performance Optimized: Lightweight SVG components with minimal bundle impact
• Theme Integration: Works seamlessly with Blackcat UI design tokens
• Modern Standards: Built with React 18+ and modern web standards

Usage

Basic Icon Usage

import { UserIcon, SettingsIcon, HomeIcon } from '@tcn/icons';

function MyComponent() {
  return (
    <div>
      <UserIcon size="md" />
      <SettingsIcon size="lg" />
      <HomeIcon size="sm" />
    </div>
  );
}

Responsive Sizing

import { SearchIcon } from '@tcn/icons';

// Icons automatically scale with your design system
<SearchIcon size="xl" />  // 24px * scalar
<SearchIcon size="lg" />  // 20px * scalar
<SearchIcon size="md" />  // 18px * scalar
<SearchIcon size="sm" />  // 16px * scalar
<SearchIcon size="xs" />  // 14px * scalar

RTL Language Support

import { ArrowRightIcon } from '@tcn/icons';

// Icon automatically flips in RTL languages
<ArrowRightIcon flipOnRtl={true} />

Custom Styling

import { HeartIcon } from '@tcn/icons';

<HeartIcon 
  size="lg" 
  className="custom-icon-class"
  style={{ color: 'red' }}
  onClick={() => console.log('Icon clicked')}
/>

Icon Naming Convention

Icons follow a consistent naming pattern:

• Base Icons: user_icon.tsx, home_icon.tsx
• Variants: user_filled_icon.tsx, user_circle_icon.tsx
• States: user_check_icon.tsx, user_cross_icon.tsx
• Actions: user_plus_icon.tsx, user_minus_icon.tsx

Design System Integration

Icons are designed to work seamlessly with the Blackcat UI system:

• Scalar Support: Automatically scale with your design system's density settings
• Color Integration: Use currentColor for easy theming
• Spacing Consistency: Sizes align with your spacing scale
• Typography Harmony: Icon sizes complement your text hierarchy

When to Use

Choose @tcn/icons when you need:

• A comprehensive icon library for your application
• Consistent icon design across your UI
• Accessible and responsive icon components
• Icons that integrate with your design system
• Professional-quality SVG icons with modern features

Performance

• Tree Shaking: Import only the icons you need
• Minimal Bundle Impact: Each icon is a lightweight React component
• Efficient Rendering: SVG components with optimized markup
• Lazy Loading: Icons can be loaded on-demand if needed

Accessibility

All icons include:

• Semantic Markup: Proper SVG structure and attributes
• ARIA Support: Ready for accessibility enhancements
• Keyboard Navigation: Compatible with keyboard and screen readers
• High Contrast: Designed for various visual accessibility needs

License

Apache-2.0