unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南
前言
現(xiàn)如今, 項(xiàng)目中的小圖標(biāo)往往會(huì)使用 svg 的方式來(lái)做, 許多 svg 插件供我們選擇, 比如說 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)的使用問題。
而且, 似乎這個(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 文件, 用于組件使用過程中提示svg的名稱, 你只需要把 svg-component.d.ts引入到你的tsconfig.json當(dāng)中;
- 在生產(chǎn)環(huán)境下, 會(huì)掃描你使用過的 svg 圖標(biāo), 把未使用到的圖標(biāo)從你的最終產(chǎn)物中剔除;
- 目前支持在 Vite 的開發(fā)環(huán)境的 HMR, 其它工具會(huì)后續(xù)支持;
- 有色 的圖標(biāo)可以通過配置
preserveColor來(lái)決定哪些svg圖標(biāo)需要保留其顏色。
效果圖
Vue
React
結(jié)語(yǔ)
這個(gè)項(xiàng)目是我開源的第一個(gè)作品, 沒有宣傳, 也陸陸續(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)文章
詳解Vue調(diào)用手機(jī)相機(jī)和相冊(cè)以及上傳
這篇文章主要介紹了Vue調(diào)用手機(jī)相機(jī)及上傳，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算
decimal.js是使用的二進(jìn)制來(lái)計(jì)算的,可以更好地實(shí)現(xiàn)格化式數(shù)學(xué)運(yùn)算,對(duì)數(shù)字進(jìn)行高精度處理,使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計(jì)算更為精確,這篇文章主要給大家介紹了關(guān)于前端vue項(xiàng)目如何使用Decimal.js做加減乘除求余運(yùn)算的相關(guān)資料,需要的朋友可以參考下2024-05-05
利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對(duì)比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?m
Electron 是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報(bào)錯(cuò)Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
解決Vue項(xiàng)目中Emitted value instead of an
這篇文章主要介紹了解決Vue項(xiàng)目中Emitted value instead of an instance of Error問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
解決vue安裝less報(bào)錯(cuò)Failed to compile with 1 errors的問題
這篇文章主要介紹了解決vue安裝less報(bào)錯(cuò)Failed to compile with 1 errors的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10
如何處理vue router 路由傳參刷新頁(yè)面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁(yè)面參數(shù)丟失，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
vue實(shí)現(xiàn)element表格里表頭信息提示功能(推薦)
小編最近接了這樣一個(gè)需求，需要在element表格操作一欄添加提示功能，下面小編給大家?guī)?lái)了基于vue實(shí)現(xiàn)element表格里表頭信息提示功能，需要的朋友參考下吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03