Heroicons - 漂亮精致的开源矢量图标库,由Tailwind CSS 官方出品,适配 Vue / React

漂亮精致的图标库,很难得地适配了超小尺寸的显示效果,实用性很强。

Heroicons 是一套简单直接的高品质图标库,由大名鼎鼎的前端框架 Tailwind CSS 的团队制作并且发布。接触过 Tailwind CSS 的开发者可能也注意到,Tailwind CSS 生态里的前端 UI 组件质量都很不错,当然这套图标库也一样。

  • 目前共有 361 个图标,可以满足多数图标使用需求;
  • 图标使用简单便捷,除了提供适配 Vue / React 框架的组件包,也可以直接复制为 SVG 矢量图的代码,直接在前端开发使用,或者在设计软件中进行编辑;
  • 提供了四种风格,实用性够强。

Heroicons 官网的 UI 布局和浏览体验和我之前推荐的大部分 UI 图标库类似,都很简单,我们可以直接浏览所有的图标,也可以用英文关键词搜索,不过区区300多图标,需要搜索的需求不强烈。

四种风格图标

这套图标很有意思的是,除了描边和填充两种风格外,还提供了在图标尺寸上的适配:Mini 和 Micro,即迷你和超迷你尺寸的图标。当然这不是把图标直接缩小,我们在网站上选择这两个选项卡可以直观地看出,这是在保持图标图形不变的前提下,做的像素级别的缩小适配,这样的好处是缩小后的图标依然很清晰,依然很精致!这个适配可是真的下功夫,效果也很不错,解决了一直以来小图标不够精致的问题。

在项目中使用 Heroicons

如果是使用少量的图标,可以直接复制 SVG 代码,如果想要在开发项目里使用全套图标,可以使用官方提供的包。下面以我熟悉的 Vue.js 项目为例。

首先安装 @heroicons/vue

然后就可以在 Vue 文件中使用,每个图标都可以单独引入,按需加载:

如果要使用其他风格的图标,可以这样:

Heroicons 是一套免费开源的矢量图标库,图标源码是开源的,采用 MIT 开源协议,我们可以免费下载来使用,也可以自由地用在商业项目上。

总的来说,这是一套高质量的图标,适配了超小尺寸的场景,不管是 UI 设计还是开发,又或者是 PPT 、海报设计等需求要用图标,都非常推荐。

原文链接:https://www.thosefree.com/heroicons

相关推荐
江城开朗的豌豆3 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆10 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆11 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
江城开朗的豌豆23 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山31 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45340 分钟前
css模块化以及rem布局
前端·javascript·css
棉花糖超人1 小时前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
daols887 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table