Skip to main content
Supported Regions:上海

Icon

WdIcon

Applicable Scenarios​

You can achieve the icon display effect by selecting preset icons in the configuration area of the icon component. Additionally, the icon component supports users in uploading custom icons.

Basic Capabilities Description​

  1. Basic properties of icons support selecting icon type (preset icons & custom icons) and icon size (providing five recommended sizes for selection).

Extended Scenarios Description​

How to Modify Preset Icon Color and Size via the Style Panel​

Example

Quickly Modify Preset Icon Color and Size via the Style Panel

Configuration Method

Add an icon component, open the style panel, select a color in the font section, and enter a value in the font size field:

Note: The size and color of preset icons follow the font configuration.

Example​

Interactive Preview​

All Icons​

Different Sizes of Icons​

Custom Icons​

Style API Custom Styles​

#wd-page-root .wd-icon {
  border-color: cyan;
  background-color: black;
  border-width: 2px;
  border-radius: 6px;
}

#wd-page-root .wd-icon:hover {
  background-color: #0c0096;
}

#wd-page-root .wd-icon {
  color: cyan;
}

CSS Variables Custom Styles​

/* By overriding css variables, the icon size can be redefined. */
#wd-page-root .wd-icon {
  --wd-icon-size-xs: 1.25rem;
  --wd-icon-size-sm: 1.5rem;
  --wd-icon-size-md: 2rem;
  --wd-icon-size-lg: 3rem;
  --wd-icon-size-xl: 4rem;
}

Properties​

External properties received by the component

Property Name
Property Identifier
Type
Description
图标类型typestring

选择图标的类型

Default value: "inner"

图标样式namestring

选择预置图标

Example: "success"

自定义图标srcstring

设置自定义图标地址

图标尺寸sizestring

设置图标的尺寸大小

Default value: "md"

Events​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
点击tapCompatible with all platforms

-

Property API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
图标类型typestring

选择图标的类型

图标样式namestring

选择预置图标

自定义图标srcstring

设置自定义图标地址

图标尺寸sizestring

设置图标的尺寸大小

Method API​

None

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
根元素.wd-icon图标组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-icon {
  /* Write CSS styles here */
}
PC 端图标根元素.wd-pc-icon可以为 PC 端的图标编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-icon {
  /* Write CSS styles here */
}
H5 端图标根元素.wd-h5-icon可以为 H5 端的图标编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-icon {
  /* Write CSS styles here */
}
小程序端图标根元素.wd-mp-icon可以为小程序端的图标编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-icon {
  /* Write CSS styles here */
}

Learn about Style API

CSS Variables​

.wd-icon {
  /* 16px */
  --wd-icon-size-xs: 1rem;
  /* 20px */
  --wd-icon-size-sm: 1.25rem;
  /* 24px */
  --wd-icon-size-md: 1.5rem;
  /* 32px */
  --wd-icon-size-lg: 2rem;
  /* 48px */
  --wd-icon-size-xl: 3rem;
}

Version Changes​

Compared to the old version icon

  • The color configuration in the attribute area for icons has been removed. It can now be configured via the font color setting in the style panel (the color values previously configured for icons will be retained).
  • The original icon's size configuration via numerical input has been replaced with a size-options dropdown (the previously configured size is retained).