tlx-icons

TalentListX SVG icon library as React components

A professionally crafted icon library that automatically converts SVG files into typed React components with full TypeScript support.

Features

✨ Automatic Generation - SVG files are automatically transformed into React components
🎨 Customizable - Icons support size and color props via CSS currentColor
📦 Tree-shakeable - Only import the icons you need
🔷 TypeScript - Full type definitions included
⚡ Optimized - Built with Vite for optimal bundle size

Installation

npm install tlx-icons
# or
yarn add tlx-icons
# or
pnpm add tlx-icons

Usage

Basic Usage

import { Calendar, Bell, Briefcase, TlxIcon } from 'tlx-icons';

function App() {
  return (
    <div>
      {/* Application logo */}
      <TlxIcon size={48} />
      
      {/* Default size (24px) */}
      <Calendar />
      
      {/* Custom size */}
      <Bell size={32} />
      
      {/* Custom color via className */}
      <Briefcase className="text-blue-500" />
    </div>
  );
}

Customization Examples

1. Size Customization

Icons accept a size prop (number or string):

<Bell size={16} />        {/* 16px */}
<Bell size={24} />        {/* 24px (default) */}
<Bell size={32} />        {/* 32px */}
<Bell size="3rem" />      {/* 3rem */}

2. Color Customization

Icons use currentColor by default, so they inherit the text color:

{/* Via inline style */}
<Calendar style={{ color: '#3b82f6' }} />

{/* Via CSS class */}
<Calendar className="text-blue-500" />

{/* Via Tailwind */}
<Calendar className="text-red-500 hover:text-red-700" />

Note: The TlxIcon (application logo) preserves its original colors (orange and blue) and does not use currentColor. This ensures the brand identity remains consistent across your application.

{/* Logo always displays with brand colors */}
<TlxIcon size={48} />

3. Tailwind CSS Integration

All icons work seamlessly with Tailwind classes:

{/* Responsive sizing */}
<Search className="w-4 h-4 sm:w-6 sm:h-6 md:w-8 md:h-8" />

{/* Hover effects */}
<Settings className="text-gray-600 hover:text-gray-900 transition-colors" />

{/* Transforms */}
<Collapse className="rotate-180 transition-transform" />

{/* Opacity */}
<Avatar className="opacity-50 hover:opacity-100" />

4. Event Handlers

All standard SVG props are supported:

<Bell 
  size={24}
  onClick={() => console.log('Notification clicked')}
  onMouseEnter={() => console.log('Hovered')}
  className="cursor-pointer"
/>

5. Accessibility

<Calendar 
  aria-label="Select date"
  role="img"
  className="text-blue-500"
/>

Available Icons

All icons are exported as PascalCase components:

• application-folder.svg → ApplicationFolder
• avatar-group.svg → AvatarGroup
• avatar.svg → Avatar
• back-arrow.svg → BackArrow
• bell.svg → Bell
• briefcase.svg → Briefcase
• burger.svg → Burger
• calendar.svg → Calendar
• chart-bar.svg → ChartBar
• check-circle.svg → CheckCircle
• collapse.svg → Collapse
• globe-advice.svg → GlobeAdvice
• info.svg → Info
• overview.svg → Overview
• plan-box.svg → PlanBox
• preferences.svg → Preferences
• search.svg → Search
• security-lock.svg → SecurityLock
• settings.svg → Settings
• stars.svg → Stars
• suitcase-handle.svg → SuitcaseHandle
• tlx-icon.svg → TlxIcon ⭐ (Logo de l'application)

Props

Each icon component accepts the following props:

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string;  // Default: 24
  className?: string;      // CSS classes (including Tailwind)
  style?: React.CSSProperties;
  onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
  // ... all other SVG element props
}

Key Features:

• ✅ Size prop - Control width and height with a single prop
• ✅ currentColor - Icons inherit text color automatically
• ✅ Full SVG props - className, style, onClick, aria-*, etc.
• ✅ Tailwind compatible - Works with all Tailwind utilities
• ✅ TypeScript - Full type safety and autocomplete

Development

Project Structure

tlx-icons/
├── icons/              # Source SVG files
├── src/
│   ├── components/     # Generated React components (auto-generated)
│   └── index.ts        # Barrel exports (auto-generated)
├── scripts/
│   └── generate.js     # SVG to React transformation script
└── dist/               # Built library (npm package)

Adding New Icons

1. Add your .svg file to the icons/ directory
2. Run the generation script:

   npm run generate

3. Build the library:

   npm run build

Scripts

• npm run clean - Remove build artifacts and generated components
• npm run generate - Transform SVG files into React components
• npm run build - Build the library for production

Publishing

# Build and publish to npm
npm run build
npm publish

License

MIT © TalentListX