首先創建壹個js文件,引入圖標,做成字典,然後用Vue的插件功能註冊成全局變量。
有兩種使用方法。壹個是所有簡單粗暴的圖標都註冊了。看node_modules裏的文件,壹* * *兩三百KB。如果妳不太在乎大小,妳可以把它們都放進去。
如果妳用的圖標不多,可以只介紹妳需要的圖標,這樣體積就小很多。
在模板中使用動態組件,根據名稱加載圖標,用樣式設置大小和顏色,就這樣。
幾個例子:
El-input的prefix-icon屬性可以用圖標來設置,屬性類型是string或者component。試了壹下弦,不行。妳可能需要使用el-input在組件中註冊相應的圖標,所以不方便實現動態圖標或者全局註冊圖標。
既然我們做了壹個全局註冊的字典,屬性也可以用。
這樣就可以統壹使用動態圖標了。