README

由Tailwind CSS的制作者精心制作的美丽SVG图标。
作为基本SVG图标和通过第一方React和Vue库提供。

在Heroicons.com浏览 →

基本用法

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

<svg
  class="size-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>

两种图标样式都预先配置为可以通过设置color CSS属性进行样式化，无论是手动设置还是使用如text-gray-500之类的实用类，在Tailwind CSS等框架中。

React

首先，从npm安装@heroicons/react

npm install @heroicons/react

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

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

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

24x24轮廓图标可以从@heroicons/react/24/outline导入，24x24实心图标可以从@heroicons/react/24/solid导入，20x20实心图标可以从@heroicons/react/20/solid导入，16x16实心图标可以从@heroicons/react/16/solid导入。

图标使用大驼峰命名约定，并且始终以单词Icon结尾。

在UNPKG上查看完整图标名称列表 →

Vue

首先，从npm安装@heroicons/vue

npm install @heroicons/vue

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

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

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

24x24轮廓图标可以从@heroicons/vue/24/outline导入，24x24实心图标可以从@heroicons/vue/24/solid导入，20x20实心图标可以从@heroicons/vue/20/solid导入，16x16实心图标可以从@heroicons/vue/16/solid导入。

图标使用大驼峰命名约定，并且始终以单词Icon结尾。

在UNPKG上查看完整图标名称列表 →

贡献

虽然我们非常感谢任何愿意尝试改进项目的意愿，但我们目前只对修复错误的贡献感兴趣，例如不正确的TypeScript类型，或者修复导出时用填充而不是线条的图标等。

我们不接受添加新图标或添加对Svelte或SolidJS等框架的支持的贡献。相反，我们鼓励您在自己的库中发布自己的图标，并为任何您希望看到的支持的框架创建自己的包。

许可证

本库采用MIT许可证。