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