VIconBox
The Vuero <VIconBox /> component let you display icons in a fancy and colored way. Box sizes can be controled with the size prop. Available sizes are small, medium, large, big and xl. See code for more details about usage.
Box colors
The Vuero <VIconBox /> component can have different colors. You can change the color by passing a value to the color prop. Available values are: primary, info, success, warning, danger, purple, yellow, orange, green, red, or blue.
Box border
The Vuero <VIconBox /> component can have a thick border. You can add a border by simply adding the bordered prop to the component. See the code example for more details.
Rounded box
The Vuero <VIconBox /> component can have a rounded shape. You can make icons rounded by simply adding the rounded prop to the component. See the code example for more details.
Rounded border
The Vuero <VIconBox /> component can have a thick border. You can add a border by simply adding the bordered and rounded props to the component. See the code example for more details.
Feather Icons
The Vuero <VIconBox /> component works also very well with the Feather Icons icon set. Use the same markup and just replace the existing icons with some from Feather Icons.
Font Awesome
The Vuero <VIconBox /> component works also very well with the Font Awesome icon set. Use the same markup and just replace the existing icons with some from Font Awesome.
VIconBox Props
Here is the full props available for <VIconBox /> component:
| Props | Default | Type |
|---|---|---|
| size | undefined | small, medium, large, big, xl |
| color | undefined | primary, success, info, warning, danger, purple, orange, blue, green, red, yellow |
| rounded | false | boolean |
| bordered | false | boolean |