Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
图标类型typestring

选择图标的类型

默认值："inner"

图标样式namestring

选择预置图标

示例："success"

自定义图标srcstring

设置自定义图标地址

图标尺寸sizestring

设置图标的尺寸大小

默认值："md"

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端

-

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
图标类型typestring

选择图标的类型

图标样式namestring

选择预置图标

自定义图标srcstring

设置自定义图标地址

图标尺寸sizestring

设置图标的尺寸大小

Method API​

无

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-icon图标组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-icon {
  /* 在这里编写CSS 样式 */
}
PC 端图标根元素.wd-pc-icon可以为 PC 端的图标编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-icon {
  /* 在这里编写CSS 样式 */
}
H5 端图标根元素.wd-h5-icon可以为 H5 端的图标编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-icon {
  /* 在这里编写CSS 样式 */
}
小程序端图标根元素.wd-mp-icon可以为小程序端的图标编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-icon {
  /* 在这里编写CSS 样式 */
}

了解样式 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).