推荐优雅的手绘SVG图标库：Heroicons

推荐优雅的手绘SVG图标库：Heroicons

heroiconsA set of free MIT-licensed high-quality SVG icons for UI development.项目地址:https://gitcode.com/gh_mirrors/he/heroicons

Heroicons，源自Tailwind CSS的创造者，是一套精致的手绘SVG图标集合。这个库不仅提供基本的SVG图标，还带有内建的React和Vue组件库，使得在Web开发中集成这些图标变得异常简单。

项目简介

Heroicons的核心在于它的美观性和易用性。无论您是在构建新的Web应用，还是为现有的设计增添一丝亮点，这套图标集都能提供多种尺寸（24x24、20x20、16x16）以及两种风格（轮廓线与填充）。每个图标都经过精心设计，旨在保证在不同颜色主题下也能保持一致的视觉效果。

技术分析

基本使用方法

通过直接复制heroicons.com上的图标源代码，您可以轻松地将SVG图标插入HTML文件中，并利用CSS进行样式定制。例如：

<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>

React 和 Vue 集成

对于React和Vue开发者，Heroicons提供了内建的组件库，允许您按需导入单个图标作为组件使用。例如，在React中：

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

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

而在Vue中：

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

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

应用场景

Heroicons适用于各种场合，包括但不限于网站导航、按钮、表单元素、提示信息等。其简洁的设计和多样的尺寸选择，使之能够适应各类UI设计风格，无论是扁平化、 Material Design 还是其他设计体系。

项目特点

1. 手绘美感 - 每一个图标都是由专业设计师手工绘制，确保了高质量的视觉体验。
2. 可定制化 - 图标可以通过CSS的color属性直接调整颜色，轻松适配您的设计系统。
3. 框架支持 - 提供React和Vue的官方库，方便快速集成到现代前端项目。
4. 多尺寸 - 包括24x24、20x20和16x16三种尺寸，满足不同布局的需求。
5. 清晰命名 - 图标采用上驼峰式命名，直观且易于查找。

总结来说，Heroicons是一个强大而实用的图标资源库，它将提升您的设计工作流，让界面更加专业且引人注目。立即前往Heroicons.com开始探索并使用这些美丽的图标吧！

heroiconsA set of free MIT-licensed high-quality SVG icons for UI development.项目地址:https://gitcode.com/gh_mirrors/he/heroicons