小程序引入icon的三种方式(原生图标、WeUI图标组件、iconfont图标)
原生图标
小程序里原生图标是通过icon标签来引入的:
<icon type="success" size="24" color="green" />
WeUI图标组件
WeUI 是一套同微信原生视觉体验一致的基础样式库,基于小程序自定义组件构建,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。要使用WeUI组件,我们需要到组件下载页面去下载icon组件。WeUI组件库
下载完成后我们会得到一个icon文件夹,里面有四个文件:icon.js, icon.json, icon.wxml,icon.wxss,我们在项目根目录下创建一个components文件夹,再将icon文件夹拷贝进去,然后在app.json中增加以下配置:
"usingComponents": {
"mp-icon": "components/icon/icon"
},
示例代码:
<!--WXML示例代码-->
<mp-icon type="field" icon="add" color="black" size="{{25}}"></mp-icon>
<mp-icon icon="add" color="black" size="{{25}}"></mp-icon>
效果图:
组件库里icon图标列表参考链接。
iconfont图标
从阿里的图标库下载需要的图标。
解压下载下来的download.zip文件,将其中的iconfont.css文件拷贝到小程序中,重命名为iconfont.wxss,打开iconfont.wxss文件:
由于小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为base64。打开Online @font-face generator 上传字体,选择base64编码,Convert后下载。
将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的iconfont.css文件中,替换@font-face。
打开app.wxss,在首行引入iconfont.wxss(./styles/iconfont.wxss为 文件的路径):
/**app.wxss**/
@import './styles/iconfont.wxss';
在视图文件中,我们通过以下方式显示图标:
<icon class="iconfont icon-shezhi" />
效果图: