Utilities

可访问图标

¥Accessible Icon

通过添加标签使图标易于访问。

Features

    Quickly make any icon accessible by wrapping it and providing a meaningful label.

    No visual difference, but announced correctly by screen readers.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-accessible-icon

结构

¥Anatomy

导入组件。

¥Import the component.

import { AccessibleIcon } from "radix-ui";
export default () => <AccessibleIcon.Root />;

API 参考

¥API Reference

¥Root

包含可访问的图标。

¥Contains the icon to make accessible.

PropTypeDefault
label*
string
No default value

可访问性

¥Accessibility

大多数图标或图标系统本身并未内置辅助功能。例如,相同的视觉十字图标实际上可能表示 "close" 或 "delete"。此组件允许你为整个应用中使用的图标赋予含义。

¥Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.

这是使用 视觉隐藏 构建的。

¥This is built with Visually Hidden.