小程序Icon图标的几种实现方案

小程序原生提供的Icon组件

Icon组件官网

属性

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的颜色，同css的colo

说明

组件size属性的长度单位默认为px，从版本[2.4.0]起支持传入单位(rpx/px)

1. PX 数值类型，默认使用，什么单位都不填，只写一个数值就可以
2. RPX（Responsive Pixel）屏幕自适应单位，他将屏幕分为750个单位，每个单位是1/750。

比方说：iphone6的屏幕宽度是350px，每个rpx就是0.5px。也就是说如果我们在iphone6机器上将size的值设置为60rpx，他与设置为30或者30px的效果是一样的。

组件color属性是改变图标所有像素点的颜色

常见问题

•  图标与文本能否放在同一行中？

可以的，图标本身就是为了更好的布局和更方便使用而诞生的。代码如下：

<view style="font-size: 17px;margin-top: 20px;">
    我是一行文字，<icon type="success" size="15"></icon>我里面包含了图标！
</view>

•  有时候真机上Icon显示空白？

首先此问题肯定不是由于字体文件链接没有加入小程序的安全域名，WXSS加载图片及字体允许外域！如果图标是自定义实现的，要检查一下机型及嵌入的字体文件类型，可能是兼容性引起的，在小程序中推荐使用TTF和WOFF格式的字体。如果使用的是这两种字体，情况依然存在，可以考虑换SVG格式的数据嵌入。

• weui组件库里的icon组件的图标如何取出来，保存在本地？

直接可以打开weui官网，然后通过浏览器开发者工具查看源码，找到资源地址然后下载。或者在微信的官方文档上下载。

优点

开箱即用。