点与点

Digital.ai UX中央资产库——用于产品和文件的插图和集成标志.

📖 浏览演示 ~

目录

• 资产类型
• 浏览演示
• 使用插图
• 使用整合标志
• 使用任务图标
• 添加新插图或集成标志
• 解决问题

资产类型

整合标志和任务图标 DotIllustration,不是单独的 图标组件 - 与说明部分相同的部分,仅以 单主题 SVG 代替轻/暗对. 任务图标 属于新 (S-135988)-取自"点"的固定颜色管道/工作流程徽章图标 原子库( 图解节点) 27123-30795). 节点的15个图标中有13个在 范围(2个作为AI类排除在外)。 SVG已经到位. 见 tasks/README.md 身份认证.

浏览演示

https://digital-ai.github.io/dot-illustrations/demo/* (中文(简体) )* 联合国

演示让你:

• 浏览 73个插图 (全球和板子), 114个整合标志,以及 13个任务图标 (任务部分)
• 切换到 说明, (中文(简体) ), 一体化,以及 任务 使用搜索栏旁的切换器
• 搜索 两节都有模糊的自动完成
• 过滤插图 A-Z 类 (仅集成——114个标志受益于字母导航)
• 单击任意一张牌 打开带有复制准备的代码片段的详细模式
• 恒星项目 以便以你的喜好保存它们
• 上传新插图或集成标志 从浏览器( 见 上传新(中文(简体) )

使用插图

反应.. DotIllustration 通过 dot-components

import { DotIllustration } from '@digital-ai/dot-components';

// Light (default)
<DotIllustration illustrationId="empty" />

// Dark
<DotIllustration illustrationId="done" theme="dark" />

// With tooltip
<DotIllustration illustrationId="features" tooltip="See all features" />

满 DotIllustration ∗∗∗

标准 HTML

<link rel="stylesheet" href="./index.css" />

<!-- Light theme -->
<span class="dot-illustration">
  <img class="done light" />
</span>

<!-- Dark theme -->
<span class="dot-illustration">
  <img class="done dark" />
</span>

总是设置清晰 width 财务报告和审定财务报表 height ——该图书馆没有内置的缩放默认值.

使用整合标志

反应.. DotIllustration 通过 dot-components

import { DotIllustration } from '@digital-ai/dot-components';
import '@digital-ai/dot-illustrations/integrations/index.css';

<DotIllustration illustrationId="jenkins" className="dot-integration" ariaLabel="Jenkins" />

工作间: DotIllustration 它不支持整合标志 拥有的。 它只装入根 index.css 并包入图像 .dot-illustration,但整合规则是 .dot-integration img.<id> 内 integrations/index.css。在您的应用程序中导入此文件一次并通过 className="dot-integration",将类添加到包装上。 无 两者,图像都是空的.

标准 HTML

<link rel="stylesheet" href="./integrations/index.css" />

<span class="dot-integration">
  <img class="jenkins" />
</span>

整合标志是: 仅一个主题 他们没有暗色的变体.

使用任务图标

反应.. DotIllustration 通过 dot-components

import { DotIllustration } from '@digital-ai/dot-components';

<DotIllustration illustrationId="task-manual" className="dot-task-icon" ariaLabel="Manual task" />

工作间: DotIllustration 不支持任务图标。 这个 将图像包入 .dot-illustration但是任务规则是 .dot-task-icon img.<id>他们生活在根部 index.css,哪个 dot-components 已经装入,所以通过 className="dot-task-icon" 实值 够了。 没有它,图像就变成空的.

标准 HTML

<link rel="stylesheet" href="./index.css" />

<span class="dot-task-icon">
  <img class="task-manual" />
</span>

任务图标是 仅一个主题 ——固定颜色徽章,无深色变体.

状态 : 任务段的船,有浏览/复制/装入UI的线条, 13个镜内图标ID, 以及他们的SVG都到位了 — 见 tasks/README.md。仍然开放:将这些内容作为真实内容出版 iconId单位 @digital-ai/dot-icons。 。 。 .

添加新插图或集成标志

设计师分步指南: 文档/附加资产。它涵盖了插图、集成标志和任务图标: Figma 导出、文件、文件 illustrations.json 线条、支票和合并后发生的情况.

简而言之,每笔资产均在 illustrations.json,以及 npm run build 写入 index.css, (中文(简体) ), integrations/index.css,演示列表和 demo/descriptions.json 从它。 别用手来编辑.

1. 在新分支上, 添加 SVG 文件 :

   仁爱	文件	大小
   说明	illustrations/light/global/my-new-state.svg 财务报告和审定财务报表 illustrations/dark/global/my-new-state.svg (使用时 dashboards/ 用于仪表板插图)	248×248 (磁盘 353×212)
   整合标志	integrations/my-tool.svg	40×40 (韩语)
   任务图标	tasks/my-task-icon.svg	40×40 (韩语)

2. 添加一行到 illustrations.json,在其组的末尾(全球插图,仪表板插图,集成标志,然后是任务图标):

   {"id":"my-new-state","kind":"illustration","category":"global","label":"My new state","description":"This is the my-new-state illustration."},
   {"id":"my-tool","kind":"integration","category":null,"label":"My tool","description":null},
   {"id":"my-task-icon","kind":"task","category":null,"label":"My task icon task","description":null},
   

   ID是带有连字符的小写. label 是演示文稿复制的代码使用的 aria 标签 . category 财务报告和审定财务报表 description 仅用于插图.

3. 运行构建(节点20或后期,不需要安装),测试和检查:

   npm run build
   npm test
   npm run check
   

4. 提交SVG, illustrations.json 而文件的构建已更改。 打开拉动请求并张贴到 #点- 组件 在Slack审查.

在演示中上传新内容 进行第1步和第2步的交接,并在发送任何文件前检查每个文件和ID。 然后由审查员运行 npm run build 在它的分枝上,在合并之前推出。 它尚不能打开主机演示的拉出请求: digital-ai 该组织的OAuth App访问限制屏蔽了它的应用. 它的工作从当地 复制的演示与 node demo/local-proxy.js编辑 指南 有步骤.

解决问题

最新 dot-illustrations 未接获 dot-components

添加一个 resolutions 条目 package.json数字 :

"resolutions": {
  "@digital-ai/dot-illustrations": "latest"
}

未显示的集成图像

确保CSS的集成进口: <link rel="stylesheet" href="./integrations/index.css" />在反应中,也通过 className="dot-integration" (见 使用整合标志) (中文(简体) ). 图书馆使用 content: url() 打开 <img> 要素—— <img> 标记必须 没有 src 属性 班级必须准确匹配整合身份.

详情: 点设计系统-说明