exaBase 设计系统图标反应

exaBase 设计系统图标 (v1.4.0)用于反应.

安装

npm i @exawizards/exabase-design-system-icons-react

使用量

import { CheckmarkCircleIcon } from "@exawizards/exabase-design-system-icons-react";

function MyComponent() {
  return <CheckmarkCircleIcon />;
}

每个图标也作为单个模块发布,因此可以直接导入. 这样做有助于避免在没有树摇动的环境中装入整个图标(例如 Dev 服务器):

import CheckmarkCircleIcon from "@exawizards/exabase-design-system-icons-react/CheckmarkCircleIcon";

如果您使用 Next.js,请将软件包添加到 optimizePackageImports 将命名的导入重写为直接导入 :

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ["@exawizards/exabase-design-system-icons-react"],
  },
};

大小

默认图标大小为 16您可以通过 size 道具 :

<CheckmarkCircleIcon size="20" />

颜色

出租的SVG已经 fill="currentColor" 属性,因此应用了它们的文本颜色。 你可以通过颜色 color CSS 财产 :

<CheckmarkCircleIcon style="{ color: red }" />

无障碍

输出 SVG 有 role="img" 财务报告和审定财务报表 aria-hidden="true" 默认属性。 这导致屏幕阅读器忽略 SVG 元素 :

<svg role="img" aria-hidden="true" ...>...</svg>

aria-label

如果图标具有语义意义,则需要手动添加 aria-label 属性。 这不会添加 aria-hidden="true" 属性.

<CheckmarkCircleIcon aria-label="Success" />

输出 :

<svg role="img" aria-label="Success" ...>
  <path ... />
</svg>

title 财务报告和审定财务报表 titleId

另一个选项是使用标题和标题Id:

<CheckmarkCircleIcon title="Success" titleId="success-title" />

输出 :

<svg role="img" aria-labelledby="success-title" ...>
  <title id="success-title">Success</title>
  <path ... />
</svg>

道具

许可证

exaBase设计系统图标根据麻省理工学院许可证获得许可.

版权

- ExaWizards Inc. (原始内容存档于2013-10-12).