Welcome
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 |