3分钟定位所需图标：Heroicons功能场景速查表

3分钟定位所需图标：Heroicons功能场景速查表

【免费下载链接】heroicons 项目地址: https://gitcode.com/gh_mirrors/her/heroicons

你是否还在为找一个合适的图标翻遍整个图库？是否面对数十个相似图标不知如何选择？本文将Heroicons图标按功能场景分类，帮你3分钟内精准定位所需图标，告别检索烦恼。

读完本文你将获得：

• 按8大功能场景分类的图标速查目录
• 3种框架集成的极简示例（React/Vue/原生HTML）
• 基于文件名的快速检索技巧
• 不同尺寸/风格图标的选用指南

项目简介：认识Heroicons

Heroicons是由Tailwind CSS团队打造的开源SVG图标集，提供三种尺寸（16×16、20×20、24×24像素）和两种风格（轮廓线outline/实色solid），总计超过500个精心设计的图标。项目地址：gh_mirrors/her/heroicons

核心特点：

• 纯SVG矢量图标，支持任意缩放不失真
• 原生支持React组件（react/目录）和Vue组件（vue/目录）
• 所有图标可通过颜色CSS属性自由定制
• MIT开源协议，商业项目可免费使用

图标分类速查表

1. 常用基础图标

这类图标适用于各种界面的通用操作，包含确认、关闭、提示等基础功能。

图标名称	文件路径	用途说明
check-circle	src/24/outline/check-circle.svg	成功状态、确认操作
x-mark	src/24/solid/x-mark.svg	关闭窗口、取消操作
information-circle	src/24/outline/information-circle.svg	提示信息、帮助说明
exclamation-triangle	src/24/outline/exclamation-triangle.svg	警告提示、错误状态

2. 导航与方向图标

用于页面导航、方向指示和层级关系展示，常见于菜单、分页和步骤条。

关键图标：

• arrow-right.svg - 前进/下一步
• chevron-down.svg - 下拉菜单指示
• home.svg - 首页导航
• menu.svg - 菜单按钮

3. 用户与权限图标

涉及用户管理、身份验证和权限控制的场景，适用于登录界面、用户中心等。

核心图标集：

• user.svg - 个人用户
• users.svg - 用户组/团队
• lock-open.svg - 已解锁状态
• key.svg - 密码/密钥管理

4. 商业与电商图标

专为电商平台和商业应用设计，包含购物车、支付、配送等场景元素。

常用图标路径：

• shopping-cart.svg - 购物车
• credit-card.svg - 支付方式
• truck.svg - 物流配送
• tag.svg - 商品标签/折扣

5. 文件与文档图标

适用于文档管理、内容编辑场景，包含文件类型、文件夹和编辑工具。

图标	文件路径	应用场景
	src/24/outline/document.svg	通用文档
	src/24/outline/folder.svg	文件夹
	src/24/outline/clipboard.svg	剪贴板/复制内容
	src/24/solid/archive-box.svg	归档文件

6. 设备与技术图标

包含电子设备、编程开发和技术相关的专业图标，适合技术类产品界面。

关键技术图标：

• device-phone-mobile.svg - 移动设备
• computer-desktop.svg - 桌面电脑
• code-bracket.svg - 代码/开发
• server.svg - 服务器/后端

快速集成指南

安装方式

通过npm安装（推荐）：

# React项目
npm install @heroicons/react

# Vue项目
npm install @heroicons/vue

React组件使用示例

import { ShoppingCartIcon } from '@heroicons/react/24/outline'

function ProductCard() {
  return (
    <div className="border rounded p-4">
      <h3>商品名称</h3>
      <button className="flex items-center text-blue-600">
        <ShoppingCartIcon className="size-5 mr-2" />
        加入购物车
      </button>
    </div>
  )
}

Vue组件使用示例

<template>
  <div class="border rounded p-4">
    <h3>商品名称</h3>
    <button class="flex items-center text-blue-600">
      <ShoppingCartIcon class="size-5 mr-2" />
      加入购物车
    </button>
  </div>
</template>

<script setup>
import { ShoppingCartIcon } from '@heroicons/vue/24/outline'
</script>

检索技巧：如何快速找到图标

1. 关键词联想：图标文件名高度语义化，例如：

   • 与用户相关：包含user/users关键词
   • 与箭头相关：包含arrow/chevron关键词
   • 与商业相关：包含shopping/cart/credit关键词

2. 尺寸与风格选择：

   • 功能按钮推荐24px尺寸：src/24/
   • 紧凑界面推荐20px尺寸：src/20/solid/
   • 小图标区推荐16px尺寸：src/16/solid/

3. 文件路径规律：

   src/{尺寸}/{风格}/{图标名}.svg
   # 例如：24px轮廓风格的购物车图标
   src/24/outline/shopping-cart.svg
   

结语与资源获取

掌握Heroicons的分类逻辑后，你可以大幅提升界面开发效率。完整图标库可通过以下方式获取：

1. 直接克隆仓库：git clone https://gitcode.com/gh_mirrors/her/heroicons
2. 浏览源代码目录：src/
3. 查看框架组件：react/index.js、vue/index.js

建议收藏本文作为速查手册，关注项目CHANGELOG.md获取更新通知。需要更多图标使用技巧？欢迎在评论区留言讨论！

（全文约1980字符）

【免费下载链接】heroicons 项目地址: https://gitcode.com/gh_mirrors/her/heroicons