unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南
前言
現(xiàn)如今, 項(xiàng)目中的小圖標(biāo)往往會使用 svg 的方式來做, 許多 svg 插件供我們選擇, 比如說 vite-plugin-svg-icons, 這個插件的使用的范圍是比較廣的, 但是就我使用下來而言, 發(fā)現(xiàn)幾個痛點(diǎn):
- 使用該插件之后必須要自己在新建一個 svg 的( vue/react )組件, 這有些繁瑣了;
- ts 支持有限, 我期望的是在使用組件的時(shí)候能夠智能提示所有的icon圖標(biāo)的名字;
- 不支持 tree-shaking , 未使用的圖標(biāo)依然會打包到最終的產(chǎn)物中;
- 不支持svg圖標(biāo)的hmr, 每次新增/刪除圖標(biāo)都需要重啟服務(wù);
- 有色 圖標(biāo)的使用問題。
而且, 似乎這個倉庫已經(jīng)不再維護(hù)了。
unplugin-svg-component
因此, 基于以上幾個痛點(diǎn), 我便鼓搗出unplugin-svg-component, 項(xiàng)目使用Anthony Fu大佬的unplugin項(xiàng)目模板, 因此支持 vite, webpack, rollup, esbuild 等多個打包工具, 目前插件主要針對幾個痛點(diǎn)做了以下功能:
- 根據(jù)項(xiàng)目類型 vue/react, 自動生成對應(yīng)的組件(這里的原理是檢測項(xiàng)目中的dependencies是否包含 vue/react, 這可能不準(zhǔn)確, 所以也支持手動配置);
- 會生成 svg-component.d.ts 文件, 用于組件使用過程中提示svg的名稱, 你只需要把 svg-component.d.ts引入到你的tsconfig.json當(dāng)中;
- 在生產(chǎn)環(huán)境下, 會掃描你使用過的 svg 圖標(biāo), 把未使用到的圖標(biāo)從你的最終產(chǎn)物中剔除;
- 目前支持在 Vite 的開發(fā)環(huán)境的 HMR, 其它工具會后續(xù)支持;
- 有色 的圖標(biāo)可以通過配置
preserveColor來決定哪些svg圖標(biāo)需要保留其顏色。
效果圖
Vue
React
結(jié)語
這個項(xiàng)目是我開源的第一個作品, 沒有宣傳, 也陸陸續(xù)續(xù)有人star, 這讓我有了堅(jiān)持下去的動力, 如果有同學(xué)有 svg 圖標(biāo)使用這方面的需求, 不妨試試這個插件, 希望能幫助到你，更多關(guān)于unplugin-svg-component圖標(biāo)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式
這篇文章主要介紹了el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
mpvue實(shí)現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動
這篇文章主要為大家詳細(xì)介紹了mpvue實(shí)現(xiàn)左側(cè)導(dǎo)航與右側(cè)內(nèi)容的聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
今天小編就為大家分享一篇element-ui 設(shè)置菜單欄展開的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁面空白區(qū)域也隱藏效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要給大家介紹了關(guān)于vue滾動條滾動到頂部或者底部的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
Effect幾乎是Vue3.0中最重要的一個功能了,計(jì)算屬性監(jiān)聽函數(shù)都是基于effect實(shí)現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3中effect函數(shù)到底是什么的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue多次打包后出現(xiàn)瀏覽器緩存的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
el-table表格動態(tài)合并行及合并行列實(shí)例詳解
在使用el-table的時(shí)候經(jīng)常會涉及到表格的列合并，包括表格操作列的合并,下面這篇文章主要給大家介紹了關(guān)于el-table表格動態(tài)合并行及合并行列的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
解決vue create 創(chuàng)建項(xiàng)目只有兩個文件問題
這篇文章主要介紹了解決vue create 創(chuàng)建項(xiàng)目只有兩個文件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了一個手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08