Windi UIIcon
Icons are used to visually represent objects or concepts and allow users to interact with them by clicking or tapping on them.
Basic Usage
Size
You can increase the size of the WIcon component by passing a size to the size prop as shown below:
By default, the WIcon component's size is base
Preset
js
WIcon: {
base: {
'root': 'block cursor-pointer',
'normal': 'text-base',
'xs': 'text-xs',
'sm': 'text-sm',
'base': 'text-base',
'lg': 'text-lg',
'xl': 'text-xl',
'2xl': 'text-2xl',
'3xl': 'text-3xl',
'4xl': 'text-4xl',
'6xl': 'text-6xl',
'8xl': 'text-8xl',
},
variants: {
default: {
root: 'block cursor-pointer',
},
},
},WIcon: {
base: {
'root': 'block cursor-pointer',
'normal': 'text-base',
'xs': 'text-xs',
'sm': 'text-sm',
'base': 'text-base',
'lg': 'text-lg',
'xl': 'text-xl',
'2xl': 'text-2xl',
'3xl': 'text-3xl',
'4xl': 'text-4xl',
'6xl': 'text-6xl',
'8xl': 'text-8xl',
},
variants: {
default: {
root: 'block cursor-pointer',
},
},
},