This commit is contained in:
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions

View File

@@ -0,0 +1,131 @@
### 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.
<!--code-->
```vue
<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>
```
<!--/code-->
<!--example-->
<div class="is-flex is-gap-0.5 is-flex-wrap-wrap is-align-items-flex-end">
<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>
</div>
<!--/example-->