Back to Details

trident-icons

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Trident Icons — Find & Use

Trident Icons — 查找与使用

Help users find the right icon and generate correct import code for 
@clubmed/trident-icons
.
帮助用户找到合适的图标，并为
@clubmed/trident-icons
生成正确的导入代码。

Step 1 — Get the Catalog

步骤1 — 获取图标目录

WebFetch: https://latest.trident-icons.pro.clubmed/icons-metadata.json
The JSON structure: 
categories[{ category, icons[{ name, withOrientation?, variants? }] }]
WebFetch: https://latest.trident-icons.pro.clubmed/icons-metadata.json
JSON结构：
categories[{ category, icons[{ name, withOrientation?, variants? }] }]

Step 2 — Find the Right Icon

步骤2 — 找到合适的图标

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/
通过将用户描述与图标名称（PascalCase格式的英文）进行匹配来搜索目录。
需要识别的关键模式：
  • 填充/轮廓/默认 — 同一图标的样式变体（
    HeartFilled
    、
    HeartOutlined
    ）
  • 方向（
    withOrientation: true
    ） — 使用带有
    Left/Right/Up/Down
    后缀的变体，切勿使用无后缀的名称（如
    ArrowDefaultLeft
    ，而非
    ArrowDefault
    ）
  • 类别提示 — 当上下文明确时（餐饮→Food、运动→Activities、客房设施→Room、社交网络→Socials、交通→Transports），优先在对应类别中搜索
  • 模糊概念 — 某些概念根据上下文对应多个图标：
    wifi/internet
    → 
    Internet
    （Utilities，通用连接） vs 
    WIFI
    （Room，客房内设施）。当上下文不明确时，请询问用户。
如果没有精确匹配的图标，建议最接近的替代方案，并提及Storybook：
https://latest.trident-icons.pro.clubmed/

Step 3 — Generate Import Code

步骤3 — 生成导入代码

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:
tsx
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:
tsx
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:
tsx
import ResortFillEC from '@clubmed/trident-icons/svg-use/ResortFill-EC';
Icon props:
tsx
<Icon
  name="Search"
  size="24px"           // custom size
  color="currentColor"  // inherits from parent by default
  className="my-icon"   // additional CSS classes
/>
始终按类别导入图标 — 切勿一次性导入所有图标（会增加包体积）。
为获得最佳性能，请使用
svg-use
，仅在明确需要懒加载时使用
svg
。
单个图标：
tsx
import { Icon, IconsProvider } from '@clubmed/trident-icons';
import Actions from '@clubmed/trident-icons/svg-use/Actions';

<IconsProvider icons={[Actions]}>
  <Icon name="Search" />
</IconsProvider>
多个图标 — 按类别分组导入：
tsx
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>
带连字符的类别名称（例如
ResortFill-EC
）在路径中使用其完整分段：
tsx
import ResortFillEC from '@clubmed/trident-icons/svg-use/ResortFill-EC';
Icon组件属性：
tsx
<Icon
  name="Search"
  size="24px"           // 自定义尺寸
  color="currentColor"  // 默认继承父元素颜色
  className="my-icon"   // 额外的CSS类
/>

Resources

资源