Icon

A font based icon set that includes icons from most common scenarios. It is easy to use and can be used out of the box, without the need to write the style of each icon yourself. Simply configure it. Support custom (including nvue) text and image icons.

Platform compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

Call through the form of <wu-icon> and set the name parameter to the icon name. Where color defaults to #606266 and size defaults to 16px

vue

<wu-icon name="photo"></wu-icon>

<wu-icon name="photo"></wu-icon>

Modifying the Style of Icons

Modify the color of the icon through the color parameter
Modify the size of the icon using the size parameter, in px

vue

<wu-icon name="photo" color="# 2979ff" size="28"></wu-icon>

<wu-icon name="photo" color="# 2979ff" size="28"></wu-icon>

Picture icon

The image icon mentioned here refers to a small icon that functions as an "icon" icon, rather than a large-sized image to display the scene. In theory, this small icon should be a square icon in the format of png.

Usage: Pass in an image link to the name parameter of the component to display the font icon. The link rule is based on the / slash or base64 image address, and the size parameter is also set to the width of the image icon. Since it is an image, parameters such as color will become invalid.

vue

<!-- Online address-->
<wu-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></wu-icon>
<!-- Base64 address icon, for demonstration only -->
<wu-icon size="40" name="data: image/png; base64,..."></wu-icon>

<!-- Online address-->
<wu-icon size="40" name="https://via.placeholder.com/50x50.png/3c9cff/fff"></wu-icon>
<!-- Base64 address icon, for demonstration only -->
<wu-icon size="40" name="data: image/png; base64,..."></wu-icon>

Custom Icon

For details, please refer to Custom Icon Library

API

Icon Props

Property Name	Description	Type	Default Value	Optional Value
name	Icon name. If it contains `/` or follows the `base64` image format, it will be considered as an image icon, and the related attributes of the text icon will be invalidated	String	-	-
color	Icon color, can receive theme colors: color="primary"	String	#606266	-
size	Icon font size, in px (rpx)	String/Number	16px	-
bold	Whether to display bold	Boolean	false	true/false
index	A value used to distinguish multiple icons, which is passed out through the `click` event when clicking on an icon	String/Number	-	-
hoverClass	The style class for pressing down the icon, with the same usage as the hover class parameter in the view component of Uni. For details, please refer to: hover class	String	-	-
customPrefix	When customizing a font icon library, this value needs to be written. Please refer to Custom Icon Library	Boolean	false	true/false
label	The label text of the icon	String/Number	-	-
labelPos	`label` Position relative to icon	String	right	top/bottom/left/right
labelSize	`label` Font size, in px (rpx)	String/Number	15px	-
labelColor	`label` Font Color	String	#606266	-
space	`label` The distance from the icon, in px (rpx)	String/Number	3px	-
imgMode	The mode of the `image` component, see: image	String/Number	3px	-
width	name is the width of the image path, in px (rpx)	String/Number	-	-
height	name is the height of the image when it is in the image path, in px (rpx)	String/Number	-	-
top	The positioning of icons in the vertical direction is used to solve certain situations, where the purpose unit px (rpx)	String/Number	0	-
stop	Whether to block event propagation	Boolean	false	true/false

Icon Events

Event Name	Description	Callback Parameters
click	Trigger when clicking on the icon	index: The `index` value passed through `props`

Icon collection (click icon to obtain icon code)

level

download

reload

scan

calendar

bag

checkbox-mark

attach

wifi-off

woman

man

chat

chat-fill

red-packet

folder

order

arrow-up-fill

arrow-down-fill

backspace

photo

photo-fill

lock

lock-fill

lock-open

lock-opened-fill

home

home-fill

star

star-fill

share-fill

share-square

volume

volume-fill

volume-off

volume-off-fill

trash

trash-fill

shopping-cart

shopping-cart-fill

question-circle

question-circle-fill

plus

plus-circle

plus-circle-fill

Icon ​

Platform compatibility ​

Basic usage ​

Modifying the Style of Icons ​

Picture icon ​

Custom Icon ​

API ​

Icon Props ​

Icon Events ​

Icon collection (click icon to obtain icon code) ​