@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.

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 (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 | Currency | |------|----------| | AED | UAE Dirham | | USD | US Dollar | | GBP | British Pound | | SAR | Saudi Riyal | | EUR | Euro | | FRF | French Franc | | JPY | Japanese Yen | | CHF | Swiss Franc |

CurrencySymbolIcon (web + native)

Renders a currency symbol SVG icon (e.g. ﷼ for SAR, € for EUR) using the API currency code. Supports color theming via color, fill, and stroke props — same API as CdnIcon.

Web:

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

// Default — mono mode, uses currentColor
<CurrencySymbolIcon code="AED" size={24} />

// With explicit color
<CurrencySymbolIcon code="AED" size={24} color="#1A1A1A" />

// Color variant — renders original SVG colors
<CurrencySymbolIcon code="EUR" size={24} variant="color" />

React Native:

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

<CurrencySymbolIcon code="AED" size={24} color="#1A1A1A" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | code | string | — | ISO 4217 currency code (e.g. "AED", "USD") | | size | number | 24 | Width and height in pixels | | width | number | — | Overrides size for width | | height | number | — | Overrides size for height | | color | string | "currentColor" | Single-color tint (recommended for mono SVGs) | | fill | string | — | Override SVG fill attribute | | stroke | string | — | Override SVG stroke attribute | | strokeWidth | number | — | Override SVG stroke-width | | variant | "mono" \| "color" | "mono" | "mono" tints the icon; "color" renders original SVG colors | | className | string | — | Extra CSS classes (web only) |

Supported currencies

| Code | Currency | |------|----------| | AED | UAE Dirham | | USD | US Dollar | | GBP | British Pound | | SAR | Saudi Riyal | | EUR | Euro | | CHF | Swiss Franc |

Returns null for unsupported currency codes.

Amenity Icons

Resolve a Westay amenity ID directly to a CDN icon name. Use this instead of the older keyword-based getCdnIconByAmenityName — teams can migrate gradually.

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

getAmenityIconById(1)   // → "AC - Air Conditioner"
getAmenityIconById(83)  // → "Wave"
getAmenityIconById(138) // → "Wifi"
getAmenityIconById(999) // → "Flower" (fallback for unmapped IDs)

Use with CdnIcon:

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

<CdnIcon name={getAmenityIconById(amenity.id)} size={24} />

Mapped amenity IDs

| ID | Amenity | ID | Amenity | |----|---------|-----|---------| | 1 | Air conditioned | 589 | Premium Bedding | | 2 | Airport shuttle | 598 | Mattress Type | | 12 | Bar | 603 | Bed Extras | | 17 | Casino | 613 | Spa Bathroom | | 27 | Cribs | 636 | Bathroom Extras | | 28 | EV Charging | 662 | Culinary Suite | | 30 | Golf course | 706 | Climate Control | | 43 | Gym | 717 | Internet Workspace | | 51 | Hot tub | 745 | Connectivity Calls | | 54 | Indoor pool | 755 | Entertainment Media | | 57 | Kitchen | 786 | Laundry Care | | 60 | Outdoor space | 793 | Safety Security | | 76 | Parking | 799 | Accessibility Features | | 82 | Pet friendly | 850 | Kids Baby | | 83 | Pool | 865 | Views Outdoor | | 95 | Restaurant | 896 | Room Sound | | 121 | Spa | 899 | Decor | | 128 | Washer and dryer | 918 | In-room Fitness | | 132 | Water park | 932 | In-room Services | | 138 | Wifi | 942 | Complimentary Items | | 151 | Fitness & Wellness | 946 | Transportation Perks | | 168 | Ski Activities | 956 | Sustainability | | 192 | Bicycle | 965 | Cleaning Comfort | | 291 | Beach | 988 | In-room Extras | | 575 | Family & Kids | | |

Returns "Flower" as fallback for unmapped IDs. getCdnIconByAmenityName() (keyword-based) remains available for gradual migration.

Entry Points

| Import | Contents | Platform | |--------|----------|----------| | @westayltd/icons | Icon registry, getAmenityIconById, AMENITY_ICON_MAP, getCurrencyFlagIcon, getCurrencySymbolIcon, configureCdnIcons + more | Any | | @westayltd/icons/react | CdnIcon, CurrencyIcon, CurrencySymbolIcon + all core exports | Web only | | @westayltd/icons/native | CdnIcon, CurrencyIcon, CurrencySymbolIcon + 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.