[mui]自定義矢量圖標（css方式、js方式）、動態修改矢量圖標、修改mui底部選項卡模版

自定義矢量圖標

mui中自定義使用自定義圖標的方式主要有兩種：

1. 通過爲span添加mui-icon類，在通過iconfont繪製圖標，此種方法優點是簡便，可自定義顏色；缺點是隻能單一顏色，無法繪製多彩圖標

2. 通過使用svg、use標籤，結合symbol標籤將圖標一個像素一個像素繪製出來，iconfont.js裏面就是一堆的座標（如下圖）。此種方法的優點是可以使用彩色圖標

css方式

詳細步驟見：mui如何增加自定義icon圖標
需要的文件實際上只有兩個：iconfont.ttf和iconfont.css
使用前需要將css文件的第一個標籤進行修改成如下例子即可。

主要就是注意url指向的本地ttf文件路徑是否正確

    @font-face {font-family: "iconfont";  
        src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
    }  

    .iconfont {  
        font-family:"iconfont" !important;  
        font-size:16px;  
        font-style:normal;  
        -webkit-font-smoothing: antialiased;  
        -webkit-text-stroke-width: 0.2px;  
    }  

    .icon-nanzhuang:before { content: "\e600"; }  

    .icon-nvzhuang:before { content: "\e601"; }  

    .icon-gouwuche:before { content: "\e602"; }  

js方式

需要的文件實際上只有：iconfont.js
使用時，只需要對應頁面引入js文件即可，調用方式入下。

<svg class="mui-icon icon" aria-hidden="true">
	<use xlink:href="#icon-home"></use>
</svg>

use標籤的xlink:href的值應爲’#icon-’ + 阿里圖標庫中的symbol值

動態修改圖標

css方式的修改

修改對應的class名即可

添加：節點.classList.add("類名")；

刪除：節點.classList.remove("類名")；

js方式的修改

設置use標籤的’xlink:href’的值即可

document.getElementsByTagName('use')[0].setAttribute('xlink:href', '#icon-'home )

修改mui底部選項卡模版

圖標改圖片

採用非原生純html實現底部選項卡

動態修改圖標