@westayltd/icons

Shared icon registry and React component for Westay CDN icons. Works with both web (Next.js) and mobile (React Native) consumers.

Installation

npm install @westayltd/icons

Setup

Call configureCdnIcons() once at app startup before rendering any CdnIcon:

Next.js

// app/layout.tsx (or _app.tsx)
import { configureCdnIcons } from "@westayltd/icons";

configureCdnIcons({ cdnBaseUrl: process.env.NEXT_PUBLIC_CDN_BASE_URL! });

React Native (Expo)

// App.tsx
import { configureCdnIcons } from "@westayltd/icons";

configureCdnIcons({ cdnBaseUrl: process.env.EXPO_PUBLIC_CDN_BASE_URL! });

Usage

Core (platform-agnostic)

Works in React Native, Node.js, or any TypeScript/JavaScript environment.

import {
  getCdnIconName,
  getCdnIconUrl,
  getCdnIconByAmenityName,
  getPropertyIconName,
  CDN_ICONS,
  type CdnIconName,
} from "@westayltd/icons";

// Resolve API icon name to CDN filename
const iconName = getCdnIconName("wifi"); // → "Wifi"

// Get full CDN URL for an icon (uses configured cdnBaseUrl)
const url = getCdnIconUrl("wifi");
// → "https://your-cdn-url/images/icons/Wifi.svg"

// Resolve amenity name via keyword matching
const icon = getCdnIconByAmenityName("Swimming Pool"); // → "Wave"

// Resolve property type slug/title
const propIcon = getPropertyIconName("villa", "Villa"); // → "Villa"

// Full icon list
console.log(CDN_ICONS); // ["AC - Air Conditioner", "Alarm", ...]

React (web only)

Uses CSS mask-image for single-color rendering. When fill or stroke props are used, fetches and inlines the SVG for per-attribute control. Do not use in React Native.

import { CdnIcon } from "@westayltd/icons/react";

// Default — mono, inherits parent text color via currentColor
<CdnIcon name="Wifi" />

// Custom size
<CdnIcon name="Wifi" size={24} />

// Single color (CSS mask — fast, no fetch)
<CdnIcon name="Wifi" size={24} color="#FF0000" />

// Separate fill and stroke (fetches and inlines SVG)
<CdnIcon name="Wifi" size={24} fill="red" stroke="blue" />

// Fill only
<CdnIcon name="Wifi" size={24} fill="#FF0000" />

// Stroke only
<CdnIcon name="Wifi" size={24} stroke="#3B82F6" />

// Stroke width
<CdnIcon name="Wifi" size={24} stroke="#3B82F6" strokeWidth={1} />

// Different width and height
<CdnIcon name="Wifi" width={32} height={24} />

// With layout utilities via className
<CdnIcon name="Wifi" size={24} className="ml-2" />

// Color variant — renders SVG as-is, preserving original colors (e.g. badges, illustrated icons)
<CdnIcon name="resorts-01 1" size={24} variant="color" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | — | Icon filename (e.g. "Wifi") | | size | number | 20 | Sets both width and height. Overridden by width/height | | width | number | — | Overrides size for width | | height | number | — | Overrides size for height | | color | string | "currentColor" | Single-color tint via CSS mask. Sets fill + stroke together. Ignored when variant="color" | | fill | string | — | Override fill color (triggers inline SVG). Replaces all fills including fill="none" — use this to fill outline/stroke-only icons. Ignored when variant="color" | | stroke | string | — | Override stroke color only (triggers inline SVG). Preserves stroke="none". Ignored when variant="color" | | strokeWidth | number | — | Override stroke-width in the SVG (triggers inline SVG). Ignored when variant="color" | | className | string | — | Extra CSS classes for layout/spacing (e.g. ml-2, absolute) | | variant | "mono" \| "color" | "mono" | "mono" tints the icon; "color" renders original SVG colors as <img> |

color vs fill/stroke: Use color for simple single-color icons (faster, no fetch). Use fill/stroke/strokeWidth when you need independent control — fill also overrides fill="none" so it works on outline icons too.

React Native

Requires react-native-svg. Uses SvgUri/SvgXml for rendering — do not use on web.

import { CdnIcon } from "@westayltd/icons/native";

// Default — mono, overrides fill/stroke with color
<CdnIcon name="Wifi" />

// Custom size
<CdnIcon name="Wifi" size={24} />

// Single color (replaces all fills and strokes)
<CdnIcon name="Wifi" size={24} color="#FF0000" />

// Separate fill and stroke
<CdnIcon name="Wifi" size={24} fill="red" stroke="blue" />

// Fill only
<CdnIcon name="Wifi" size={24} fill="#FF0000" />

// Stroke only
<CdnIcon name="Wifi" size={24} stroke="#3B82F6" />

// Stroke width
<CdnIcon name="Wifi" size={24} stroke="#3B82F6" strokeWidth={1} />

// Different width and height
<CdnIcon name="Wifi" width={32} height={24} />

// Color variant — renders SVG as-is, preserving original colors
<CdnIcon name="resorts-01 1" size={24} variant="color" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | — | Icon filename (e.g. "Wifi") | | size | number | 20 | Sets both width and height. Overridden by width/height | | width | number | — | Overrides size for width | | height | number | — | Overrides size for height | | color | string | — | Single-color tint. Sets fill + stroke together. Ignored when variant="color" | | fill | string | — | Override fill color. Replaces all fills including fill="none" — use this to fill outline/stroke-only icons. Ignored when variant="color" | | stroke | string | — | Override stroke color only. Preserves stroke="none". Ignored when variant="color" | | strokeWidth | number | — | Override stroke-width in the SVG. Ignored when variant="color" | | variant | "mono" \| "color" | "mono" | "mono" overrides fill/stroke; "color" renders original SVG colors |

CurrencyIcon (web + native)

Renders a currency flag icon using the API currency code directly. Internally maps the code to the correct CDN flag filename via CURRENCY_FLAG_MAP.

Web:

import { CurrencyIcon } from "@westayltd/icons/react";

<CurrencyIcon code="AED" size={24} />
<CurrencyIcon code="USD" size={20} />
<CurrencyIcon code="GBP" size={24} className="rounded-full" />

React Native:

import { CurrencyIcon } from "@westayltd/icons/native";

<CurrencyIcon code="AED" size={24} />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | code | string | — | ISO 4217 currency code from the API (e.g. "AED", "USD") | | size | number | 24 | Width and height in pixels | | width | number | — | Overrides size for width | | height | number | — | Overrides size for height | | className | string | — | Extra CSS classes (web only) |

Supported currencies

| Code | CDN flag file | Currency | |------|---------------|----------| | AED | AE.svg | UAE Dirham | | USD | United Syates Flag.svg | US Dollar (CDN filename has a typo) | | GBP | GB.svg | British Pound | | SAR | SA.svg | Saudi Riyal | | EUR | EU.svg | Euro | | FRF | FR.svg | French Franc | | JPY | JP.svg | Japanese Yen |

Pass the API currency code (e.g. "AED") — CurrencyIcon maps it to the correct CDN filename automatically via CURRENCY_FLAG_MAP.

You can also use getCurrencyFlagIcon from the core entry point to resolve the CDN filename without rendering:

import { getCurrencyFlagIcon } from "@westayltd/icons";

getCurrencyFlagIcon("AED"); // → "AED"
getCurrencyFlagIcon("USD"); // → "USD"

Entry Points

| Import | Contents | Platform | |--------|----------|----------| | @westayltd/icons | Icon registry, types, resolution functions, configureCdnIcons, getCurrencyFlagIcon, CURRENCY_FLAG_MAP | Any | | @westayltd/icons/react | CdnIcon, CurrencyIcon + all core exports | Web only | | @westayltd/icons/native | CdnIcon, CurrencyIcon + all core exports | React Native only |

Icon Sync

New icons uploaded to Azure CDN are detected daily by a GitHub Action. When new icons are found, an auto-PR is created to update the registry.

To manually check for drift:

CDN_BASE_URL=https://your-cdn-url npm run sync-icons

Development

npm install
cd packages/icons
npm run build    # Build dist/
npm run dev      # Watch mode

Publishing

Bump the version in packages/icons/package.json, commit, then push a tag matching icons-v*:

# After updating version in package.json and committing:
git tag icons-v<version>
git push origin icons-v<version>

Or trigger manually via GitHub Actions > Publish @westayltd/icons > Run workflow.