@ittyniui/icons

A collection of reusable SVG icon components for React, designed for easy integration and customization in your UI projects.

Key Features

• React Components: All icons are exported as React components for seamless use in your application.
• Customizable: Icons accept size, color, and className props for flexible styling.
• Tree-shakable: Named exports allow you to import only the icons you need, reducing bundle size.
• TypeScript Support: All icons are fully typed for a better developer experience.
• Centralized Exports: Import any icon from a single entry point (index.ts).
• Optimized SVGs: Icons are optimized for performance and clarity.
• Storybook Integration: Preview and test icons interactively (if Storybook is set up).

Installation

npm install @ittyniui/icons

Usage

import { SearchIcon, UserIcon } from '@ittyniui/icons';

function Example() {
  return (
    <div>
      <SearchIcon size={32} color="#27954f" />
      <UserIcon size={24} color="gray" className="my-icon" />
    </div>
  );
}

Example Icon Component

import React from 'react';

interface IconProps {
  size?: number | string;
  color?: string;
  className?: string;
}

export const SearchIcon: React.FC<IconProps> = ({
  size = 24,
  color = 'currentColor',
  className,
  ...props
}) => (
  <svg
    width={size}
    height={size}
    fill={color}
    className={className}
    viewBox="0 0 24 24"
    {...props}
  >
    {/* SVG path here */}
  </svg>
);

Exporting Icons

All icons are exported from the main entry point:

export * from './SearchIcon';
export * from './UserIcon';
// ...other icons

Existing Key Features

• Consistent naming and structure for all icon components.
• Easy to extend with new icons.
• Supports all modern React and TypeScript projects.

Possible Next Features

• Theming Support: Integrate with your theme system for automatic color adaptation.
• Accessibility Improvements: Add aria-label and role props for better accessibility.
• Icon Packs: Group icons by category (e.g., navigation, media, social).
• CLI Tooling: Add scripts to automate SVG import and component generation.
• More Customization: Support for stroke width, animation, or other SVG attributes.
• Documentation Site: Publish a live icon gallery for browsing and copy-paste usage.

Contributing

Feel free to submit new icons or improvements! Please follow the existing file and naming conventions.