前言
现如今移动设备分辨率不胜枚举, 传统的标量图标要分别导出 1 倍图, 2 倍图, 3 倍图等以适应高分辩率设备. 这无疑大大增加了设计师和客户端开发的工作量. 矢量图以其无损缩放的优点, 在图标方面有着极大的优势.
Iconfont https://www.iconfont.cn 是由阿里推出, 功能强大且图标内容很丰富的矢量图标库, 提供矢量图标下载, 在线存储, 格式转换等功能, 几乎国内成了矢量图标库的事实标准.
每个 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 中.
下载 at.alicdn.com/t/font_883452_bqb4vsc7km8.CSS 至 /iconfont.wxss, 并在 App.wxss 中引入
@import "/iconfont.wxss";
在 .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 组件的字体大小, 下一篇文章我们会讨论这个话题, 在这之前, 你可以使用 https://github.com/IdanLoo/minapp-iconfont 获得完整的特性.
关注我, 不仅仅是小程序.
来源: https://juejin.im/post/5c47ee8fe51d453a86054020