可兼容Tailwind和React 和 Vue的图标库Heroicons

今天给大家推荐一款 图标库，既可以在 Tailwind 里使用也可以在React 和 Vue中使用，图标几乎已经覆盖了所有的常用需求，完全满足开发者日常使用。

前言

就在一年多前，Heroicons发布了 Heroicons 的第一个版本，这是Heroicons与 Tailwind UI 一起设计的一组漂亮的 UI 图标。从那时起，Heroicons添加了大量新图标，并设计并推出了专用的 Web 体验。

目前，Heroicons终于隆重发布了 Heroicons v2.1.1，其中包括超过288 icons+ 两种风格的免费图标，官方 React 和 Vue 库，以及 Figma 资产。

Tailwind 中的基本用法

使用这些图标的最快方法是简单地从 heroicons.com 复制所需图标的源代码，并将其直接内联到您的 HTML 中：

<svg
  class="h-6 w-6 text-gray-500"
  fill="none"
  viewBox="0 0 24 24"
  stroke="currentColor"
  stroke-width="2"
>
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

React + Vue 库

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

React

首先，从 npm 安装： @heroicons/react

npm install @heroicons/react

现在每个图标都可以单独导入为 React 组件，例如，下面是 React 的样子：

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

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

Vue

请注意，此库目前仅支持 Vue 3。

首先，从 npm 安装： @heroicons/vue

npm install @heroicons/vue

现在每个图标都可以单独导入为 Vue 组件：

<template>
  <div>
    <BeakerIcon class="h-6 w-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>

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

许可证

该库已获得 MIT 许可，请放心使用

Figma 资源

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

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