Lucide：一个高颜值的矢量图标库

声明：该文章由作者（小熙宝宝）发表，转载此文章须经作者同意并请附上出处(0XUCN)及本页链接。。

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/