@heroicons/react介绍修订版本明细

源

采纳

编辑于 1月前

半兽人

@heroicons/react介绍

React
组件

@heroicons/react 是 Tailwind CSS 团队（由 Tailwind Labs 维护）提供的 React 图标库，包含一套 MIT 许可的免费 SVG 图标，主要用于现代 Web 项目。

它提供了 轮廓版（Outline） 和 实心版（Solid） 两套风格，并且每个图标都是 SVG 组件化，在 React 中直接使用。

1. 核心特点

两种风格
- Outline（线框风格）
- Solid（实心风格）
SVG React 组件
- 直接 import 使用，不需要手动拷贝 SVG
免费开源
- MIT 许可，可以在商业项目中使用
Tailwind CSS 友好
- 默认设计风格和 Tailwind 生态高度一致
轻量化
- 按需引入，Tree Shaking 自动去掉未使用图标

2. 安装

npm install @heroicons/react

或 Yarn：

yarn add @heroicons/react

3. 使用方法

1) 引入轮廓图标（Outline）

import { HomeIcon } from '@heroicons/react/24/outline'

function App() {
  return <HomeIcon className="h-6 w-6 text-blue-500" />
}

export default App

h-6 w-6 使用 Tailwind 设置宽高
text-blue-500 设置颜色

2) 引入实心图标（Solid）

import { HomeIcon } from '@heroicons/react/24/solid'

function App() {
  return <HomeIcon className="h-6 w-6 text-green-500" />
}

Solid 风格更适合按钮或强调操作
Outline 风格适合导航栏和列表

3) 动态切换图标风格

import { MoonIcon as MoonOutline } from '@heroicons/react/24/outline'
import { MoonIcon as MoonSolid } from '@heroicons/react/24/solid'

function ThemeToggle({ isDark }) {
  return isDark ? <MoonSolid className="h-6 w-6" /> : <MoonOutline className="h-6 w-6" />
}

4. 文件结构

安装后，你可以看到支持以下路径：

@heroicons/react/20/solid
@heroicons/react/24/solid
@heroicons/react/24/outline

20 / 24 表示图标尺寸（px）
solid / outline 表示图标风格

5. 常用 Props

Heroicons 的 React 组件其实是一个 <svg>，支持标准 SVG 属性：

Prop	说明
`className`	设置宽高、颜色、margin（通常用 Tailwind）
`strokeWidth`	控制线条宽度（Outline 图标可用）
`aria-hidden`	可访问性属性，默认 `true`
`role`	设置为 `"img"` 以支持屏幕阅读器

6. 应用场景

导航栏
- Home、User、Cog 等图标用于侧边栏或顶部导航
按钮图标
- 添加/删除/编辑操作按钮配合文字
状态或反馈
- Loading、Check、XMark 等提示状态
结合 Tailwind 组件库
- 如配合 shadcn/ui、Headless UI 做现代化界面

7. 优缺点

优点：

完全免费、MIT 许可
React 组件化，支持按需引入
设计统一、Tailwind 生态无缝结合

缺点：

仅提供基础图标（约 292 个），不如 Lucide Icons 或 Tabler Icons 丰富
没有官方动画或高级交互，需要自行实现

8. 总结

@heroicons/react = Tailwind 官方免费 React 图标库
核心优势：简单、现代、免费、React 友好
适用场景：现代管理后台、SaaS 产品、Tailwind UI 项目

预览