点角
Digital.ai UX 的图标字体存储器——单独使用或与 dot-components。 。 。 .
📖 浏览演示 ~
目录
使用图标
反应.. DotIcon 通过 dot-components
import { DotIcon } from '@digital-ai/dot-components';
<DotIcon iconId="home" />
<DotIcon iconId="settings" fontSize="large" tooltip="Settings" />
<DotIcon iconId="ai" ai={true} />
标准 HTML
<link rel="stylesheet" href="./index.css" />
<span class="dot-icon">
<i class="icon-home"></i>
</span>
从不 添加
icon-前缀iconId道具 ——DotIcon自动添加.
浏览演示
https://digital-ai.github.io/dot-icons/demo/* 互联网档案馆的存檔,存档日期2013-12-02* 联合国
演示让你:
- 浏览每个图标, 分为12个类别( 导航、 动作、 状态、 布局、 DevOps、 文件与文件、 通讯、 安全、 人民、 AI、 Logos、 商业和杂项) 以及您的爱好
- 搜索 使用模糊的自动完成, 由 id 或 遗留名称 (
expander发现key(中文(简体) ) - 单击任意一张牌 打开带有 Icon ID, Dot 代码的详细模式(
<DotIcon iconId="..." />),和 HTML 代码 – 全部可复制 - 恒星图标 以保存在您最爱的标签上( 在浏览器中长期存在)
- 上传新图标 从浏览器 : 上传新 检查ID和SVG,然后用SVG及其
icons.json线条。 在组织批准该演示的 GitHub 应用程序后运行的托管演示中;在此之前,在当地运行演示(参见 在演示中上传新内容(中文(简体) )
添加新图标
字体是如何构建的
Repo是图标字体的来源. IcoMoon不再被使用:不要导入或输出IcoMoon项目,也不要编辑 selection.json 手边.
fonts/svg/<id>.svg:每个图标一个SVG.icons.json: 每个图标一行, 带有id页:1code(字体代码点),其演示category,以及aliases(同一格氏的后传类名,如:expander页:1key) (中文(简体) ).
npm run build 产生另外所有的东西 fonts/dot.woff2, (中文(简体) ), dot.woff, (中文(简体) ), dot.ttf 财务报告和审定财务报表 dot.svg, (中文(简体) ), index.css,演示的图标列表(demo/icons.js),以及 selection.json。同样的输入总是给出相同的字节。 不要用手编辑生成的文件:每次拉请求的检查都失败了.
selection.json 是一个IcoMoon计划,每个glyph, 写再发行一次,作为返回IcoMoon的方法。 后所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出所出.
添加或修改图标
设计师分步指南: 文档/附加资产。它涵盖了新的图标,重绘,别名,命名规则,支票的信息以及合并后发生的事情.
简而言之:
- 从 Figma 导出图标为跟随的 SVG 出口规则。 。 。 .
- 在一个新的分支上,运行
npm ci一次,然后添加图标及其文件、其编号和一个已存在的类别:
Id是小写 kebab- case, 比如npm run add-icon -- ~/Downloads/my-new-icon.svg my-new-icon actionsmy-new-icon。 。 。 .add-icon检查SVG,复制到fonts/svg/<id>.svg,将一行添加到icons.json下一条自由代码,并运行npm run build它拒绝继续运行main,不做任何承诺,不对文件进行修改. - 检查演示中图标 .
- 提交 SVG,
icons.json并打开一个拉动请求。 何时 检查图标 通行证,贴入 #点- 组件 在斯莱克.
要逐个添加图标, 请将 SVG 保存为 fonts/svg/<id>.svg,结尾处添加一行 icons.json 下一个自由代码和前面的逗号,然后运行 npm run build数字 :
{"id":"my-new-icon","code":"ea3b","category":"actions","aliases":[]}
重画图标需要 glyph-change 标签在它的拉出请求。 ID从未被更名或去除;取而代之的是增加第二个名字作为别名.
在演示中上传新内容
没有克隆,请从 演示数字 : 连接 GitHub,则 上传新,带有ID,一个类别和SVG文件.
- 格式检查 : 键入时的 ID( 小写为 kebab- case, 不由图标或后继名称所取) , 以及选中的文件
.svg之后的 出口规则) (中文(简体) ). 它列出每个问题,和 创建拉请求 禁用至无. - 它打开一个拉取请求 与一个承诺: SVG 作为
fonts/svg/<id>.svg和一行输入icons.json在下一个自由代码。 它不构建字体. - 在拉动请求合并之前,有人运行
npm run build在它的树枝上,并推进结果. 检查图标在那之前会保持红色;拉出请求说明如何显示.
这个 digital-ai 组织限制OAuth App访问,所以主机演示只能在Org所有者批准其应用后才能打开拉出请求. 在此之前,或者如果GitHub回答组织"已经启用了OAuth App访问限制",使用 npm run add-icon,或用自己的程序运行克隆演示文稿 gh 登录( n)gh auth login) (中文(简体) ). 在两个终端中, 从 repo 根 :
node demo/local-proxy.js
python3 -m http.server 5174
然后打开 http://localhost:5174/demo/。它通过代理单独连接.
出口规则
字体甘油有一色而无中风,所以 add-icon,上传New, npm run build 财务报告和审定财务报表 检查图标 以 :
- 中风、 嵌入式图像、 梯度、 文本、 透明度、 或除剪辑外的剪辑或口罩
- 多个填充颜色, 或者没有填充形状
- 一个不是正方形的视图框, 对于新图标:
add-icon上传新和 检查图标 停下来,和npm run build因此,四个975宽的图标 从IcoMoon保持宽度 - 超过 200 KB, 或外部文件的链接
fill-rule="evenodd"Figma经常出口,只发出警告。 在Figma中:像24×24这样的正方形框架, 中图 财务报告和审定财务报表 大纲,则 平缓,每个形状一个填满。 每个信息及其固定: 文档/附加资产。 。 。 .
检查每个拉动请求
这个 检查图标 工作流程重建出每个拉出请求,并与其基分站进行比较. 失败时 :
- 生成的文件与新文件不符
npm run build,例如手编辑到index.css或从 IcoMoon 导出复制的字体文件 - 类名
index.css被删除,或者在不同的代码中指点,例如icon-forward-outline was moved from \ea3a to \ea3b - 一个格言入
fonts/dot.ttf删除 - 一个字体的垂直度量变化, 它会移动每个图标
- 已存在的 glyph 变化形状: 它的大纲移动了 1 个以上的字体单位, 它的宽度或轮廓变化的次数, 或者轮廓风向相反
icons.json打破一条规则:重复的 id,别名或代码,没有 SVG 或没有条目的 SVG 的条目,或代码不高于每一个早期代码的新图标,其id不是小写 kebab- case,或者其分类不存在- sVG 牵引请求添加或更改断开 导出规则。在运行摘要中显示警告,不要失败
新班名和新格莱弗斯传. 如果一个已有图标是故意重新绘制的,请添加 glyph-change 标签为拉出请求,检查会再次运行。 标签不允许去除,重新编号或度量变化:公布的图标从未被去除或重新编号.
如果生成的文件已过时, 请运行 npm run build 在树枝上,并承担它的变化.
要运行检查之前你推:
npm ci
npm run build
git worktree add ../dot-icons-main origin/main
npm run check -- --base ../dot-icons-main
npm test
配置游戏
dot-icons 用途 @font-face 它不能处理。 添加样式模拟 :
jest.config.js
moduleNameMapper: {
'@digital-ai/dot-icons': '<rootDir>/testing-utils/style-mock.ts',
}
testing-utils/style-mock.ts
module.exports = {};
解决问题
最新 dot-icons 未接获 dot-components
添加一个 resolutions 条目 package.json数字 :
"resolutions": {
"@digital-ai/dot-icons": "latest"
}
详情: 点设计系统——图标