选择你喜欢的标签
我们会为你匹配适合你的网址导航

    确认 跳过

    跳过将删除所有初始化信息

    您的位置:0XUCN > 资讯 > 技术
    新闻分类

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

    技术 PRO 作者:小熙宝宝 2024-07-11 16:56

    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/,

    0XU.CN

    [超站]友情链接:

    四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
    关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/

    图库
    公众号 关注网络尖刀微信公众号
    随时掌握互联网精彩
    赞助链接