【愚公系列】2022年08月微信小程序

2024-07-16 20:13| 来源: 网络整理| 查看: 265

文章目录前言一、自带图标二、实现图标的五种方案1.图片2.精灵图3.CSS绘图4.矢量字体4.1 使用步骤 5.SVG格式

前言

在小程序中经常会用到各种各样的图标，如果这些图标都使用图片的话，将会大大增加小程序打包后的体积，而小程序限制代码最大2MB，分包加载4MB，所以为了缩小体积，我们可以使用图标来缩小体积。

使用图标有两种方式：

自带图标外部图标（图片、精灵图、CSS绘图、矢量字体、SVG格式）

自带图标组件属性说明：

属性类型默认值必填说明最低版本typestring是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0sizenumber/string23否icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。1.0.0colorstring否icon的颜色，同css的color1.0.0 一、自带图标 Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear' ] } })

【本文地址】

公司简介

联系我们

【愚公系列】2022年08月 微信小程序

【愚公系列】2022年08月微信小程序