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,58 @@
### 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-->