Files
oa/documentation/icon-box/icon-box-feather-documentation.md
2025-05-24 01:49:48 +09:00

2.7 KiB

Lucide Icons

The Vuero <VIconBox /> component works also very well with the Lucide Icons icon set. Use the same markup and just replace the existing icons with some from Lucide Icons.

<template>
  <VIconBox
    size="medium"
    color="primary"
    rounded
  >
    <VIcon icon="lucide:award" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="info"
    rounded
  >
    <VIcon icon="lucide:chrome" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="success"
    rounded
  >
    <VIcon icon="lucide:clock" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="warning"
    rounded
  >
    <VIcon icon="lucide:coffee" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="danger"
    rounded
  >
    <VIcon icon="lucide:home" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="purple"
    rounded
  >
    <VIcon icon="lucide:lock" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="yellow"
    rounded
  >
    <VIcon icon="lucide:moon" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="orange"
    rounded
  >
    <VIcon icon="lucide:phone" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="green"
    rounded
  >
    <VIcon icon="lucide:paperclip" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="red"
    rounded
  >
    <VIcon icon="lucide:smile" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="blue"
    rounded
  >
    <VIcon icon="lucide:shield" />
  </VIconBox>
</template>