Badges with Icon
You can use Svelte-heroicon.
<script>
import {BadgeIcon} from 'flowbite-svelte'
import {InformationCircle} from 'svelte-heros'
let link="/"
</script>Size xs
Default
Gray
Red
Green
Yellow
Indigo
Purple
Pink
<BadgeIcon name="Default" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Gray" color="gray" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Red" color="red" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Green" color="green" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Yellow" color="yellow" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Indigo" color="indigo" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Purple" color="purple" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>
<BadgeIcon name="Pink" color="pink" ><InformationCircle class="mr-1" size="14"/></BadgeIcon>Size sm
Default
Gray
Red
Green
Yellow
Indigo
Purple
Pink
<BadgeIcon name="Default" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Gray" color="gray" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Red" color="red" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Green" color="green" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Yellow" color="yellow" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Indigo" color="indigo" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Purple" color="purple" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Pink" color="pink" textSize="text-sm" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>Size base
Default
Gray
Red
Green
Yellow
Indigo
Purple
Pink
<BadgeIcon name="Default" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Gray" color="gray" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Red" color="red" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Green" color="green" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Yellow" color="yellow" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Indigo" color="indigo" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Purple" color="purple" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>
<BadgeIcon name="Pink" color="pink" textSize="text-base" ><InformationCircle class="mr-1" size="18"/></BadgeIcon>Badges with icon only
Read more
Read more
Read more
Read more
Read more
Read more
Read more
Read more
<BadgeIcon textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="gray" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="red" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="green" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="yellow" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="indigo" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="purple" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>
<BadgeIcon color="pink" textSize="text-base"><InformationCircle class="mr-1" size="18" /></BadgeIcon>Props
The component has the following props, type, and default values. See types page for type information.
| Name | Type | Default |
|---|---|---|
| textSize | Textsize | 'text-xs' |
| name | string | 'Read more' |
| color | Colors | 'blue' |
| href | string | '/' |