@ 碳/ icon- 帮助器
帮助者与图标一起使用 碳设计系统
开始
要安装 @carbon/icon-helpers 在您的项目中,您需要运行
根据命令使用 无数字 :
npm install -S @carbon/icon-helpers
如果你喜欢 雅伦,使用以下命令 相反:
yarn add @carbon/icon-helpers
使用量
@carbon/icon-helpers 为渲染提供两个助手 <svg> 节点
,或帮助使正确的属性设置在 <svg> 节点.
其中包括:
| 名称 | 类型 | 说明 |
|---|---|---|
getAttributes | (attributes: Object) => Object | 获取属性为 <svg> 节点 |
formatAttributes | (attributes: Object) => String | 将属性格式化为可以应用到 DOM 中节点的字符串 |
toString | (descriptor: Object) => String | 将给定的图标描述符格式化为字符串。 用于模板 |
toSVG | (descriptor: Object) => DOMNode | 将给定的图标描述符格式化为 DOM 节点 |
对于大多数方法, attributes 与名称相对应
值是,如果您为 <svg>。例如,如果我们
想要设置 width 财务报告和审定财务报表 height 我们将采取以下行动:
const { getAttributes } = require('@carbon/icon-helpers');
const attributes = getAttributes({ width: 20, height: 20 });
要将图标视为可聚焦,您需要提供
无论是 aria-label 或者说 aria-labelledby 在给定中 attributes 此外,还有:
改为 tabindex。例如:
const { getAttributes } = require('@carbon/icon-helpers');
const attributes = getAttributes({
'aria-label': 'My icon label',
tabindex: '0',
});
图标描述符
我们用来描述图标对象的术语是图标描述符
@carbon/icons。默认情况下,其形状如下:
{
elem: 'svg',
attrs: {
xmlns: 'http://www.w3.org/2000/svg',
viewBox: '0 0 16 16',
width: 16,
height: 16,
},
content: [
{
elem: 'path',
attrs: {
d: '...',
},
},
],
name: 'IconName',
size: 16,
}
您可以直接从 @carbon/icons 并使用它们
并行 toSVG 或者说 toString 具体做法是:
import { IconName } from '@carbon/icons';
import { toString, toSVG } from '@carbon/icon-helpers';
const iconString = toString(IconName);
const iconSVG = toSVG({
...IconName,
attrs: {
...IconName.attrs,
myCustomAttribute: 'myCustomAttributeValue',
},
});
捐款
我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!
许可证
凭 Apache 2.0 许可证。 。 。 .
IBM 遥测
本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .