@fibrae/ semi-icons-core (中文(简体) )

简体中文

框架不可知图标和插图数据,外加图标样式,用于Semi Design Next. 图标软件包( E)semi-icons-<framework>每个框架都读取这些数据。 也可以直接使用来自制图标.

安装

pnpm add @fibrae/semi-icons-core

船舶无害环境管理,不依赖同伴.

使用量

每个图标都是出口的无害环境管理模块 IconData,在与每个框架的图标组件同名下:

import { IconActivity } from '@fibrae/semi-icons-core';
import { IconAvatar } from '@fibrae/semi-icons-core/lab'; // color icon that keeps its original colors

IconActivity;
// {
//     name: 'activity', // icon type, rendered as the `semi-icon-activity` class
//     attrs: { viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
//     children: [['path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d: '...', fill: 'currentColor' }]],
// }

• 一个节点是 [tag, attrs, children?]属性名称为 DOM 名称(fill-rule, (中文(简体) ), class,与 style 作为字符串),所以一个框架可以按原样通过它们或者一次映射它们(反应使用 fillRule, (中文(简体) ), className 和样式对象).
• 渲染时添加 defaultAttrs 转到根 svg数字 : width 财务报告和审定财务报表 height 联 合 国 1em, (中文(简体) ), focusable="false", (中文(简体) ), aria-hidden="true"。 。 。 .
• 多彩图标( O)IconAI*Level2, (中文(简体) ), IconAI*Level3, (中文(简体) ), IconAILoading携带 fills,通过 fill 道具 (英语). 属性值包含占位符 : {fillN} 是 N 颜色 getFillColor(fill, fills),以及 {uid} 是每个实例独有的ID。 替换为 resolveValue(value, colors, uid)。其他图标通过 fill 直指根头 svg。 。 。 .

子路径条目

样式定义 .{prefix}-icon, (中文(简体) ), -extra-small, (中文(简体) ), -small, (中文(简体) ), -default, (中文(简体) ), -large, (中文(简体) ), -extra-large, (中文(简体) ), -spinning 和旋转动画,并依赖 $prefix 从 semi:theme。框架图标包已经导入它们;直接使用核心时自行导入.

相关软件包

• 取决于没有其他Semi软件包.
• 每个框架的图标包使用.

添加图标

• 单色图标:添加 svgs/icons/<name>.svg 和条目 svgs/icons/meta.json。 。 。 . category 是图标页面上的组名称,并重用已有值,例如 Basic, (中文(简体) ), Arrow 财务报告和审定财务报表 Interface; AI 图标使用 One Color, (中文(简体) ), Two Color 财务报告和审定财务报表 Multiple Color 按颜色级别。 颜色变为 currentColor。 。 。 .
• 颜色图标:添加 svgs/lab/<name>.svg 和条目 svgs/lab/meta.json颜色不变.
• SVG 文件名称是图标类型, 导出名称是 Icon 加上PascalCase( 选项) (ai_ 变成 AI),生成的模块文件名是 kebab- case 中的导出名(IconAIBellLevel2 变成 icon-ai-bell-level-2.ts) (中文(简体) ).
• 不要手写 {uid} 用于 SVG 源代码 。 生成器会添加前缀,渲染会取代每个实例.
• 运行 pnpm build:icon 在寄存器根处。 它首先写 src/icons, (中文(简体) ), src/lab 财务报告和审定财务报表 src/illustrations 在本套件中 (scripts/build-icon.ts,然后生成每个框架的图标和插图组件。 不用手编辑生成的文件 .
• 运行 pnpm site:dev 打开 图标文件页面 以检查新图标.

添加插图

• 添加 svgs/illustrations/<name>.svg,并命名暗变体 <name>-dark.svg颜色, width 财务报告和审定财务报表 height 保持原样,颜色写成 var(--semi-color-*)。 。 。 .
• 导出名称为 Illustration 加上PascalCase,这样 noContent-dark 变成 IllustrationNoContentDark。 。 。 .
• 密码也跳过手写 {uid}运行 pnpm build:icon 生成 src/illustrations 和每个框架的示例部分.

发展

• 构建 : vp pack。关于一般命令,参见 捐款额 在寄存器根处.
• 测试 : __tests__/data.test.ts 检查所有图标和插图的标识和引用.