heroicons

美丽的手工制作的SVG图标，由顺风CSS的制造商制作。 可作为基本的 SVG 图标，并通过第一方 React 和 Vue 库提供。

在 Heroicons.com →浏览

基本用法

使用这些图标的最快方法是简单地从 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>

这两种图标样式都通过手动或使用实用程序类（如在 Tailwind CSS 等框架中）预先配置为可样式化。color``text-gray-500

React

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

npm install @heroicons/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>
  )
}

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

图标使用大写的驼峰命名约定，并且始终以单词 为后缀。Icon

浏览 UNPKG →上的图标名称的完整列表

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>
import { BeakerIcon } from '@heroicons/vue/24/solid'

export default {
  components: { BeakerIcon }
}
</script>

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

图标使用大写的驼峰命名约定，并且始终以单词 为后缀。Icon

浏览 UNPKG →上的图标名称的完整列表

许可证

MIT