React 和 Vue 开发者最怕什么？图标。
不是找不到，而是找到了也塞不进组件，颜色一改就崩，打包体积还蹭蹭涨。
heroicons 把这件事一次性按死。
Tailwind 那帮人做的，免费、MIT、23k star，图标直接就是 React/Vue 组件，复制即用，颜色随 Tailwind 类名秒换，体积小到可以忽略。
用法简单到像作弊。
React 端：`npm i @heroicons/react`，然后 `import {BeakerIcon} from '@heroicons/react/24/solid'`，一行完事。
Vue 端同理，`<BeakerIcon class="size-6 text-blue-500" />`，写完收工。
真正爽的点在“不用挑”。
outline、sold、20px、16px 全分好文件夹，命名统一大驼峰，强迫症直接治好。
设计师给的 SVG 也不用再转，官方已经转完，连 stroke-width 都调得刚刚好。
有人担心“会不会太轻量所以图标少”。
打开 heroicons.com 搜“arrow”，能翻三页，常用的、冷门的、甚至那种“我也不知道为什么要用但万一要用”的，全在。
更妙的是，它跟 Tailwind 的 class 无缝咬合。
想换个主题色？把 `text-gray-500` 改成 `text-emerald-600`，整个项目图标一起换，连变量都不用写。
最后提醒一句：别一口气全引，tree-shaking 再强也顶不住你把整个包拉进来。
用几个引几个，才是对 heroicons 最大的尊重。