图标
WdIcon
#
适用场景可以通过在图标组件的配置区中选择预置图标实现图标的展示效果,同时图标组件也支持用户对图标进行自定义的上传。
#
基础能力说明- 图标的基础属性支持选择图标类型(预置图标&自定义图标)、图标尺寸(提供五种推荐尺寸供选择)
#
扩展场景说明#
如何通过样式面板修改预置图标颜色、大小示例
通过样式面板快速修改预置图标颜色和大小
配置方法
添加一个图标组件,打开样式面板,字体中选择颜色,字号中输入数值:
注:预置图标的大小、颜色跟随字体的配置
#
示例#
交互式预览#
所有的图标#
不同大小的图标#
自定义图标#
样式 API 自定义样式#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 变量自定义样式/* 可通过重写css变量, 重新定义图标大小 */#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;}
#
属性组件接收的外部传入的属性
属性名 | 属性标识 | 类型 | 属性分组 | 默认值 | 说明 |
---|
图标类型 | type | "inner"|"custom" | 基础属性 | "inner" | 选择图标的类型 |
图标样式 | name | "td:add-circle"|"td:add-rectangle"|"td:add"|"td:app"|"td:arrow-down-rectangle"|"td:arrow-down"|"td:arrow-left"|"td:arrow-right"|"td:arrow-up"|"td:attach"|"td:backtop-rectangle"|"td:backtop"|"td:backward"|"td:barcode"|"td:books"|"td:browse-off"|"td:browse"|"td:bulletpoint"|"td:calendar"|"td:call"|"td:caret-down-small"|"td:caret-down"|"td:caret-left-small"|"td:caret-left"|"td:caret-right-small"|"td:caret-right"|"td:caret-up-small"|"td:caret-up"|"td:cart"|"td:chart-bar"|"td:chart-bubble"|"td:chart-pie"|"td:chart"|"td:chat"|"td:check-circle-filled"|"td:check-circle"|"td:check-rectangle-filled"|"td:check-rectangle"|"td:check"|"td:chevron-down-circle"|"td:chevron-down-rectangle"|"td:chevron-down"|"td:chevron-left-circle"|"td:chevron-left-double"|"td:chevron-left-rectangle"|"td:chevron-left"|"td:chevron-right-circle"|"td:chevron-right-double"|"td:chevron-right-rectangle"|"td:chevron-right"|"td:chevron-up-circle"|"td:chevron-up-rectangle"|"td:chevron-up"|"td:circle"|"td:clear"|"td:close-circle-filled"|"td:close-circle"|"td:close-rectangle"|"td:close"|"td:cloud-download"|"td:cloud-upload"|"td:cloud"|"td:code"|"td:control-platform"|"td:creditcard"|"td:dashboard"|"td:delete"|"td:desktop"|"td:discount-filled"|"td:discount"|"td:download"|"td:edit-1"|"td:edit"|"td:ellipsis"|"td:enter"|"td:error-circle-filled"|"td:error-circle"|"td:error"|"td:file-add"|"td:file-copy"|"td:file-excel"|"td:file-image"|"td:file-paste"|"td:file-pdf"|"td:file-powerpoint"|"td:file-unknown"|"td:file-word"|"td:file"|"td:filter-clear"|"td:filter"|"td:flag"|"td:folder-add"|"td:folder-open"|"td:folder"|"td:fork"|"td:format-horizontal-align-bottom"|"td:format-horizontal-align-center"|"td:format-horizontal-align-top"|"td:format-vertical-align-center"|"td:format-vertical-align-left"|"td:format-vertical-align-right"|"td:forward"|"td:fullscreen-exit"|"td:fullscreen"|"td:gender-female"|"td:gender-male"|"td:gift"|"td:heart-filled"|"td:heart"|"td:help-circle-filled"|"td:help-circle"|"td:help"|"td:history"|"td:home"|"td:hourglass"|"td:image"|"td:info-circle-filled"|"td:info-circle"|"td:internet"|"td:jump"|"td:laptop"|"td:layers"|"td:link-unlink"|"td:link"|"td:location"|"td:lock-off"|"td:lock-on"|"td:login"|"td:logo-android"|"td:logo-apple-filled"|"td:logo-apple"|"td:logo-chrome-filled"|"td:logo-chrome"|"td:logo-codepen"|"td:logo-github-filled"|"td:logo-github"|"td:logo-ie-filled"|"td:logo-ie"|"td:logo-windows-filled"|"td:logo-windows"|"td:logout"|"td:mail"|"td:menu-fold"|"td:menu-unfold"|"td:minus-circle-filled"|"td:minus-circle"|"td:minus-rectangle"|"td:mobile-vibrate"|"td:mobile"|"td:money-circle"|"td:more"|"td:move"|"td:next"|"td:notification-filled"|"td:notification"|"td:order-adjustment-column"|"td:order-ascending"|"td:order-descending"|"td:page-first"|"td:page-last"|"td:pause-circle-filled"|"td:photo"|"td:play-circle-filled"|"td:play-circle-stroke"|"td:play-circle"|"td:play"|"td:poweroff"|"td:precise-monitor"|"td:previous"|"td:print"|"td:qrcode"|"td:queue"|"td:rectangle"|"td:refresh"|"td:remove"|"td:rollback"|"td:root-list"|"td:round"|"td:save"|"td:scan"|"td:search"|"td:secured"|"td:server"|"td:service"|"td:setting"|"td:share"|"td:shop"|"td:slash"|"td:sound"|"td:star-filled"|"td:star"|"td:stop-circle-1"|"td:stop-circle-filled"|"td:stop-circle"|"td:stop"|"td:swap-left"|"td:swap-right"|"td:swap"|"td:thumb-down"|"td:thumb-up"|"td:time-filled"|"td:time"|"td:tips"|"td:tools"|"td:unfold-less"|"td:unfold-more"|"td:upload"|"td:usb"|"td:user-add"|"td:user-avatar"|"td:user-circle"|"td:user-clear"|"td:user-talk"|"td:user"|"td:usergroup-add"|"td:usergroup-clear"|"td:usergroup"|"td:video"|"td:view-column"|"td:view-list"|"td:view-module"|"td:wallet"|"td:wifi"|"td:zoom-in"|"td:zoom-out"|"nointernet"|"success"|"warning"|"pending"|"refresh"|"folder"|"arrowup"|"arrowdown"|"arrowleft"|"arrowright"|"chevronup"|"chevrondown"|"chevronleft"|"chevronright"|"delete"|"edit"|"search"|"check"|"close"|"add"|"download"|"success-fill"|"close-fill"|"info-fill"|"pending-fill"|"warning-fill"|"more"|"star"|"star-fill"|"location"|"question" | 基础属性 | "success" | 选择预置图标 |
自定义图标 | src | image | 基础属性 | "" | 设置自定义图标地址 |
图标尺寸 | size | "xs"|"sm"|"md"|"lg"|"xl" | 基础属性 | "md" | 设置图标的尺寸大小 |
#
事件组件暴露的事件,可以监听组件的事件来触发一些外部的动作
事件名 | 事件code | 事件出参 event.detail | 适用情况 | 说明 |
---|
点击 | tap | 兼容三端 | - |
#
属性 API通过属性 API,可以获取组件内部的状态和属性值
只读属性名 | 属性标识 | 类型 | 说明 |
---|
图标类型 | type | "inner"|"custom" | 选择图标的类型 |
图标样式 | name | "td:add-circle"|"td:add-rectangle"|"td:add"|"td:app"|"td:arrow-down-rectangle"|"td:arrow-down"|"td:arrow-left"|"td:arrow-right"|"td:arrow-up"|"td:attach"|"td:backtop-rectangle"|"td:backtop"|"td:backward"|"td:barcode"|"td:books"|"td:browse-off"|"td:browse"|"td:bulletpoint"|"td:calendar"|"td:call"|"td:caret-down-small"|"td:caret-down"|"td:caret-left-small"|"td:caret-left"|"td:caret-right-small"|"td:caret-right"|"td:caret-up-small"|"td:caret-up"|"td:cart"|"td:chart-bar"|"td:chart-bubble"|"td:chart-pie"|"td:chart"|"td:chat"|"td:check-circle-filled"|"td:check-circle"|"td:check-rectangle-filled"|"td:check-rectangle"|"td:check"|"td:chevron-down-circle"|"td:chevron-down-rectangle"|"td:chevron-down"|"td:chevron-left-circle"|"td:chevron-left-double"|"td:chevron-left-rectangle"|"td:chevron-left"|"td:chevron-right-circle"|"td:chevron-right-double"|"td:chevron-right-rectangle"|"td:chevron-right"|"td:chevron-up-circle"|"td:chevron-up-rectangle"|"td:chevron-up"|"td:circle"|"td:clear"|"td:close-circle-filled"|"td:close-circle"|"td:close-rectangle"|"td:close"|"td:cloud-download"|"td:cloud-upload"|"td:cloud"|"td:code"|"td:control-platform"|"td:creditcard"|"td:dashboard"|"td:delete"|"td:desktop"|"td:discount-filled"|"td:discount"|"td:download"|"td:edit-1"|"td:edit"|"td:ellipsis"|"td:enter"|"td:error-circle-filled"|"td:error-circle"|"td:error"|"td:file-add"|"td:file-copy"|"td:file-excel"|"td:file-image"|"td:file-paste"|"td:file-pdf"|"td:file-powerpoint"|"td:file-unknown"|"td:file-word"|"td:file"|"td:filter-clear"|"td:filter"|"td:flag"|"td:folder-add"|"td:folder-open"|"td:folder"|"td:fork"|"td:format-horizontal-align-bottom"|"td:format-horizontal-align-center"|"td:format-horizontal-align-top"|"td:format-vertical-align-center"|"td:format-vertical-align-left"|"td:format-vertical-align-right"|"td:forward"|"td:fullscreen-exit"|"td:fullscreen"|"td:gender-female"|"td:gender-male"|"td:gift"|"td:heart-filled"|"td:heart"|"td:help-circle-filled"|"td:help-circle"|"td:help"|"td:history"|"td:home"|"td:hourglass"|"td:image"|"td:info-circle-filled"|"td:info-circle"|"td:internet"|"td:jump"|"td:laptop"|"td:layers"|"td:link-unlink"|"td:link"|"td:location"|"td:lock-off"|"td:lock-on"|"td:login"|"td:logo-android"|"td:logo-apple-filled"|"td:logo-apple"|"td:logo-chrome-filled"|"td:logo-chrome"|"td:logo-codepen"|"td:logo-github-filled"|"td:logo-github"|"td:logo-ie-filled"|"td:logo-ie"|"td:logo-windows-filled"|"td:logo-windows"|"td:logout"|"td:mail"|"td:menu-fold"|"td:menu-unfold"|"td:minus-circle-filled"|"td:minus-circle"|"td:minus-rectangle"|"td:mobile-vibrate"|"td:mobile"|"td:money-circle"|"td:more"|"td:move"|"td:next"|"td:notification-filled"|"td:notification"|"td:order-adjustment-column"|"td:order-ascending"|"td:order-descending"|"td:page-first"|"td:page-last"|"td:pause-circle-filled"|"td:photo"|"td:play-circle-filled"|"td:play-circle-stroke"|"td:play-circle"|"td:play"|"td:poweroff"|"td:precise-monitor"|"td:previous"|"td:print"|"td:qrcode"|"td:queue"|"td:rectangle"|"td:refresh"|"td:remove"|"td:rollback"|"td:root-list"|"td:round"|"td:save"|"td:scan"|"td:search"|"td:secured"|"td:server"|"td:service"|"td:setting"|"td:share"|"td:shop"|"td:slash"|"td:sound"|"td:star-filled"|"td:star"|"td:stop-circle-1"|"td:stop-circle-filled"|"td:stop-circle"|"td:stop"|"td:swap-left"|"td:swap-right"|"td:swap"|"td:thumb-down"|"td:thumb-up"|"td:time-filled"|"td:time"|"td:tips"|"td:tools"|"td:unfold-less"|"td:unfold-more"|"td:upload"|"td:usb"|"td:user-add"|"td:user-avatar"|"td:user-circle"|"td:user-clear"|"td:user-talk"|"td:user"|"td:usergroup-add"|"td:usergroup-clear"|"td:usergroup"|"td:video"|"td:view-column"|"td:view-list"|"td:view-module"|"td:wallet"|"td:wifi"|"td:zoom-in"|"td:zoom-out"|"nointernet"|"success"|"warning"|"pending"|"refresh"|"folder"|"arrowup"|"arrowdown"|"arrowleft"|"arrowright"|"chevronup"|"chevrondown"|"chevronleft"|"chevronright"|"delete"|"edit"|"search"|"check"|"close"|"add"|"download"|"success-fill"|"close-fill"|"info-fill"|"pending-fill"|"warning-fill"|"more"|"star"|"star-fill"|"location"|"question" | 选择预置图标 |
自定义图标 | src | image | 设置自定义图标地址 |
图标尺寸 | size | "xs"|"sm"|"md"|"lg"|"xl" | 设置图标的尺寸大小 |
#
无 方法 API#
样式 API通过样式 API,可以覆盖组件中内部元素的样式来实现自定义
名称 | 类名 | 说明 |
---|
根元素 | .wd-icon | 图标组件根元素 |
PC 端图标根元素 | .wd-pc-icon | 可以为 PC 端的图标编写样式 |
H5 端图标根元素 | .wd-h5-icon | 可以为 H5 端的图标编写样式 |
小程序端图标根元素 | .wd-mp-icon | 可以为小程序端的图标编写样式 |
#
CSS 变量.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;}
#
版本变化相比旧版图标
- 图标移除属性区的颜色配置,可通过样式面板的字色配置(原图标配置的颜色会保留)
- 原图标通过输入数值配置大小,替换为提供尺寸的下拉选择(原图标配置的大小会保留)