優(yōu)勢
iconify 最大的賣點(diǎn)：avoid vendor lock-in（避免廠商鎖定）。
大多數(shù)圖標(biāo)集都有自己的圖標(biāo)組件或帶有樣式表的字體。
而為了能夠盡可能靈活，iconify 選擇直接嵌入 svg 文件。
iconify 有官方的 api 和 compoent，但不強(qiáng)制使用，可以本體化部署及實(shí)現(xiàn)。
所以它本質(zhì)上還是一套龐大的 svg 圖標(biāo)庫，及其相關(guān)的社區(qū)支持。
如何開始？
- 程序員使用：瀏覽或搜索可用圖標(biāo)集，選擇任何圖標(biāo)，您將看到代碼示例。
- 設(shè)計(jì)師使用：Figma 和 Sketch 中有插件可用。其他平臺中，可以在圖標(biāo)集中復(fù)制/粘貼 SVG。
概念
圖標(biāo)名
為了使圖標(biāo)易于使用，無論其來源如何，所有圖標(biāo)都遵循相同的命名約定。
圖標(biāo)名可以使用 a-z、0-9、-。但不能使用連續(xù)的連字符，例： --。
圖標(biāo)顏色
圖標(biāo)有兩種類型：
- 硬編碼調(diào)色板圖標(biāo)：
- 單調(diào)圖標(biāo)：
前者不能改顏色，后者可以修改。
使用
在 css 中使用
?? 原理：
-
將 svg 設(shè)置為 background-image：
- ?? 推薦使用！
- 用 width 和 height 控制大小
- 用 color （background: currentColor） 來設(shè)置單色圖標(biāo)的顏色
將 svg 設(shè)置為偽元素的 content：
- ?? 不推薦使用
- 不能用 CSS 改寬高和顏色
- 使用公共 API，后接參數(shù)進(jìn)行設(shè)置（本質(zhì)上是修改了 svg）
?? 優(yōu)缺點(diǎn)：
- 優(yōu)點(diǎn)
- 沒有重復(fù)
- 沒有深 DOM 樹
- SVG 中的腳本不會被執(zhí)行
- 缺點(diǎn)
- 不能調(diào)整圖標(biāo)內(nèi)的元素
- CSS 會引入所有圖標(biāo)，不管你是否使用
-
??? 工具：
- Iconify API，通過接口獲取 svg 或 css 數(shù)據(jù)，可使用公共的也可自己部署
- TailwindCSS 中使用
- UnoCss 中使用
- Iconify Utils 生成 CSS，本質(zhì)是一個 Nodejs 的包，可以根據(jù)圖標(biāo)名獲取相關(guān)圖標(biāo)數(shù)據(jù)，然后用來生成本地的 CSS 文件
在 html 中使用
?? 原理：
原理？html 中本來就支持 <svg> 標(biāo)簽。
當(dāng)然，你也可以使用 <img> 或者 <picture> 標(biāo)簽，但沒法改顏色。
?? 優(yōu)缺點(diǎn)：
- 優(yōu)點(diǎn)
- 最大的自由度，可以改圖標(biāo)內(nèi)細(xì)節(jié)
- 缺點(diǎn)
- 每個圖標(biāo)有多個條目
- 深 DOM 樹，且體積大
- 安全問題：使用第三方 svg 里面可能有腳本
??? 工具：
- 組件
- Unplugin Icons：支持 Vue、React 等框架，示例
- Astro Icon
- 函數(shù)
- 不想寫代碼，那就在 官方圖標(biāo)集 或 Anthony Fu 的網(wǎng)站里直接找 SVG 復(fù)制來用吧
-
上圖即 @iconify/json 包 ant-design 圖標(biāo)數(shù)據(jù)，代表可在本地環(huán)境獲取圖標(biāo)。
打包時只會打使用到的圖標(biāo)，無需擔(dān)心體積問題
-
安裝并引入插件
然后各個框架中有不同的引入方式，這里貼個 Vite 的：
在頁面中引入并使用
?? 優(yōu)缺點(diǎn)：
- 優(yōu)點(diǎn)
- 用起來很簡單
- 尺寸小，因?yàn)榘葱杓虞d
- 可以多個可定制主題一起使用，而開發(fā)者無需關(guān)心哪些主題
- 圖標(biāo)只在瀏覽器加載，而非在服務(wù)器呈現(xiàn)
- 缺點(diǎn)
- 無法離線使用
- 圖標(biāo)不會立即渲染。雖然有緩存，但還是有幾毫秒延遲
??? iconify-icon（Web Component）：
官方組件 iconify-icon 是一個 Web Component。
雖然也有熱門框架的專用組件，但后續(xù)將停止維護(hù)。
暫無評論，快來評論吧!