[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实现底部选项卡

动态修改图标