mui增加icon彩色图标

使用iconfont添加彩色图标教程

最新推荐文章于 2025-09-11 03:57:32 发布

原创

最新推荐文章于 2025-09-11 03:57:32 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何在项目中引入阿里巴巴矢量图标，并详细步骤演示了如何将图标设置为彩色，包括引入iconfont.js，修改icon样式以及在页面中添加彩色图标的方法，最后展示了实施效果。

下载阿里巴巴矢量图标操作见上一篇文章哦

https://blog.youkuaiyun.com/ChibiMarukoChan/article/details/82588849

第一步：引入iconfont.js

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

第二步：在页面修改icon的样式，如下：

<style>
.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>

第三步：在需要图标的地方引入图标字体：

（1）非彩色图标的写法

  <span class="mui-icon mui-icon-weixin"></span>

（2）彩色图标的写法

<span class="mui-icon">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
    </svg>
</span>
<span class="mui-icon">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-QQ"></use>
    </svg>
</spa