Armco Icon Component

Overview

This package provides a flexible, theme-aware React Icon component supporting SVG, base64, image URLs, and identifier-based icon loading. It includes dynamic styling, event handling, and registry-based caching for efficient icon management.

Source Files

• Icon.tsx: Main React component. Handles icon loading, parsing, registry caching, dynamic styling, and event handlers. Supports SVG, base64, raw image, and identifier/URL sources. Uses withTheme HOC for theme context.
• enums.ts: Enumerations for icon source types, valid image MIME types, tile types, and popover slots.
• helper.ts: Utility functions for:
  • Inferring icon type from source
  • Parsing SVG strings and base64
  • Creating React elements from SVG DOM
  • Applying dynamic styles (fill, stroke, size, classes)
  • Color helpers for theme/toggle/hover states
• types.ts: TypeScript interfaces for icon props, state, registry, attributes, events, and API responses.
• Icon.component.scss: SCSS styles for icon presentation and hover effects.
• vite-env.d.ts: Vite client types.

Key Features

• Dynamic Source Handling: Accepts icon as string, object, or IconSource; supports SVG, base64, image URLs, and identifier-based API fetch.
• Registry Caching: Prevents duplicate network requests for icons; caches both promises and loaded icons.
• Theme & State Styling: Applies fill/stroke/colors based on theme, hover, and toggle state; supports per-path coloring.
• Event Handling: Supports onClick, onMouseEnter, onMouseLeave via props.
• SVG to React Conversion: Converts SVG DOM to ReactNode for full React event support.

Usage

import Icon from "@armco/icon"
<Icon icon="md.MdEdit" attributes={{ colors: { fillColor: "#333" } }} />

Development

• Written in TypeScript, React class component.
• Utilities and types are modularized for clarity and reuse.
• SCSS for styling.