Lucide:一个高颜值的矢量图标库
Lucide[1] 是一套开源的高颜值矢量图标库,目前包含 1472 个 SVG 图标。
Lucide 的作者是 Eric Fennis[2],Fork 自另一个开源图标库 Feather Icons[3]。Feather Icons 当前的图标数量是 287 个。
Lucide 的优点包括:
颜值高,风格干净统一颜色、尺寸、线宽等均可自定义通过 npm 包分发,使用方便使用 ES 模块,支持 Tree-Shaking,占用体积小支持的前端框架多,包括但不限于 Vue 2/3,React,Svelte 等市面流行框架
我们以 Vue 3 为例,看看如何在项目中使用 Lucide 图标。
安装
$ pnpm add lucide-vue-next
引入图标
每个图标都是一个组件,支持 color、size 等属性。
<!-- App.vue --><template> <Camera color="#999" :size="144" /></template><script setup>import { Camera } from 'lucide-vue-next'</script>
渲染结果是一个单纯的 SVG 元素:
渲染结果
Lucide 图标组件的默认颜色是 currentColor[4],若不明确设置,它会继承父容器的颜色。
<template> <div class="container"> <Film /> <span class="text">Film</span> </div></template><script setup>import { Film } from 'lucide-vue-next'</script><style>.container { display: flex; align-items: center; color: steelblue; /* 父容器颜色 */}.text { margin-left: 0.25em;}</style>
渲染结果:
图标默认继承父容器的颜色
搜索图标
在 Icons[5] 页面可以搜索图标。
搜索图标
点击图标出现底部弹框:
图标的吸底弹框
点击弹框中的 See in action 按钮,查看在不同框架的实际使用代码:
查看示例代码参考资料
[1]
Lucide: https://lucide.dev/,
[2]
Eric Fennis: https://github.com/ericfennis,
[3]
Feather Icons: https://feathericons.com/,
[4]
color: https://lucide.dev/guide/basics/color,
[5]
Icons: https://lucide.dev/icons/,
[超站]友情链接:
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
随时掌握互联网精彩
- 1 习近平的这些话振奋人心 4996089
- 2 美联储宣布降息50个基点 4927739
- 3 商户贴A4纸招聘信息被罚?城管回应 4818388
- 4 中秋假期出行人数超6.2亿人次 4710910
- 5 黎巴嫩新一轮爆炸事件已致20死 4629693
- 6 美联储降息如何影响A股? 4579893
- 7 中秋节后卖不完的月饼去哪了 4475043
- 8 台风“普拉桑”登陆点又变了 4348027
- 9 居民收300万“扶贫资金”?假 4214750
- 10 美联储四年来首次降息意味着什么 4199029