mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 07:53:48 +09:00
59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
### 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-->
|