这是什么

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

它支持以下特征:

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

有用链接

• Figma 三叉戟 UI
• Jira董事会
• 故事书稳定版本
• 故事书 rc 版本
• 故事书版
• AI 融合指南

所需资源

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

安装

npm install --save @clubmed/trident-icons

库配置( 反应)

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

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 融合指南 用于配置细节.

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

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

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

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

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

Svg 模式 :

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 使用模式 :

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 添加您的新图标 :

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命令 :

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

如果您使用节点符, 您必须在节点符中添加相同的加载器. 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 接下来 运行以下命令 :

npm run build:fonts

了解问题

网络font

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

捐款

请阅读 捐款额 详细介绍我们的行为守则和向我们提交拉动请求的程序.

许可证

版权 2024 - 今天 QQ Club Med

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

1. 源代码再分配必须保留上述版权通知,本条件清单和以下免责声明.

2. 以二进制形式的再分配必须转载上述版权通知,本条件清单以及随分发而提供的文件和(或)其他材料中的下列免责声明.

3. 未经具体事先书面许可,不得使用版权持有人的姓名或撰稿人的姓名认可或推广从该软件衍生出的产品.

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