@fichap/icons-react

React icon package generated from the shared svgs/ source in the monorepo.

Installation

pnpm add @fichap/icons-react

Compatible with React 17, 18, and 19.

Usage

import {
  ArrowLeftRegular,
  Icon,
  iconNamesByVariant,
  type IconSvgProps,
} from "@fichap/icons-react";

function ArrowLeftIcon(props: IconSvgProps) {
  return <ArrowLeftRegular {...props} />;
}

export function Demo() {
  return (
    <>
      <ArrowLeftIcon size={24} className='text-white' />
      <Icon name='arrowLeft' size={24} className='text-red-500' />
      <Icon name='arrowLeft' variant='bold' size={24} />
      <Icon
        name='warning'
        decorative={false}
        aria-label='Advertencia'
        size={20}
      />
      <p>Regular icons: {iconNamesByVariant.regular.length}</p>
    </>
  );
}

Recommended usage

• For app consumers, prefer the Icon wrapper plus name when you want a single stable import.
• variant is optional and defaults to regular.
• Icon applies accessibility defaults automatically:
  • Decorative icon (default): aria-hidden={true} + focusable={false}.
  • Meaningful icon (decorative={false} or when aria-label/aria-labelledby is present): role="img" + focusable={false}.
• For bold icons, keep the same canonical name and pass variant="bold".
• Do not append Bold to the name prop unless that exact canonical icon name exists in the catalog.
• Use direct icon imports when you explicitly want component-level imports, custom wrappers, or tighter control over what is imported.
• Both styles share the same IconSvgProps contract.

API

• Each generated icon component accepts IconSvgProps:
  • size?: number
  • width?: number | string
  • height?: number | string
  • className?: string
  • plus all standard SVG props
• Icon wrapper extras:
  • decorative?: boolean
  • name: IconName
  • variant?: 'regular' | 'bold'
• size applies to width and height.
• Si pasás width/height, tienen prioridad sobre size.
• Hardcoded black colors are normalized to currentColor during generation.
• Kebab-case SVG attributes are converted to React-compatible props.

Accessibility quick guide

Use these patterns with Icon:

import { Icon } from "@fichap/icons-react";

// Decorative icon (default): hidden from screen readers
<Icon name='arrowLeft' size={20} />;

// Meaningful icon: exposed with accessible name
<Icon name='dangerTriangle' decorative={false} aria-label='Error' size={20} />;

Notes:

• If you use decorative={false}, pass an accessible name with aria-label or aria-labelledby.
• If you pass decorative, that value takes precedence over auto behavior.
• Dev-only warnings are emitted for conflicting setups (for example, decorative={false} without accessible name).

Build

pnpm --filter @fichap/icons-react build

This command regenerates packages/react/src from the shared svgs/ source before compiling the package.