trident-icons

Installation

SKILL.md

Trident Icons — Find & Use

Help users find the right icon and generate correct import code for @clubmed/trident-icons.

Step 1 — Get the Catalog

WebFetch: https://latest.trident-icons.pro.clubmed/icons-metadata.json

The JSON structure: categories[{ category, icons[{ name, withOrientation?, variants? }] }]

Step 2 — Find the Right Icon

Search the catalog by matching the user's description against icon names (PascalCase English).

Key patterns to recognize:

Fill / Outline / Default — style variants of the same icon (HeartFilled, HeartOutlined)
Orientation (withOrientation: true) — use the Left/Right/Up/Down suffixed variant, never the bare name (ArrowDefaultLeft, not ArrowDefault)
Category hint — when context is clear (dining → Food, sport → Activities, room amenity → Room, social network → Socials, transport → Transports), narrow the search there first
Ambiguous concepts — some concepts map to multiple icons depending on context: wifi/internet → Internet (Utilities, general connectivity) vs WIFI (Room, in-room amenity). Ask for context when unclear.

If no exact match exists, suggest the closest alternative and mention the Storybook: https://latest.trident-icons.pro.clubmed/

Step 3 — Generate Import Code

Always import by category — never import all icons at once (bundle size).

Use svg-use for optimal performance, svg only when lazy loading is explicitly needed.

Single icon:

import { Icon, IconsProvider } from '@clubmed/trident-icons';
import Actions from '@clubmed/trident-icons/svg-use/Actions';

<IconsProvider icons={[Actions]}>
  <Icon name="Search" />
</IconsProvider>

Multiple icons — group imports by category:

import { Icon, IconsProvider } from '@clubmed/trident-icons';
import Actions from '@clubmed/trident-icons/svg-use/Actions';
import Utilities from '@clubmed/trident-icons/svg-use/Utilities';

<IconsProvider icons={[Actions, Utilities]}>
  <Icon name="CrossDefault" />
  <Icon name="CalendarDefault" />
</IconsProvider>

Category names with hyphens (e.g. ResortFill-EC) use their exact segment in the path:

import ResortFillEC from '@clubmed/trident-icons/svg-use/ResortFill-EC';

Icon props:

<Icon
  name="Search"
  size="24px"           // custom size
  color="currentColor"  // inherits from parent by default
  className="my-icon"   // additional CSS classes
/>