unplugin-svg-component優(yōu)雅使用svg圖標(biāo)指南
前言
現(xiàn)如今, 項目中的小圖標(biāo)往往會使用 svg 的方式來做, 許多 svg 插件供我們選擇, 比如說 vite-plugin-svg-icons, 這個插件的使用的范圍是比較廣的, 但是就我使用下來而言, 發(fā)現(xiàn)幾個痛點(diǎn):
- 使用該插件之后必須要自己在新建一個 svg 的( vue/react )組件, 這有些繁瑣了;
- ts 支持有限, 我期望的是在使用組件的時候能夠智能提示所有的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, 項目使用Anthony Fu大佬的unplugin項目模板, 因此支持 vite, webpack, rollup, esbuild 等多個打包工具, 目前插件主要針對幾個痛點(diǎn)做了以下功能:
- 根據(jù)項目類型 vue/react, 自動生成對應(yī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é)語
這個項目是我開源的第一個作品, 沒有宣傳, 也陸陸續(xù)續(xù)有人star, 這讓我有了堅持下去的動力, 如果有同學(xué)有 svg 圖標(biāo)使用這方面的需求, 不妨試試這個插件, 希望能幫助到你，更多關(guān)于unplugin-svg-component圖標(biāo)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
詳解Vue調(diào)用手機(jī)相機(jī)和相冊以及上傳
這篇文章主要介紹了Vue調(diào)用手機(jī)相機(jī)及上傳，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
前端vue項目如何使用Decimal.js做加減乘除求余運(yùn)算
decimal.js是使用的二進(jìn)制來計算的,可以更好地實現(xiàn)格化式數(shù)學(xué)運(yùn)算,對數(shù)字進(jìn)行高精度處理,使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計算更為精確,這篇文章主要給大家介紹了關(guān)于前端vue項目如何使用Decimal.js做加減乘除求余運(yùn)算的相關(guān)資料,需要的朋友可以參考下2024-05-05
利用vue對比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關(guān)于利用vue對比兩組數(shù)據(jù)差異的可視化組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
electron-vue中報錯Cannot?use?import?statement?outside?a?m
Electron 是一個使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架,下面這篇文章主要給大家介紹了關(guān)于electron-vue中報錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實例講解
今天小編就為大家分享一篇Vue.js點(diǎn)擊切換按鈕改變內(nèi)容的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
解決Vue項目中Emitted value instead of an
這篇文章主要介紹了解決Vue項目中Emitted value instead of an instance of Error問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
解決vue安裝less報錯Failed to compile with 1 errors的問題
這篇文章主要介紹了解決vue安裝less報錯Failed to compile with 1 errors的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
如何處理vue router 路由傳參刷新頁面參數(shù)丟失
這篇文章主要介紹了如何處理vue router 路由傳參刷新頁面參數(shù)丟失，對vue感興趣的同學(xué)，可以參考下2021-05-05
vue實現(xiàn)element表格里表頭信息提示功能(推薦)
小編最近接了這樣一個需求，需要在element表格操作一欄添加提示功能，下面小編給大家?guī)砹嘶趘ue實現(xiàn)element表格里表頭信息提示功能，需要的朋友參考下吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03