@arpudhabotupload/fn-icon

A React icon component library with dynamic SVG loading and Tailwind CSS support.

Features

• 🎨 Multiple icon variants (Colour, Duotone, Fill, Line)
• 📏 Flexible sizing with predefined size names
• 🎯 Dynamic SVG loading from assets
• 🌈 Customizable colors and stroke widths
• ♿ Accessibility-ready
• 📦 TypeScript support
• 🔥 Zero dependencies (except React peer dependency)

Installation

npm install @arpudhabotupload/fn-icon

or

yarn add @arpudhabotupload/fn-icon

or

pnpm add @arpudhabotupload/fn-icon

🎨 Icon Setup

Important: This package does NOT include icon files. You need to provide your own SVG icons.

Place your icon files in the public/assets/icons/ folder of your React app following this structure:

public/
  assets/
    icons/
      {Variant}/        # Line, Fill, Duotone, or Colour
        {Size}px/       # 10px, 16px, 20px, 24px, 32px, 48px
          {name}.svg    # For 10px and 16px
          {name}--{size}.svg  # For 20px, 24px, 32px, 48px

Example:

• public/assets/icons/Line/24px/home--24.svg
• public/assets/icons/Line/16px/home.svg
• public/assets/icons/Fill/32px/star--32.svg

Quick Setup Script

Run this command in your project to create the folder structure automatically:

npx setup-fn-icons

Or with a custom path:

npx setup-fn-icons public/my-custom-icons

See ICON_SETUP.md for detailed icon organization guide.

Usage

Basic Usage

import { FNIcon } from '@arpudhabotupload/fn-icon';

function App() {
  return (
    <div>
      <FNIcon name="home" />
    </div>
  );
}

With Tailwind CSS

import { FNIcon } from '@arpudhabotupload/fn-icon';

function App() {
  return (
    <div className="flex items-center gap-2">
      <FNIcon 
        name="home" 
        size="large" 
        className="text-blue-500" 
      />
      <FNIcon 
        name="settings" 
        variant="Fill" 
        size="medium"
        className="text-gray-600 hover:text-gray-900"
      />
    </div>
  );
}

Advanced Usage

import { FNIcon } from '@arpudhabotupload/fn-icon';

function App() {
  return (
    <div>
      {/* Custom color */}
      <FNIcon 
        name="star" 
        variant="Fill" 
        color="#FFD700" 
      />

      {/* Custom stroke width for line icons */}
      <FNIcon 
        name="heart" 
        variant="Line" 
        strokeWidth={2}
        size="x-large"
      />

      {/* Disabled state */}
      <FNIcon 
        name="trash" 
        disabled={true}
      />

      {/* Custom base path */}
      <FNIcon 
        name="user" 
        basePath="/custom/icons/path"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | required | Icon name without extension | | variant | 'Colour' \| 'Duotone' \| 'Fill' \| 'Line' | 'Line' | Icon variant style | | size | 'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'x-large' \| 'xxlarge' | 'medium' | Icon size name | | color | string | - | Custom color (CSS color value) | | strokeWidth | number | - | Stroke width for line icons | | disabled | boolean | false | Disabled state (reduces opacity and changes cursor) | | className | string | '' | Additional CSS classes (works with Tailwind) | | basePath | string | '/assets/icons' | Base path for icon assets |

Size Mapping

| Size Name | Pixel Size | |-----------|------------| | extrasmall | 10px | | small | 16px | | medium | 20px | | large | 24px | | x-large | 32px | | xxlarge | 48px |

Icon File Structure

The component expects SVG files to be organized in the following structure:

public/
  assets/
    icons/
      Line/
        16px/
          icon-name.svg
        20px/
          icon-name--20.svg
        24px/
          icon-name--24.svg
        32px/
          icon-name--32.svg
        48px/
          icon-name--48.svg
      Fill/
        ...
      Colour/
        ...
      Duotone/
        ...

Note: For sizes 10px and 16px, the filename doesn't include the size suffix. For other sizes (20, 24, 32, 48), the filename includes --{size} suffix.

TypeScript

The package includes full TypeScript definitions. Import types as needed:

import type { FNIconProps, TypeIconVariant, TypeIconSize, TypeIconSizeName } from '@arpudhabotupload/fn-icon';

How It Works

1. The component fetches the SVG file dynamically based on the name, variant, and size props
2. It parses the SVG and normalizes colors to use currentColor for easy styling
3. Removes inline styles that might interfere with custom styling
4. Configures SVG attributes for proper scaling and accessibility
5. Renders the processed SVG inline

Browser Support

This component works in all modern browsers that support:

• ES2020
• DOMParser API
• Fetch API

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.