unplugin-svg-component優(yōu)雅使用svg圖標指南
更新時間：2023年03月13日 08:48:10 作者：Jevon617
這篇文章主要為大家介紹了unplugin-svg-component優(yōu)雅使用svg圖標指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
前言
現(xiàn)如今, 項目中的小圖標往往會使用 svg 的方式來做, 許多 svg 插件供我們選擇, 比如說 vite-plugin-svg-icons, 這個插件的使用的范圍是比較廣的, 但是就我使用下來而言, 發(fā)現(xiàn)幾個痛點:
- 使用該插件之后必須要自己在新建一個 svg 的( vue/react )組件, 這有些繁瑣了;
- ts 支持有限, 我期望的是在使用組件的時候能夠智能提示所有的icon圖標的名字;
- 不支持 tree-shaking , 未使用的圖標依然會打包到最終的產(chǎn)物中;
- 不支持svg圖標的hmr, 每次新增/刪除圖標都需要重啟服務;
- 有色 圖標的使用問題。
而且, 似乎這個倉庫已經(jīng)不再維護了。
unplugin-svg-component
因此, 基于以上幾個痛點, 我便鼓搗出unplugin-svg-component, 項目使用Anthony Fu大佬的unplugin項目模板, 因此支持 vite, webpack, rollup, esbuild 等多個打包工具, 目前插件主要針對幾個痛點做了以下功能:
- 根據(jù)項目類型 vue/react, 自動生成對應的組件(這里的原理是檢測項目中的dependencies是否包含 vue/react, 這可能不準確, 所以也支持手動配置);
- 會生成 svg-component.d.ts 文件, 用于組件使用過程中提示svg的名稱, 你只需要把 svg-component.d.ts引入到你的tsconfig.json當中;
- 在生產(chǎn)環(huán)境下, 會掃描你使用過的 svg 圖標, 把未使用到的圖標從你的最終產(chǎn)物中剔除;
- 目前支持在 Vite 的開發(fā)環(huán)境的 HMR, 其它工具會后續(xù)支持;
- 有色 的圖標可以通過配置
preserveColor來決定哪些svg圖標需要保留其顏色。
效果圖
Vue
React
結語
這個項目是我開源的第一個作品, 沒有宣傳, 也陸陸續(xù)續(xù)有人star, 這讓我有了堅持下去的動力, 如果有同學有 svg 圖標使用這方面的需求, 不妨試試這個插件, 希望能幫助到你，更多關于unplugin-svg-component圖標的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue調(diào)用手機相機及上傳，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
前端vue項目如何使用Decimal.js做加減乘除求余運算
decimal.js是使用的二進制來計算的,可以更好地實現(xiàn)格化式數(shù)學運算,對數(shù)字進行高精度處理,使用decimal類型處理數(shù)據(jù)可以保證數(shù)據(jù)計算更為精確,這篇文章主要給大家介紹了關于前端vue項目如何使用Decimal.js做加減乘除求余運算的相關資料,需要的朋友可以參考下2024-05-05
利用vue對比兩組數(shù)據(jù)差異的可視化組件詳解
這篇文章主要給大家介紹了關于利用vue對比兩組數(shù)據(jù)差異的可視化組件的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
electron-vue中報錯Cannot?use?import?statement?outside?a?m
Electron 是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程序的框架,下面這篇文章主要給大家介紹了關于electron-vue中報錯Cannot?use?import?statement?outside?a?module的解決方案,需要的朋友可以參考下2023-02-02
今天小編就為大家分享一篇Vue.js點擊切換按鈕改變內(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感興趣的同學，可以參考下2021-05-05
vue實現(xiàn)element表格里表頭信息提示功能(推薦)
小編最近接了這樣一個需求，需要在element表格操作一欄添加提示功能，下面小編給大家?guī)砹嘶趘ue實現(xiàn)element表格里表頭信息提示功能，需要的朋友參考下吧2019-11-11
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)一個漂亮、靈活、可復用的提示組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03