### 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.

<!--code-->

```vue
<template>
  <VIconBox size="small">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox>
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="large">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="big">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="xl">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
</template>
```

<!--/code-->

<!--example-->

<div class="is-flex is-gap-0.5 is-flex-wrap-wrap is-align-items-flex-end">
    <VIconBox size="small">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="large">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="big">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="xl">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
</div>

<!--/example-->