首先建立壹個js文件,引入圖標,做成字典的形式,再用 Vue 的插件功能註冊為全局變量。
這裏有兩種使用方式,壹種是簡單粗暴的全部圖標都註冊了,看了壹下node_modules裏面的文件,壹***二、三百KB,如果不太在意體積的話,可以全都弄進來。
如果使用的圖標不是很多,那麽可以只引入需要的圖標,這樣體積就小很多了。
在模板裏面使用動態組件,根據圖標名稱加載圖標,使用style設置大小和顏色,這樣就可以了。
幾個例子:
el-input 的 prefix-icon 屬性可以設置圖標,屬性類型是字符串或者組件,試了壹下字符串,沒有效果,大概需要在使用 el-input 的組件裏面註冊對應的圖標,這樣就不方便實現動態圖標了,或者全局註冊圖標。
既然我們做了全局註冊的字典,那麽屬性也可以用壹用。
這樣就可以統壹使用動態圖標了。