聲明：該文章由作者（小熙寶寶）發(fā)表，轉(zhuǎn)載此文章須經(jīng)作者同意并請附上出處(0XUCN)及本頁鏈接。。

Lucide[1]?是一套開源的高顏值矢量圖標(biāo)庫，目前包含 1472 個 SVG 圖標(biāo)。

Lucide 的作者是?Eric Fennis[2]，F(xiàn)ork 自另一個開源圖標(biāo)庫?Feather Icons[3]。Feather Icons 當(dāng)前的圖標(biāo)數(shù)量是 287 個。

Lucide 的優(yōu)點(diǎn)包括：

顏值高，風(fēng)格干凈統(tǒng)一顏色、尺寸、線寬等均可自定義通過 npm 包分發(fā)，使用方便使用 ES 模塊，支持?Tree-Shaking，占用體積小支持的前端框架多，包括但不限于 Vue 2/3，React，Svelte 等市面流行框架

我們以 Vue 3 為例，看看如何在項(xiàng)目中使用 Lucide 圖標(biāo)。

安裝

$?pnpm?add?lucide-vue-next

引入圖標(biāo)

每個圖標(biāo)都是一個組件，支持?color、size?等屬性。

<!--?App.vue?--><template>??<Camera?color="#999"?:size="144"?/></template><script?setup>import?{?Camera?}?from?'lucide-vue-next'</script>

渲染結(jié)果是一個單純的 SVG 元素：

渲染結(jié)果

Lucide 圖標(biāo)組件的默認(rèn)顏色是?currentColor[4]，若不明確設(shè)置，它會繼承父容器的顏色。

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

渲染結(jié)果：

圖標(biāo)默認(rèn)繼承父容器的顏色

搜索圖標(biāo)

在?Icons[5]?頁面可以搜索圖標(biāo)。

搜索圖標(biāo)

點(diǎn)擊圖標(biāo)出現(xiàn)底部彈框：

圖標(biāo)的吸底彈框

點(diǎn)擊彈框中的?See in action?按鈕，查看在不同框架的實(shí)際使用代碼：

查看示例代碼參考資料

[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/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級服務(wù)市場：https://www.ijiandao.com/