MUI实现自定义图标-蒲公英云

MUI实现自定义图标

引言

在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发，可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发，所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。

MUI自带的图标

传送门：https://dev.dcloud.net.cn/mui/ui/#icon

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70

实现效果

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 1

由上可知，要想使用MUI自带图标是无法实现这种效果的，所以我们得自己动手了。

使用阿里矢量图拓展图标

步骤1：到阿里矢量图挑选喜欢的图标并加如购物车

传送门：https://www.iconfont.cn/

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 2

步骤2：从购物车了下载代码

步骤3：解压并打开demo_index.html，里面介绍了三种引入图标的方式

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3cUJyZWxs_size_16_color_FFFFFF_t_70 3

步骤4：选择其中一种方式，并把需要的资源导入到自己的项目中，笔者希望图标是有颜色的，所以用Symbol

4.1：引入项目下面生成的 symbol 代码：

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

4.2：加入通用 CSS 代码（引入一次就行）：

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

4.3：挑选相应图标并获取类名，应用于页面：

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

到此，我们就成功的引入图标了，之后可以使用CSS来控制图标的大小等，下面我们来看一个小案例

案例源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
        <script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
        <style type="text/css">
            .icon {
                width: 1.5em;
                height: 1.5em;
                vertical-align: -0.4em;
                overflow: hidden;
            }
            .my-icon {
                float: left;
                width: 20%;
                text-align: center;
                background: white;
                padding-top: 10px;
            }
            .top-icon {
                margin-top: 10px;
            }
            .mui-bar-nav {
                background: linear-gradient(to right, #ff8370, #ff5151);
            }
            .mui-title{
                color: white;
            }
            .mui-active > .icon-title {
                color: red !important;
            }
            .icon-title {
                margin-bottom: 0;
                font-size: 0.5em;
            }
            .mui-tab-item{
                padding-top: 5px;
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">自定义图标</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <p class="icon-title">首页</p>
            </a>
            <a class="mui-tab-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <p class="icon-title">搜索</p>
            </a>
            <a class="mui-tab-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing1"></use>
                </svg>
                <p class="icon-title">推荐</p>
            </a>
            <a class="mui-tab-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <p class="icon-title">我的</p>
            </a>
        </nav>
        <div class="mui-content">
            <div class="top-icon">
                <div class="my-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-apple-and-pear"></use>
                    </svg>
                    <p>美食</p>
                </div>
                <div class="my-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nanzhuang"></use>
                    </svg>
                    <p>男装</p>
                </div>
                <div class="my-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-meizhuang"></use>
                    </svg>
                    <p>美妆</p>
                </div>
                <div class="my-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-nvzhuang"></use>
                    </svg>
                    <p>女装</p>
                </div>
                <div class="my-icon">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-canju"></use>
                    </svg>
                    <p>母婴</p>
                </div>
            </div>
        </div>
    </body>
</html>