Icon Svelte Component

Contents

Icon Components

There are following components included:

  • Icon

Icon Props

NameTypeDefaultDescription
badgestring

Icon badge

badgeColorsobject

Badge colors. Object with Tailwind CSS colors classes

badgeColors.bgstring'bg-primary'

Badge bg color

badgeColors.textstring'text-white'

Badge text color

iosstring

Icon to render in "ios" theme

materialstring

Icon to render in "material" theme

Icon Snippets

NameDescription
badge

Icon badge

ios

Icon to render in "ios" theme

material

Icon to render in "material" theme

Examples

Badge.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Badge,
Icon,
Link,
List,
ListItem,
Tabbar,
TabbarLink,
ToolbarPane,
} from 'konsta/svelte';
import {
PersonCircleFill,
EnvelopeFill,
Calendar,
CloudUploadFill,
} from 'framework7-icons/svelte';
import MdPerson from '../components/MdPerson.svelte';
import MdEmail from '../components/MdEmail.svelte';
import MdToday from '../components/MdToday.svelte';
import MdFileUpload from '../components/MdFileUpload.svelte';
import DemoIcon from '../components/DemoIcon.svelte';
</script>
<Page>
<Navbar title="Badge">
{#snippet left()}
{#if !isPreview}
<NavbarBackLink onclick={() => history.back()} />
{/if}
{/snippet}
{#snippet right()}
<Link navbar iconOnly>
<Icon badge="5" badgeColors={{ bg: 'bg-red-500' }}>
{#snippet ios()}
<PersonCircleFill class="w-7 h-7" />
{/snippet}
{#snippet material()}
<MdPerson class="w-6 h-6" />
{/snippet}
</Icon>
</Link>
{/snippet}
</Navbar>
<Tabbar labels icons class="left-0 bottom-0 fixed">
<ToolbarPane>
<TabbarLink active label="Inbox">
{#snippet icon()}
<Icon badge="5" badgeColors={{ bg: 'bg-green-500' }}>
{#snippet ios()}
<EnvelopeFill class="w-7 h-7" />
{/snippet}
{#snippet material()}
<MdEmail class="w-6 h-6" />
{/snippet}
</Icon>
{/snippet}
</TabbarLink>
<TabbarLink label="Calendar">
{#snippet icon()}
<Icon badge="7" badgeColors={{ bg: 'bg-red-500' }}>
{#snippet ios()}
<Calendar class="w-7 h-7" />
{/snippet}
{#snippet material()}
<MdToday class="w-6 h-6" />
{/snippet}
</Icon>
{/snippet}
</TabbarLink>
<TabbarLink label="Upload">
{#snippet icon()}
<Icon badge="1" badgeColors={{ bg: 'bg-red-500' }}>
{#snippet ios()}
<CloudUploadFill class="w-7 h-7" />
{/snippet}
{#snippet material()}
<MdFileUpload class="w-6 h-6" />
{/snippet}
</Icon>
{/snippet}
</TabbarLink>
</ToolbarPane>
</Tabbar>
<List strong inset>
<ListItem title="Foo Bar">
{#snippet media()}
<DemoIcon />
{/snippet}
{#snippet after()}
<Badge colors={{ bg: 'bg-gray-500' }}>0</Badge>
{/snippet}
</ListItem>
<ListItem title="Ivan Petrov">
{#snippet media()}
<DemoIcon />
{/snippet}
{#snippet after()}
<Badge>CEO</Badge>
{/snippet}
</ListItem>
<ListItem title="John Doe">
{#snippet media()}
<DemoIcon />
{/snippet}
{#snippet after()}
<Badge colors={{ bg: 'bg-green-500' }}>5</Badge>
{/snippet}
</ListItem>
<ListItem title="Jane Doe">
{#snippet media()}
<DemoIcon />
{/snippet}
{#snippet after()}
<Badge colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>
{/snippet}
</ListItem>
</List>
</Page>
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.