heroicons 一个手绘版SVG图标的网站

作为前端，经常免不了使用图标的时候，尤其当自己业余开发项目，自己又没有设计做图的能力。而使用网上开源的图标是我们常见的一种做法。今天介绍一个图标网站，官网：https://heroicons.com/，目前已收集292个纯手绘的常见场景的图标，而且是 SVG 矢量格式，它的好处是可以任意放大缩小而不影响图标的质量。由 Tailwind CSS 开发人员制作而成。

官网中每种图标分别有线框图和实心图，缩小版三种选择：

线框图：24 x 24 像素长宽，1.5 像素描边，常用于导航或营销活动场景的应用

实心图：24 x 24 像素长宽，实体填充，常用于导航或营销活动场景的应用

缩小版：20 x 20 像素长宽，实体填充，常用于页面中很小元素如：按钮、表单元素和支持辅助文本

当鼠标移动到图标上，可复制出 SVG 代码，保存成 SVG 格式的文件，可在前端代码中直接使用。

如果你有改变图标颜色的需求，可以在代码中找到 fill 颜色填充属性，来改变当前的颜色值。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
  <path fill-rule="evenodd" d="M9.664 1.319a.75.75 0 01.672 0 41.059 41.059 0 018.198 5.424.75.75 0 01-.254 1.285 31.372 31.372 0 00-7.86 3.83.75.75 0 01-.84 0 31.508 31.508 0 00-2.08-1.287V9.394c0-.244.116-.463.302-.592a35.504 35.504 0 013.305-2.033.75.75 0 00-.714-1.319 37 37 0 00-3.446 2.12A2.216 2.216 0 006 9.393v.38a31.293 31.293 0 00-4.28-1.746.75.75 0 01-.254-1.285 41.059 41.059 0 018.198-5.424zM6 11.459a29.848 29.848 0 00-2.455-1.158 41.029 41.029 0 00-.39 3.114.75.75 0 00.419.74c.528.256 1.046.53 1.554.82-.21.324-.455.63-.739.914a.75.75 0 101.06 1.06c.37-.369.69-.77.96-1.193a26.61 26.61 0 013.095 2.348.75.75 0 00.992 0 26.547 26.547 0 015.93-3.95.75.75 0 00.42-.739 41.053 41.053 0 00-.39-3.114 29.925 29.925 0 00-5.199 2.801 2.25 2.25 0 01-2.514 0c-.41-.275-.826-.541-1.25-.797a6.985 6.985 0 01-1.084 3.45 26.503 26.503 0 00-1.281-.78A5.487 5.487 0 006 12v-.54z" clip-rule="evenodd" />
</svg>

或者可以借助 iconfont 工具在线生成图标字体，这样可直接通过字体大小颜色的属性来设置大小和颜色。

唯一不足的地方，官网没有通过用途或场景对图标进行分类，不是很容易找到，但是可通过搜索栏输入图标的名称进行筛选。同样图标需要 Tailwind CSS 框架搭配一起使用，可以看到以上代码中有 Tailwind CSS 框架中的类名。

详细使用可参见 Github 主页介绍：https://github.com/tailwindlabs/heroicons