eastern-area-fe-package

A shared React icon utility library for eastern-area-fe and eastern-area-crm-fe.

eastern-area-fe-package provides:

• DynamicIcon: runtime icon resolution for both custom SVG icons and Tabler icons.
• STATIC_ICONS_LIST / STATIC_ICONS_MAP: Arabic-labeled custom icons.
• TABLER_ICONS_LIST / TABLER_ICONS_MAP: the full @tabler/icons-react catalog.
• ALL_ICONS_LIST: a combined list of every supported icon.
• A dedicated static entrypoint for custom icons only.

Install

npm install eastern-area-fe-package
# or
bun add eastern-area-fe-package

Peer dependencies:

• react >= 18
• react-dom >= 18

Usage

import { DynamicIcon, ALL_ICONS_LIST, STATIC_ICONS_LIST } from 'eastern-area-fe-package';

<DynamicIcon iconName="Hospital" size={24} color="#067647" />;
<DynamicIcon iconName="Settings" size={24} width={28} className="my-icon" />;

Static-only import

The root package entrypoint includes the full Tabler icon set, which means DynamicIcon can resolve both custom and Tabler icon names. If you only need the custom icons and want a smaller bundle, import the static-only entrypoint:

import { STATIC_ICONS_LIST, STATIC_ICONS_MAP } from 'eastern-area-fe-package/static';

Public exports

| Export | Type | Description | | ------------------- | ---------------- | ------------------------------------------------------------ | | DynamicIcon | React component | Renders the requested icon from custom or Tabler collections | | STATIC_ICONS_LIST | IconListItem[] | Custom SVG icons with Arabic labels | | STATIC_ICONS_MAP | IconsMap | Lookup map for custom icons by name | | TABLER_ICONS_LIST | IconListItem[] | All Tabler icons as a list | | TABLER_ICONS_MAP | IconsMap | Lookup map for all Tabler icons by name | | ALL_ICONS_LIST | IconListItem[] | Combined static + Tabler icon list |

API

DynamicIcon

DynamicIcon props:

| Prop | Type | Default | Description | | ----------- | ------------------------- | ----------- | ----------------------------------------------------------- | | iconName? | string | undefined | Icon name to render. Supports custom and Tabler icon names. | | size? | number \| string | undefined | Sets both width and height unless width is provided. | | width? | number \| string | undefined | Sets the SVG width separately if needed. | | color? | string | undefined | Sets the icon color when supported by the SVG. | | ...rest | SVGProps<SVGSVGElement> | — | Forwarded to the rendered SVG component. |

If iconName is missing or not found, the component falls back to the first icon in ALL_ICONS_LIST.

STATIC_ICONS_LIST / STATIC_ICONS_MAP

Custom icons are exported with Arabic labels. Each entry has the shape:

interface IconListItem {
  name: string;
  icon: ComponentType<SVGProps<SVGSVGElement>>;
  labelAr: string;
}

Use STATIC_ICONS_LIST for icon pickers or menus, and STATIC_ICONS_MAP for quick lookup by name.

TABLER_ICONS_LIST / TABLER_ICONS_MAP

These exports expose the complete Tabler icon catalog from @tabler/icons-react. TABLER_ICONS_MAP lets you look up icons by their Tabler name.

ALL_ICONS_LIST

A merged list of custom static icons and all Tabler icons. Useful for searching, filtering, or fallback behavior.

Types

| Type | Description | | ------------------ | ------------------------------------- | | IconListItem | A named SVG icon with an Arabic label | | IconsMap | Map from icon name to IconListItem | | DynamicIconProps | Props accepted by DynamicIcon | | StaticIconName | Union of all custom icon names | | TablerIconName | Union of all Tabler icon names | | IconName | Union of all supported icon names |

Development

bun install
bun run build
bun run dev

• bun run build runs tsc -b && vite build.
• bun run dev rebuilds on file changes in watch mode.

Package entrypoints

• Root: eastern-area-fe-package
• Static-only: eastern-area-fe-package/static

Notes

• The package ships both ESM and CommonJS builds under dist/.
• If you prefer clean source control, do not commit dist/ and keep it in .gitignore.