Icon
Basic usage
<template>
<b-icon :size="20">
<ArrowRight />
</b-icon>
</template>
<script setup lang="ts">
import { ArrowRight } from '@bigin/icons-vue'
</script>
External icons
Icon can be inline or using external icons from Iconifyopen in new window with unocss.
<template>
<b-row wrap>
<b-col>
<b-space>
<span>Default icon</span>
<b-icon :size="20">
<ArrowRight />
</b-icon>
</b-space>
</b-col>
<b-col>
<b-space>
<span>Inline icon</span>
<b-icon :size="20">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="48"
height="48"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 48 48"
>
<g fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M25.0653 34.5111L37.7794 20.4247C38.0735 20.0988 38.0735 19.5704 37.7794 19.2444C37.6381 19.0879 37.4465 19 37.2467 19H10.7533C10.3372 19 10 19.3736 10 19.8346C10 20.0559 10.0794 20.2682 10.2206 20.4247L22.9347 34.5111C23.5231 35.163 24.4769 35.163 25.0653 34.5111Z"
fill="currentColor"
/>
</g>
</svg>
</b-icon>
</b-space>
</b-col>
<b-col>
<b-space>
<span>Iconify icon</span>
<b-icon :size="20" class="i-fluent:arrow-right-12-filled" />
</b-space>
</b-col>
</b-row>
</template>
<script setup lang="ts">
import { ArrowRight } from '@bigin/icons-vue'
</script>
Size
Icon can be at any size, but it will be better for rendering when value is multiply by 4.
<template>
<b-space>
<b-icon :size="16">
<ArrowRight />
</b-icon>
<b-icon :size="24">
<ArrowRight />
</b-icon>
<b-icon :size="32">
<ArrowRight />
</b-icon>
</b-space>
</template>
<script setup lang="ts">
import { ArrowRight } from '@bigin/icons-vue'
</script>
Icon Attributes
| Attribute | Description | Type | Acceptable Value | Default |
|---|
| color | SVG tag's fill attribute | Pick<CSSProperties, 'color'> | - | inherit from color |
| size | SVG icon size, size x size | number | string | - | inherit from font size |
Icon Slots
| Name | Description |
|---|
| — | customize default content |
