@ aircall/ react-icons (美国英语)
Aircall Design 图标作为 SVG React 组件分发.
这个软件包提供了一个现代的轻量级替代品,可以取代 @aircall/icons 不依赖 styled-components 或者说 @xstyled。 。 。 .
安装
pnpm add @aircall/react-icons
使用量
import { PlayFilled, PauseFilled } from '@aircall/react-icons';
// Basic usage
<PlayFilled />
// With size prop (sets both width and height)
<PlayFilled size={32} />
<PlayFilled size="2rem" />
// With individual dimensions
<PlayFilled width={24} height={24} />
// With color (inherits from CSS color)
<PlayFilled style={{ color: 'red' }} />
<PlayFilled className="text-primary" />
// With ref
const iconRef = useRef<SVGSVGElement>(null);
<PlayFilled ref={iconRef} />
// With other SVG props
<PlayFilled aria-label="Play" role="img" />
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
size | number | string | '24px' | 设置宽度和高度 |
width | number | string | '24px' | 图标的宽度( 由 size(中文(简体) ) |
height | number | string | '24px' | 图标的高度( 由 size(中文(简体) ) |
ref | Ref<SVGSVGElement> | - 说吧 | 转发到 SVG 元素的 react ref |
...props | SVGProps<SVGSVGElement> | - 说吧 | 任何有效的 SVG 道具 |
从@aircall/icons迁移
替换从 @aircall/icons 与 @aircall/react-icons数字 :
- import { PlayFilled } from '@aircall/icons';
+ import { PlayFilled } from '@aircall/react-icons';
API相似,但没有 styled-components 造型道具. 使用 size 用于造型的道具或标准CSS.
发展
从 SVG 生成图标 :
pnpm --filter=@aircall/react-icons run generate:icons
构建软件包 :
pnpm --filter=@aircall/react-icons run build:package
图标来源
图标来源于 Figma 设计文件 : 图标 v2
SVG 文件应放入 src/svgs/ 目录并遵循命名公约:
- 使用带连字符的PascalCase(例如,
Play-Filled.svg, (中文(简体) ),Chevron-Down-Outlined.svg(中文(简体) ) - SVGR 将转换为组件名( 例如 , ),
PlayFilled, (中文(简体) ),ChevronDownOutlined(中文(简体) )
为什么是这个包裹?
这个软件包的创建是为了提供一个现代的轻量级替代品,以取代 @aircall/icons 即:
- 没有CSS-in-JS依赖关系 - 取消对
styled-components财务报告和审定财务报表@xstyled - 较小的捆绑大小 - 图标是纯SVG组件,最小的包装码
- 更好的摇树 - 每个图标是一个单独的文件,可以单独导入
- 现代反应模式 - 用途
React.forwardRef适当转发 - 类型脚本支持 - 道具和部件类型的完整类型脚本定义