<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多色图标</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<style>
			.icon {
				width: 2em;
				height: 2em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
			
			p,
			ul li {
				font-size: 12px !important;
			}
		</style>
		<link rel="stylesheet" href="css/mui.min.css">
	</head>

	<body>
		<div class="mui-content-padded">
			<p style="text-indent: 22px;">多彩图标 Symbol 引用</p>
			<p style="text-indent: 22px;">这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
				<ul>
					<li>支持多色图标了，不再受单色限制。</li>
					<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
					<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
					<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
				</ul>
			</p>
			<p style="text-indent: 22px;">
				阿里巴巴矢量图标库:
				<a href="https://www.iconfont.cn">https://www.iconfont.cn</a>
			</p>
			<p style="text-indent: 22px;">
				参考文档:
				<a href="https://ask.dcloud.net.cn/article/12641">https://ask.dcloud.net.cn/article/12641</a>
				<p style="text-indent: 22px;">参考文档:
					<a href="https://ask.dcloud.net.cn/article/128">https://ask.dcloud.net.cn/article/128</a>
				</p>
		</div>
		<div class="mui-content">
			<div id="Gallery" class="mui-slider" style="margin-top:15px;">
				<div class="mui-slider-group">
					<div class="mui-slider-item">
						<ul class="mui-table-view mui-grid-view mui-grid-9">

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji"></use>
									</svg>
									<div class="mui-media-body">统计</div>
									<div class="mui-media-body">#icon-tongji</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-lingqu-copy"></use>
									</svg>
									<div class="mui-media-body">领取</div>
									<div class="mui-media-body">#icon-lingqu-copy</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong1"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-qia"></use>
									</svg>
									<div class="mui-media-body">卡</div>
									<div class="mui-media-body">#icon-qia</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji-copy"></use>
									</svg>
									<div class="mui-media-body">统计</div>
									<div class="mui-media-body">#icon-tongji-copy</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji1"></use>
									</svg>
									<div class="mui-media-body">统计</div>
									<div class="mui-media-body">#icon-tongji1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-lingqu"></use>
									</svg>
									<div class="mui-media-body">领取</div>
									<div class="mui-media-body">#icon-lingqu</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-renyuanguanli"></use>
									</svg>
									<div class="mui-media-body">人员管理</div>
									<div class="mui-media-body">#icon-renyuanguanli</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-zgxx"></use>
									</svg>
									<div class="mui-media-body">办公室</div>
									<div class="mui-media-body">#icon-zgxx</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-lingqu1"></use>
									</svg>
									<div class="mui-media-body">领取</div>
									<div class="mui-media-body">#icon-lingqu1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangongshi"></use>
									</svg>
									<div class="mui-media-body">办公室</div>
									<div class="mui-media-body">#icon-bangongshi</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-mimaxiugai"></use>
									</svg>
									<div class="mui-media-body">密码修改</div>
									<div class="mui-media-body">#icon-mimaxiugai</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-Group"></use>
									</svg>
									<div class="mui-media-body">人员管理</div>
									<div class="mui-media-body">#icon-Group</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-zhuce"></use>
									</svg>
									<div class="mui-media-body">注册</div>
									<div class="mui-media-body">#icon-zhuce</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-chazhaobiaodanliebiao"></use>
									</svg>
									<div class="mui-media-body">查找 表单 列表</div>
									<div class="mui-media-body">#icon-chazhaobiaodanliebiao</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji2"></use>
									</svg>
									<div class="mui-media-body">统计</div>
									<div class="mui-media-body">#icon-tongji2</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-zhuce1"></use>
									</svg>
									<div class="mui-media-body">注册人数</div>
									<div class="mui-media-body">#icon-zhuce1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji3"></use>
									</svg>
									<div class="mui-media-body">统计</div>
									<div class="mui-media-body">#icon-tongji3</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-wentijieda"></use>
									</svg>
									<div class="mui-media-body">问题解答</div>
									<div class="mui-media-body">#icon-wentijieda</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong2"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong2</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-gongzuopingtai_dianji"></use>
									</svg>
									<div class="mui-media-body">工作平台_点击</div>
									<div class="mui-media-body">#icon-gongzuopingtai_dianji</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong3"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong3</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-lingqu2"></use>
									</svg>
									<div class="mui-media-body">领取</div>
									<div class="mui-media-body">#icon-lingqu2</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-tongji4"></use>
									</svg>
									<div class="mui-media-body">统计</div>
									<div class="mui-media-body">#icon-tongji4</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-yemian-copy"></use>
									</svg>
									<div class="mui-media-body">首页-选中</div>
									<div class="mui-media-body">#icon-yemian-copy</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-wentijieda1"></use>
									</svg>
									<div class="mui-media-body">问题解答</div>
									<div class="mui-media-body">#icon-wentijieda1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong4"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong4</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-wentizixun"></use>
									</svg>
									<div class="mui-media-body">问题咨询</div>
									<div class="mui-media-body">#icon-wentizixun</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-quanweixinggao"></use>
									</svg>
									<div class="mui-media-body">权威性高</div>
									<div class="mui-media-body">#icon-quanweixinggao</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-yemian"></use>
									</svg>
									<div class="mui-media-body">首页-选中</div>
									<div class="mui-media-body">#icon-yemian</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangongshi1"></use>
									</svg>
									<div class="mui-media-body">办公室</div>
									<div class="mui-media-body">#icon-bangongshi1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong5"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong5</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-index"></use>
									</svg>
									<div class="mui-media-body">首页-选中</div>
									<div class="mui-media-body">#icon-index</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-wentizixun1"></use>
									</svg>
									<div class="mui-media-body">问题咨询</div>
									<div class="mui-media-body">#icon-wentizixun1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-mimaxiugai1"></use>
									</svg>
									<div class="mui-media-body">密码修改</div>
									<div class="mui-media-body">#icon-mimaxiugai1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-zhuce2"></use>
									</svg>
									<div class="mui-media-body">注册</div>
									<div class="mui-media-body">#icon-zhuce2</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-zhuanyequanwei"></use>
									</svg>
									<div class="mui-media-body">专业权威</div>
									<div class="mui-media-body">#icon-zhuanyequanwei</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-ziyuan"></use>
									</svg>
									<div class="mui-media-body">卡</div>
									<div class="mui-media-body">#icon-ziyuan</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-wentijieda2"></use>
									</svg>
									<div class="mui-media-body">问题解答</div>
									<div class="mui-media-body">#icon-wentijieda2</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong6"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong6</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong7"></use>
									</svg>
									<div class="mui-media-body">政务-办公</div>
									<div class="mui-media-body">#icon-bangong7</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-ico"></use>
									</svg>
									<div class="mui-media-body">二维码</div>
									<div class="mui-media-body">#icon-ico</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-ka"></use>
									</svg>
									<div class="mui-media-body">卡</div>
									<div class="mui-media-body">#icon-ka</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-bangong8"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-bangong8</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-lingqu3"></use>
									</svg>
									<div class="mui-media-body">领取</div>
									<div class="mui-media-body">#icon-lingqu3</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-zhuce3"></use>
									</svg>
									<div class="mui-media-body">注册</div>
									<div class="mui-media-body">#icon-zhuce3</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-yiqingguanli"></use>
									</svg>
									<div class="mui-media-body">疫情管理</div>
									<div class="mui-media-body">#icon-yiqingguanli</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-yewutubiao_OAbangong"></use>
									</svg>
									<div class="mui-media-body">办公</div>
									<div class="mui-media-body">#icon-yewutubiao_OAbangong</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-chazhaobiaodanliebiao1"></use>
									</svg>
									<div class="mui-media-body">查找 表单 列表</div>
									<div class="mui-media-body">#icon-chazhaobiaodanliebiao1</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-mimaxiugai2"></use>
									</svg>
									<div class="mui-media-body">密码修改</div>
									<div class="mui-media-body">#icon-mimaxiugai2</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-yiqingfuwu"></use>
									</svg>
									<div class="mui-media-body">疫情服务</div>
									<div class="mui-media-body">#icon-yiqingfuwu</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-yiqingfabu"></use>
									</svg>
									<div class="mui-media-body">疫情专栏</div>
									<div class="mui-media-body">#icon-yiqingfabu</div>
								</a>
							</li>

							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
								<a href="#">
									<svg class="icon svg-icon" aria-hidden="true">
										<use xlink:href="#icon-y-yiqingjianguan"></use>
									</svg>
									<div class="mui-media-body">y-疫情监管</div>
									<div class="mui-media-body">#icon-y-yiqingjianguan</div>
								</a>
							</li>
						</ul>
					</div>

				</div>
			</div>

	</body>
	<script src="js/iconfont.js"></script>

</html>