@ astraicons/ 反应
Astra 图标集中的美丽反应图标. 跨越5个风格的900+图标.
安装
npm install @astraicons/react
# or
yarn add @astraicons/react
# or
pnpm add @astraicons/react
使用量
从各自的样式目录中导入图标 :
import { HomeIcon } from '@astraicons/react/linear';
import { HeartIcon } from '@astraicons/react/bold';
import { StarIcon } from '@astraicons/react/duotone';
import { AppleIcon } from '@astraicons/react/brand';
import { CubeIcon } from '@astraicons/react/3d';
function MyComponent() {
return (
<div>
<HomeIcon className="w-6 h-6" />
<HeartIcon className="w-6 h-6 text-red-500" />
<StarIcon className="w-6 h-6 text-yellow-500" />
<AppleIcon className="w-8 h-8" />
<CubeIcon className="w-8 h-8 text-purple-500" />
</div>
);
}
图标样式
线性 (288个图标)
带有1.5px中风宽度的大纲图标。 适合现代的,最小化的界面.
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/react/linear';
粗体 (288 个图标)
填充或粗体的中风图标,用于强调并更能见度更小的尺寸.
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/react/bold';
Duotone (288个图标)
将填充和外观风格相结合的双通图标,用于深度和视觉兴趣.
import { ActivityIcon, BellIcon, CameraIcon } from '@astraicons/react/duotone';
品牌( 18个图标)
包括社交媒体平台和受欢迎品牌在内的公司与服务标志.
import { AppleIcon, GoogleIcon, TwitterIcon } from '@astraicons/react/brand';
三维 (32个图标)
当代界面有深度和视角的现代三维风格图标.
import { CubeIcon, FolderIcon, BoxIcon } from '@astraicons/react/3d';
道具
所有图标都接受标准的 SVG 元素道具 :
interface IconProps extends React.SVGProps<SVGSVGElement> {
title?: string; // Accessibility title
titleId?: string; // ID for the title element
className?: string; // CSS classes
style?: React.CSSProperties; // Inline styles
}
实例
有尾风CSS
<HomeIcon className="w-8 h-8 text-blue-500 hover:text-blue-600 transition-colors" />
带有内线样式
<HomeIcon style={{ width: 32, height: 32, color: '#3B82F6' }} />
有无障碍标题
<HomeIcon title="Navigate to home" />
作为按钮图标
<button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
<SaveIcon className="w-5 h-5" />
Save Changes
</button>
类型脚本支持
所有图标全部打入. TypeScript将为所有可用的图标及其道具提供自动完成.
import { HomeIcon } from '@astraicons/react/linear';
import type { FC } from 'react';
const MyComponent: FC = () => {
return <HomeIcon className="w-6 h-6" />;
};
树摇
此包被优化为树摇. 只有您导入的图标才会包含在您的捆绑中 .
// ✅ Good - only imports what you need
import { HomeIcon } from '@astraicons/react/linear';
// ❌ Avoid - imports entire style directory
import * as Icons from '@astraicons/react/linear';
软件包信息
- 软件包大小:~14MB 共计(未包装)
- 文件: 3,524个文件(JS + TypeScript定义)
- 树能震动: 是 - 只有导入的图标被捆绑
- 同伴依赖关系页:1
可用图标
查看完整图标列表 :
浏览器支持
- 颜色( 最新)
- 火狐( 最新)
- 萨法里(最新)
- 边缘( 最新)
捐款
我们欢迎为加强该项目而作的贡献。 我们目前的重点是:
- QQ 已有图标的错误修正
- QQ 类型脚本改进
- 文件更新
- QQ 新的图标贡献( 目前尚未接受)
相关软件包
- @ astraicons/ veue (英语) - Vue 组件
- 星盘 - SVG 图标文件
贷项
- 图标设计由 UI 阿斯特拉语Name
- 以 赫罗伊孔斯
许可证
麻省理工学院 UI 阿斯特拉语Name