Chill-Wind Icons

Dynamic Angular icon library with native Tailwind CSS support, tree-shakeable icon data, and built from Iconoir SVGs.

Features

• 🎯 Native Tailwind CSS Support - Use standard Tailwind utilities for sizing, colors, and animations
• 🌲 Tree-shakeable - Only import the icons you use
• 🚀 Performance optimized - Built-in SVG sanitization caching
• 📱 Fully responsive - Works with all Tailwind breakpoints
• 🎨 Dark mode ready - Seamless integration with Tailwind's dark mode
• ♿ Accessible - Proper ARIA attributes and keyboard navigation
• 🔒 Type-safe - Full TypeScript support with literal types for all icon names

Installation

npm install @chill-wind/icons

Quick Start

// Single icon import
import { CwIcon, checkRegularIconData } from '@chill-wind/icons';

// Multiple icons import
import { CwIcon, checkRegularIconData, userRegularIconData } from '@chill-wind/icons';

@Component({
  template: `
    <!-- Basic usage with Tailwind classes -->
    <cw-icon [icon]="checkIcon" class="w-6 h-6 text-green-500"></cw-icon>

    <!-- Multiple icons usage -->
    <cw-icon [icon]="checkIcon" class="w-5 h-5 text-green-600"></cw-icon>
    <cw-icon [icon]="userIcon" class="w-5 h-5 text-blue-600"></cw-icon>

    <!-- Responsive sizing -->
    <cw-icon [icon]="checkIcon" class="w-4 h-4 md:w-6 md:h-6 lg:w-8 lg:h-8"></cw-icon>

    <!-- Dark mode support -->
    <cw-icon [icon]="checkIcon" class="text-gray-700 dark:text-gray-300"></cw-icon>

    <!-- Hover effects -->
    <cw-icon [icon]="checkIcon" class="hover:text-blue-600 hover:scale-110 transition-all"></cw-icon>

    <!-- Animations -->
    <cw-icon [icon]="checkIcon" class="animate-pulse"></cw-icon>
  `
})
export class MyComponent {
  checkIcon = checkRegularIconData;
  userIcon = userRegularIconData;
}

Tailwind CSS Usage

The component is designed to work seamlessly with Tailwind CSS utilities:

Sizing

<!-- Tailwind size utilities -->
<cw-icon [icon]="icon" class="w-4 h-4"></cw-icon>     <!-- 16px -->
<cw-icon [icon]="icon" class="w-6 h-6"></cw-icon>     <!-- 24px -->
<cw-icon [icon]="icon" class="size-8"></cw-icon>      <!-- 32px (Tailwind 3.4+) -->

<!-- Arbitrary values -->
<cw-icon [icon]="icon" class="w-[18px] h-[18px]"></cw-icon>

Colors

<!-- Tailwind color utilities -->
<cw-icon [icon]="icon" class="text-blue-500"></cw-icon>
<cw-icon [icon]="icon" class="text-slate-700"></cw-icon>

<!-- Arbitrary colors using Tailwind CSS syntax -->
<!-- The component automatically detects and applies text-[#colorValue] as inline styles -->
<cw-icon [icon]="icon" class="text-[#1da1f2]"></cw-icon>
<cw-icon [icon]="icon" class="text-[#ff6b6b]"></cw-icon>
<cw-icon [icon]="icon" class="text-[#f505ed]"></cw-icon>

Animations

<!-- Built-in Tailwind animations -->
<cw-icon [icon]="icon" class="animate-spin"></cw-icon>
<cw-icon [icon]="icon" class="animate-pulse"></cw-icon>
<cw-icon [icon]="icon" class="animate-bounce"></cw-icon>

Responsive Design

<!-- Different sizes at different breakpoints -->
<cw-icon [icon]="icon" class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 lg:w-8 lg:h-8"></cw-icon>

<!-- Different colors for light/dark mode -->
<cw-icon [icon]="icon" class="text-gray-700 dark:text-gray-300"></cw-icon>

Hover & Focus States

<!-- Hover effects -->
<cw-icon [icon]="icon" class="hover:text-blue-600 transition-colors"></cw-icon>
<cw-icon [icon]="icon" class="hover:scale-110 transition-transform"></cw-icon>

<!-- Focus styles -->
<cw-icon [icon]="icon" class="focus:outline-none focus:ring-2 focus:ring-blue-500"></cw-icon>

Component API

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | icon | IconData | undefined | The icon data object to render | | size | number | string | 24 | Size in pixels (overridden by Tailwind classes) | | alt | string | null | null | Accessibility label | | strokeWeight | string | icon default | SVG stroke width | | svgClass | string | '' | Additional classes for the SVG element | | showFallback | boolean | true | Show fallback icon when data is missing |

TypeScript Support

The library includes full TypeScript support with literal types for all icon names:

import { IconName, RegularIconName, SolidIconName } from '@chill-wind/icons';

// Full type safety and autocomplete
const iconName: RegularIconName = 'check'; // ✅ Valid
const invalidName: RegularIconName = 'invalid'; // ❌ TypeScript error

Available Icons

Total icons: 1671

• Regular: 1383 icons
• Solid: 288 icons

License

MIT