Heroicons v1.0

日期

就在一年前,我们发布了第一个版本的 Heroicons,这是一套我们与 Tailwind UI 共同设计的精美 UI 图标。从那时起,我们添加了大量新图标,并设计并推出了一个专门的网络体验。

今天,我们很高兴终于发布 Heroicons v1.0,其中包含 450 多个免费图标,两种风格,官方 React 和 Vue 库以及 Figma 资产。

Heroicons

React + Vue 库

除了直接从网站获取所需的图标外,您现在还可以安装我们的官方 React 和 Vue 库,以便快速轻松地访问每个图标作为专用组件。

以下是如何使用 React 的示例

import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500" />
      <p>...</p>
    </div>
  )
}

查看 GitHub 上的文档 以了解更多信息。

Figma 资产

我们还在新的 Figma 社区页面上发布了官方的 Heroicons Figma 文件

它包含 Heroicons 中的所有图标,作为单独的 Figma 组件,因此您可以轻松地在项目中使用它们,而无需手动导入每个 SVG。

想要开始使用它吗?访问 Heroicons 网站 →