阅读 1805

小程序点睛之二:小程序使用 Iconfont 的正确姿势

前言

现如今移动设备分辨率不胜枚举,传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点,在图标方面有着极大的优势。

Iconfont 是由阿里推出,功能强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,几乎国内成了矢量图标库的事实标准。

每个 Iconfont 项目都可以生成一个远程 .css 文件,下文以 //at.alicdn.com/t/font_883452_bqb4vsc7km8.css 为例。你可以查阅教程了解如何生成 .css 文件。

正常 Iconfont 的使用流程是在 HTML 的 head 标签中引入样式文件,然后通过类名调用图标

<html>
    <head>
        <link href="//at.alicdn.com/t/font_883452_bqb4vsc7km8.css" />
    </head>
    <body>
        <!-- 这是一个名为 plus 的 icon -->
        <i class="iconfont icon-plus"></i>
    </body>
</html>
复制代码

不幸的是小程序不支持引入外部 css 文件,为此我寻遍网络,竟没有找到 Iconfont 在小程序中的正确用法。

本文根据我在实践经验所得,是我目前能找到在小程序中使用 Iconfont 最简的方法。

引入

虽然小程序不支持引入外部样式表,但 .wxss 文件本质上就是 .css 文件,因此我们可以将 Iconfont 的样式表保存到本地的 .wxss 中。

  1. 下载 at.alicdn.com/t/font_883452_bqb4vsc7km8.css/iconfont.wxss,并在 app.wxss 中引入

    @import "/iconfont.wxss";
    复制代码
  2. .wxml 文件中使用

    <text class="iconfont icon-plus"></text>
    复制代码

现在应该可以在开发者工具中看到你想要的图标了。

解决了基本的使用问题之后,我们发现,由于小程序组件内部有独立的类作用域,因此在 app.wxss 中引入的 .iconfont.icon-plus 并不能在自定义组件内生效,所以你需要在所有需要用到 Iconfont 的组件内,分别引入 iconfont.wxss

组件化

如果你看过我之前的文章,应该知道我对冗余代码深恶痛绝。自定义组件就是解决重复引入的手段。

定义一个 iconfont 组件

  • iconfont.wxss

    引入下载好的 Iconfont 样式表

    @import "/iconfont.wxss"
    复制代码
  • iconfont.js

    声明组件参数

    Component({
      	properties: {
        	icon: String,
      	},
    })
    复制代码
  • iconfont.wxml

    <text class="iconfont icon-{{icon}}"></text>
    复制代码

外部调用

  • page.json

    引用组件

    {
        "usingComponents": {
            "iconfont": "path/to/iconfont"
        }
    }
    复制代码
  • page.wxml

    <iconfont icon="plus"></iconfont>
    复制代码

后记

现在你已经有了一个强大的组件,应付 Iconfont 上的任何项目应该都不在话下。但现在,你不能在外部控制 iconfont 组件的字体大小,下一篇文章我们会讨论这个话题,在这之前,你可以使用 minapp-iconfont 获得完整的特性。

关注我,不仅仅是小程序。

关注下面的标签,发现更多相似文章
评论