Heroicons 重大更新：Vue/React 组件和 Figma 文件

Heroicons 是由 Tailwind CSS 团队精心制作的精美手工 SVG 图标。该项目在发布 v1.0 版本后取得了重大进展，带来了一些激动人心的功能，将使 Heroicons 的使用体验更加出色。

• 超过 450 个图标（实心和轮廓）
• React 和 Vue 包
• Figma 源文件

最简单的入门方法是从 Heroicons 网站复制图标的 SVG 代码。除了直接使用 SVG 之外，Tailwind 现在还为 Vue 和 React 提供了配套的 NPM 包。

以下是使用 Heroicon 图标和 Vue 的示例

<template>
  <div>
    <BeakerIcon class="h-5 w-5 text-blue-500"/>
    <p>...</p>
  </div>
</template>
 
<script>
import { BeakerIcon } from '@heroicons/vue/solid'
 
export default {
  components: { BeakerIcon }
}
</script>

以下是使用 React 的相同示例

import { BeakerIcon } from '@heroicons/react/outline'
 
function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

最后，Tailwind 发布了一个 社区 Figma 文件，如果您想将 Heroicons 融入您的下一个 Figma 项目。

#了解更多

Heroicons.com 网站提供了一个可搜索的界面，可以快速浏览所有可用的图标并复制 SVG 代码。您也可以在 GitHub 上查看 源代码。请务必 查看 Tailwind CSS 博客的官方文章，了解有关 V1 版本的更多信息并获取最新的 Tailwind 更新！