oa/documentation/icon-box/icon-box-colors-documentation.md

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.

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