# @clubmed/trident-icons 中文文档

规范地址：https://npmcn.com/package/%40clubmed/trident-icons/

版本：1\.26\.0
npm 元数据更新时间：2026-11-09T11:59:51.107Z
中文译文更新时间：2026-11-10T03:38:00.963Z
软件包许可：BSD-3-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40clubmed/trident-icons
原文对照：https://npmcn.com/package/%40clubmed/trident-icons/?lang=original
源码仓库：https://scm.clubmed.com/clubmed/ui/trident-icons

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：7.9 MB，1916 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=17\.0\.0
- 首次发布：2024-11-08T15:20:03.983Z
- 最新版本发布：2026-11-09T11:59:50.943Z
- 近 30 天下载量：15154（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：74（近 12 个月 50 个）

## 中文简介

共享 ClubMed 图标库

## 安装

```sh
npm install @clubmed/trident-icons
```

也可以使用：`pnpm add @clubmed/trident-icons`、`yarn add @clubmed/trident-icons`、`bun add @clubmed/trident-icons`

## README

![Club Med](https://ns.clubmed.com/fbs/RWD/branding2023/Logo/MicrosoftTeams-image%20\(9\).png)

# @ clubmed/ 三叉戟- 逗号

* * *

[![npm version](https://badge.fury.io/js/%40clubmed%2Ftrident-icons.svg)](https://badge.fury.io/js/%40clubmed%2Ftrident-icons) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## 这是什么

三叉戟图标是Club Med的图标库. 它提供了一组图标,可用于任何Club Med项目.

它支持以下特征:

-   SVG 图标
-   SVG 使用图标( 用于更好的性能)
-   用于Node.js和Webpack/Vike/etc的SSR和装入器.

## 有用链接

-   [Figma 三叉戟 UI](https://www.figma.com/@clubmed)
-   [Jira董事会](https://clubmed.atlassian.net/jira/software/c/projects/SCL/boards/122)
-   [故事书稳定版本](https://latest.trident-icons.pro.clubmed/?path=/docs/introduction--docs)
-   [故事书 rc 版本](https://rc.trident-icons.pro.clubmed/?path=/docs/introduction--docs)
-   [故事书版](https://develop.trident-icons.pro.clubmed/?path=/docs/introduction--docs)
-   [AI 融合指南](https://latest.trident-icons.pro.clubmed/?path=/docs/ia-integration--docs)

## 所需资源

-   节点.js 18
-   可选:反应 QQ 17

## 安装

```sh
npm install --save @clubmed/trident-icons
```

## 库配置( 反应)

您可以使用 `TridentUIConfigProvider` 配置三叉戟 UI 库中的某些选项 :

```tsx
import './index.css';
import App from './App';
import React from 'react';
import { createRoot } from 'react-dom/client';
import { IconsProvider } from '@clubmed/trident-icons';
import Actions from '@clubmed/trident-icons/svg/Actions';

const baseName = (window as any).basename || '/';

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <IconsProvider icons={[Actions]} locale={'fr-FR'}>
      <App />
    </IconsProvider>
  </React.StrictMode>,
);
```

### 选项

-   `locale` - 用于组件的地块。 默认为 `fr-FR`。 。 。 .

## 图标配置

三叉戟图标提供了加载图标的新方式. 你可以用这个 `IconProvider` 从特定组中装入图标的组件.

**对于AI助手:** 完整的图标目录可在 `@clubmed/trident-icons/icons.json`见 [AI 融合指南](https://latest.trident-icons.pro.clubmed/?path=/docs/ia-integration--docs) 用于配置细节.

目前,有两个图标提供者:

-   SvgIcon Provider:使用懒惰加载的SVG来显示图标.
-   SvgUseicon Provider:使用本地Svg使用属性来加载并显示图标.

对于每个提供者,您都有按组名拆分的图标子集:

-   行动
-   活 动
-   品牌
-   科维德
-   粮食
-   快乐的照顾
-   地点
-   度假地 \* (仅供 SVG 使用)
-   会议室
-   服务
-   社会
-   运输
-   公用事业

默认情况下, 没有设置图标提供者 。 您必须在代码中导入子集图标如下 :

Svg 模式 :

```tsx
import Actions from '@clubmed/trident-icons/svg/Actions'; // load only the Actions subset using SVG mode
import { Icon, IconsProvider } from '@clubmed/trident-icons';

function App() {
  return (
    <IconsProvider icons={[Actions]}>
      <Icon name="ArrowDefaultLeft" />
    </IconsProvider>
  );
}
```

您可以混合使用 SVG 和 SVG 使用模式 :

```tsx
import { IconsProvider } from '@clubmed/trident-icons';
import Actions from '@clubmed/trident-icons/svg-use/Actions'; // load the Actions subset
import Brand from '@clubmed/trident-icons/svg/Brand';

function App() {
  return (
    <IconsProvider icons={[Actions, Brand]}>
      <Icon name="ArrowDefaultLeft" />
      <Icon name="ClubMed" />
    </IconsProvider>
  );
}
```

> 在这种情况下,图标组件会自动使用相应的图标Resolver来加载并显示图标.

### 注册自定义图标

三叉戟 UI 提供功能来注册任何外部 Svg 图标而无需重新开发 a 自定义图标组件。 刚刚使用 `resolver` 从 `SvgIconResolver` 或者说 `SvgUseIconResolver` 添加您的新图标 :

```tsx
import { Icon, IconsProvider } from '@clubmed/trident-icons';
import { resolver } from '@clubmed/trident-icons/svg/SvgIconResolver';

const CustomIcons = resolver([
  {
    name: 'MyCustomIcon',
    group: 'custom',
    element: lazy(() => import('./MyCustomIcon.svg?react')),
    // viewBox: '0 0 30 30', // default '0 0 30 30'
    // aspectRatio: 1, // default '1'
    // orientation: 'left' // apply rotation to the icon
  },
]);

function App() {
  return (
    <IconsProvider icons={[CustomIcons]}>
      <Icon name="MyCustomIcon" />
    </IconsProvider>
  );
}
```

### 节点.js + SSR

如果您在 Node.js 上下文中使用了 Vite 和 SSR , 您必须注册一个 node.js 加载器 SVG 文件 . `@clubmed/trident-icons` 为 SVG 文件提供无害环境管理加载器。 在您的软件包中添加以下导入您的节点. js命令 :

```json
{
  "scripts": {
    "start": "node -r @clubmed/trident-icons/esm-loader ./src/server.js"
  }
}
```

如果您使用节点符, 您必须在节点符中添加相同的加载器. json 文件 :

```json
{
  "extensions": ["ts", "js"],
  "delay": 100,
  "execMap": {
    "ts": "node --import @clubmed/trident-icons/loaders/node/svg",
    "js": "node --import @clubmed/trident-icons/loaders/node/svg"
  }
}
```

### 从图标生成字体( dev)

工程有一个可编译 svg 为字体的构建器. 只要在内部添加 Svg `svg` 接下来 运行以下命令 :

```sh
npm run build:fonts
```

## 了解问题

### 网络font

目前,由于 SVG 源代码不正确,一些字体模式的图标无法正确渲染 清理干净了.

## 捐款

请阅读 [捐款额](https://npmcn.com/package/%40clubmed/trident-icons/CONTRIBUTING.md) 详细介绍我们的行为守则和向我们提交拉动请求的程序.

## 许可证

版权 2024 - 今天 QQ Club Med

允许以源和二进制形式进行再分配和使用,无论是否修改,但必须符合下列条件:

1.  源代码再分配必须保留上述版权通知,本条件清单和以下免责声明.
    
2.  以二进制形式的再分配必须转载上述版权通知,本条件清单以及随分发而提供的文件和(或)其他材料中的下列免责声明.
    
3.  未经具体事先书面许可,不得使用版权持有人的姓名或撰稿人的姓名认可或推广从该软件衍生出的产品.
    

这种软件是由治安维持者和贡献者提供的,“安全”和任何扩张或军事攻击,包括但不限制为某一特定目的制造的危机和损失。 任何直接、直接、意外、特别、紧急、紧急、或后果的转让(包括、但不限制、采购非物质货物或服务;使用、数据、或买卖的损耗;或商业干涉),无论以何种方式造成、使用、限制、限制或限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用或限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用、限制使用或限制使用、限制使用、限制使用、限制使用、限制使用、限制使用或限制使用、限制使用、限制使用、限制、限制使用或限制使用、限制使用、限制使用、限制、限制使用、限制使用或限制使用、限制使用、限制使用、限制使用、限制、限制使用、限制使用、限制或限制使用、限制使用、限制使用、限制、限制使用、限制、限制、限制使用、限制、限制、限制使用、限制或限制使用、限制使用、限制.

## 常见问题

### @clubmed/trident-icons 是什么？

共享 ClubMed 图标库

### 如何安装 @clubmed/trident-icons？

在项目目录运行 npm install @clubmed/trident-icons，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @clubmed/trident-icons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @clubmed/trident-icons 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @clubmed/trident-icons 可以商用吗？

@clubmed/trident-icons 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @clubmed/trident-icons 的下载量有多少？

根据 npm 官方下载统计，@clubmed/trident-icons 在 2026/10/10 – 2026/11/08 这 30 天内被下载 15,154 次，日均约 505 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @clubmed/trident-icons 还在维护吗？

最新版本 1\.26\.0 发布于 2026/11/09（今天）；至今共发布 74 个版本，其中过去 12 个月发布了 50 个；首次发布于 2024/11/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。