Heroicons图标

Heroicons图标简介

Heroicons是一套高质量的开源图标库，由 Tailwind CSS 团队和 Refactoring UI 团队分别维护不同版本，

Heroicons适用于网页和应用程序开发。所有图标均基于MIT许可证，允许任何人免费下载和使用，用于个人和商业项目。

Heroicons特点

• 高质量SVG图标：Heroicons提供清晰、一致的图标设计，适合UI开发，支持Web和应用设计。

• 两种风格：包括Outline（轮廓线）和Solid（填充）风格，满足不同设计需求。

• 应用广泛：图标覆盖了常见的UI元素和业务场景，适用于导航、操作、状态指示等。

• 易于集成：支持直接在HTML中使用SVG代码，以及通过npm安装后在React、Vue等现代前端框架中作为组件使用。

• 版本更新：随着版本迭代，图标数量持续增加，例如有版本包含超过1200个图标。

Heroicons使用方法

1.安装：

• 对于前端项目，可以通过npm或Yarn安装Heroicons的React或Vue库。

npm install @heroicons/react

# 或者使用Yarn

yarn add @heroicons/react

2.引入图标：

• 在代码中，你可以直接导入并使用图标，例如：

import { BellIcon } from '@heroicons/react/24/outline';

function App() {

  return

}

3. 直接使用SVG：

• 也可以从Heroicons网站直接复制SVG代码到HTML中使用。

4. Figma集成：

• 设计师可以利用Figma插件或直接下载SVG文件进行设计工作。

Heroicons不仅提供了多种样式的图标，还支持多种尺寸的图标选择，适应不同的设计需求。用户可以根据项目的具体要求，选择24×24、20×20等不同尺寸的图标。此外，Heroicons的图标设计风格简洁现代，适合各种类型的应用程序和网站，尤其是与Tailwind CSS结合使用时，能够实现更好的视觉效果和用户体验。

Heroicons的图标库还在不断更新，开发者可以关注其GitHub页面，获取最新的图标和功能更新。

Github：https://github.com/tailwindlabs/heroicons