@ adobe/ spectrum-wc- icons (英语)
光谱 2 工作流程图标 页:1 光谱网络组件公开的、框架不可知的图标艺术提供了两种方式:
- Per- icon 自定义元素 (单位:千美元)
<swc-icon-star>:在任何框架中以零仪式,携带大小,颜色,和可访问性来渲染的滴入标记. - Per- icon SVG 字符串函数 (单位:千美元)
Icon_Star():可树摇动地基,可通过innerHTML反应dangerouslySetInnerHTML单v-html,或 立特unsafeSVG。 。 。 .
两人都不是Lit的消费者 软件包只取决于 @adobe/spectrum-wc-core (用于: IconBase) (中文(简体) ).
该艺术出自Adobe-内部A4U S2 图标全局集( 打开源码) 使用此软件包的工作流程生成器。 见 重新生成 编辑 图标策略 RFC。 。 。 .
安装
yarn add @adobe/spectrum-wc-icons
使用量
自定义元素( 任何框架, 无升)
由子路径导入 per- icon 元素; 导入将标记登记为副效果 .
import '@adobe/spectrum-wc-icons/swc-icon-star.js';
<swc-icon-star accessible-label="Favorite"></swc-icon-star>
<swc-icon-star accessible-label="Favorite" /> // React 19
一次注册每个图标( 不具有树摇动性; 偏好在apps中导入每平方英寸 ) :
import '@adobe/spectrum-wc-icons/elements.js';
SVG 字符串函数( 构建时间、 SSR 、 自定义组成)
import { Icon_Star } from '@adobe/spectrum-wc-icons/Star.js';
element.innerHTML = Icon_Star();
包的默认导出是每个函数的管子,为方便:
import { Icon_Star, Icon_Folder } from '@adobe/spectrum-wc-icons';
API 密码
每个元素延伸 IconBase 从 @adobe/spectrum-wc-core数字 :
| 成员 | 类型 | 默认 | 页:1 |
|---|---|---|---|
size | 'xs' | 's' | 'm' | 'l' | 'xl' | 'm' | 大小框; 单幅绘图缩放. |
accessible-label | string | '' | 设定: 主机获得 role="img" + 键 aria-label空: 主机为 aria-hidden (修饰. |
支助科 color | <color> | 继承 | 驱动图标颜色通过 currentColor 倒计时. |
支助科 --swc-icon-color | <color> | currentColor | 高级色彩覆盖, 独立于文本 color。 。 。 . |
命名
对于一个 A4U 逻辑名称 <Name> (PascalCase,例如:. Star, (中文(简体) ), AddCircle, (中文(简体) ), 3DAsset:
| 产出 | 表单 | 示例AddCircle(中文(简体) ) | 示例3DAsset(中文(简体) ) |
|---|---|---|---|
| 函数 | Icon_<Name>() | Icon_AddCircle() | Icon_3DAsset() |
| 元素类 | Icon<Name> | IconAddCircle | Icon3DAsset |
| 元素标记 | swc-icon-<kebab> | swc-icon-add-circle | swc-icon-3d-asset |
| 函数子路径 | /<Name>.js | /AddCircle.js | /3DAsset.js |
重新生成
图标艺术和风格生成,而非手写. 从 repo 根中运行这些或 gen2/packages/icons。 。 。 .
| 命令 | 它会做什么 |
|---|---|
yarn generate:workflow-icons | 重现 src/*.ts 从原始 SVG 中 icon-source/运行 generate:icon-styles |
yarn generate:icon-styles | 副本 gen2/packages/swc/stylesheets/_lit-styles/icon-base.css 改为 src/stylesheets/icon-base.css |
yarn check:icon-styles | 如果样式表副本已过时( 运行于 yarn build(中文(简体) ) |
要刷新艺术( Adobe- 内部, VPN 需要), 将 S2 图标全球集( 打开源) SVG 下载到 icon-source/运行 yarn generate:workflow-icons。源 SVGs 被 git-ignored; 只有生成的艺术在 src/ 承诺。 见 图标源读取 整个步骤.
src/stylesheets/icon-base.css 是生成的副本:编辑 swc 源,然后运行 yarn generate:icon-styles。见 图标样式表。 。 。 .