@ 碳/相图反应

在数字产品和软件产品中使用 碳设计系统

开始

要安装 @carbon/pictograms-react 在您的项目中,您需要运行 根据命令使用 无数字 :

npm install -S @carbon/pictograms-react

如果你喜欢 雅伦,使用以下命令 相反:

yarn add @carbon/pictograms-react

使用量

您可以在您的工程中导入象形图组件, 使用它的名称 :

import { Airplane } from '@carbon/pictograms-react';

我们还提供通用JS和UMD文件 lib 财务报告和审定财务报表 umd 目录, 页:1.

要使用 CommunityJS 导入, 您可以做以下操作:

const { Airplane } = require('@carbon/pictograms-react');

注意: 如果您想要找到象形图的导入路径, 您可以 参考我们 象形图库

图标填充

所有来自库支持的图标都被样式为 fill 属性。 你们可以 更改图标的颜色, 在自定义类名中通过此设置 属性(首选),或以内线样式通过。 例如:

// CSS custom class name to set the fill of the icon to `rebeccapurple`
svg.my-custom-class {
  fill: rebeccapurple;
}

import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return (
    <button>
      <Airplane aria-label="Add" className="my-custom-class" />
    </button>
  );
}

重点和 aria-label

默认情况下,图标组件来自 @carbon/pictograms-react 被视为 装饰性内容. 这意味着,我们设置 aria-hidden="true" 除非确定 道具传递给组件.

如果您想让屏幕阅读器宣布图标, 您可以提供 aria-label 或者说 aria-labelledby。例如:

import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return (
    <button>
      <Airplane aria-label="Add" />
    </button>
  );
}

这样做将增加适当的 role 页:1 <svg> 节点也.

如果你愿意的话 <svg> 要得到焦点,你需要通过在一个 tabIndex 数值。 例如:

import { Airplane } from '@carbon/pictograms-react';

function MyComponent() {
  return <Airplane aria-label="Add" tabIndex="0" />;
}

包括 tabIndex 财务报告和审定财务报表 aria-label (或 aria-labelledby)将设置 相应 tabindex 说明 <svg> 并验证对老年人的支持 通过设置 Internet Explorer 11 等浏览器 focusable 改为 true。 。 。 .

捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 贡献指南!

许可证

凭 Apache 2.0 许可证。 。 。 .

IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 选择退出IBM遥测数据收集。 。 。 . 有关所收集数据的更多信息,请参见: IBM 遥测文档。 。 。 .