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

<!--code-->

```vue
<template>
  <VIconBox size="medium" color="primary">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="info">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="success">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="warning">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="danger">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="purple">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="yellow">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="orange">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="green">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="red">
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox size="medium" color="blue">
    <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="medium" color="primary">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="info">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="success">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="warning">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="danger">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="purple">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="yellow">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="orange">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="green">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="red">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="blue">
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
</div>

<!--/example-->