@apify/ui-icons

浏览图标 主机故事本。 。 。 .

认证图标设定为 ~280 键入的 React 组件, 由 SVG 通过 特别志愿人员。每个图标船带有 viewBox (因此,它比额),接受 size 道具和用途 currentColor 页:1 fill (因此它继承了文字颜色并尊重它们).

替换老年人 @apify-packages/icons 软件包——相同的导入形状,更广泛的图标集.

安装

pnpm add @apify/ui-icons

同伴依赖关系( 如果还没有在您的项目中安装的话) :

• react 17.x; 18.x; 19.x; 19
• react-dom 17.x; 18.x; 19.x; 19

没有 styled-components 要求 – 图标是平面 SVG React 组件.

快开始

import { ChevronRightIcon, SettingsIcon } from '@apify/ui-icons';

export const SettingsLink = () => (
    <a href="/settings">
        <SettingsIcon size="16" title="Settings" />
        Settings
        <ChevronRightIcon size="12" />
    </a>
);

每个图标都接受:

• size?: string ——像素大小作为字符串('12', (中文(简体) ), '16', (中文(简体) ), '24'默认 '24'。 。 。 .
• title?: string + 键 titleId?: string ——无障碍名. 纯装饰性图标的输出(消费者应添加 aria-hidden) (中文(简体) ).
• className?: string ——传入 <svg> 键.

要重新显示图标,请设置 color ,其母体(如按钮或文本节点). SVG集团 fill 实值 currentColor。 。 。 .

里面的东西

• ~280个图标 覆盖导航( n)ChevronRightIcon, (中文(简体) ), ArrowSortIcon),状态(CheckIcon, (中文(简体) ), MinusIcon, (中文(简体) ), AlertIcon),表面(SettingsIcon, (中文(简体) ), BellIcon, (中文(简体) ), BookmarkIcon),并补充具体概念(例如:ActorIcon, (中文(简体) ), DatasetIcon) (中文(简体) ).
• 类型 ——每个部分为a FC<IconProps> 与 size, (中文(简体) ), title, (中文(简体) ), titleId, (中文(简体) ), className 道具来.
• 可主题 —— 说 fill="currentColor" 到处都是,所以颜色来自父母的CSS颜色.
• 树能震动 ——每个图标是一个被命名的导出,捆绑者放下未使用过的.

浏览故事书中的完整目录(见下文).

故事书

从寄存器根 :

pnpm run storybook

该图标目录生活在共享的故事本中 http://localhost:6007 (英语) 在"Iconography"栏下.

捐款

见 CONTRIBUTING.md 用于添加新图标(SVGR工作流程),构建指令,以及无障碍说明.