Icon
The icon component provides a large set of small images for a more intuitive graphical interface.
Properties
name*: string | Array<string>
The name of the icon. A wide variety of icons is available. The set comes from FontAwesome.
Examples of values:
- 'user'
- ['fas','shopping-cart']
- ['system','android-back']
size: number | Size
Default: md
The size of the icon.
Possible values: sm, md, lg, xl, 2xl, 3xl, number
style
Modifications to the appearance, positioning, and geometry of the block.
-
padding,paddingHorizontal,paddingVertical,paddingTop,paddingRight,paddingBottom,paddingLeft
Internal padding of the container. Learn more. -
margin,marginHorizontal,marginVertical,marginTop,marginRight,marginBottom,marginLeft
External margins of the block. Learn more. -
position
Positioning method of the block: relative or absolute. Learn more. -
top,right,bottom,left
Offset from the original position. Learn more. -
border
Setting borders for the block on all four sides: thickness, style, and color. Learn more. -
borderTop,borderRight,borderBottom,borderLeft
Setting individual borders for the sides of the block: thickness and color. Learn more. -
borderRadius,borderBottomLeftRadius,borderBottomRightRadius,borderTopLeftRadius,borderTopRightRadius
Rounding the corners of the borders. Learn more. -
borderWidth,borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth
Thickness of the borders. Learn more. -
borderColor,borderTopColor,borderRightColor,borderBottomColor,borderLeftColor
Color of the borders. Learn more. -
backgroundColor
Background color of the block. Learn more. -
opacity
Opacity of the entire block along with its content. Learn more. -
elevation
Height of the shadow. Learn more. -
shadowColor
Color of the block's shadow. Learn more. -
alignSelf
Alignment of a specific block across the main axis of the container. Learn more. -
transform
Transformation of the geometry of blocks and containers in 2D and 3D space. Learn more.
