Icon Tabs

Examples

<script>
	import { IconTabs } from 'flowbite-svelte';
	import {
		UserCircle,
		ViewGrid,
		Adjustments,
		ClipboardList
	} from 'svelte-heros';

	let tabs = [
		{
			name: 'Profile',
			active: true,
			href: '/',
			icon: UserCircle,
			iconSize: 18,
		},
		{
			name: 'Dashboard',
			active: false,
			href: '/',
			icon: ViewGrid,
			iconSize: 18,
		},
		{
			name: 'Settings',
			active: false,
			href: '/',
			icon: Adjustments,
			iconSize: 18,
		},
		{
			name: 'Contacts',
			active: false,
			href: '/',
			icon: ClipboardList,
			iconSize: 18,
		}
	];
</script>

<IconTabs {tabs} />

Props

The component has the following props, type, and default values. See types page for type information.

Name Type Default
tabs IconTabType[]
iconClass string 'mr-2 w-5 h-5 text-gray-400 group-hover:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-300'

References