Custom icons - Flowbite Svelte Icons
You can create a custom default icon, by using `IconSolid` or `IconOutline`:
Create a custom component #
Create a Svelte component named `src/lib/MyIcon.svelte`:
Svelte 4 #
<script lang="ts">
import type { Component } from 'svelte';
const config = {
size: "xl",
color: '#FF5733'
};
import { IconSolid } from 'flowbite-svelte-icons';
export let Icon: Component;
</script>
<IconSolid {...config} {icon} />
Svelte 5 #
<script lang="ts">
import { IconOutline } from 'flowbite-svelte-icons';
import { type Component } from 'svelte';
const config: { size: IconOutline['Props']['size'], color: string, ariaLabel: string } = {
size: "md",
color: '#FF5733',
ariaLabel: "my youtube icon",
};
interface Props {
Icon: Component
}
let { Icon }: Props = $props();
</script>
<IconOutline {...config} {Icon} />
This component, `MyIcon.svelte`, accepts an `icon` prop which you can use to pass in the specific icon component you want to display. The default configuration is also applied to the icon.
Implementation #
To use your custom default icon in a Svelte page, do the following:
Svelete 4 #
<script>
import MyIcon from 'path/to/MyIcon.svelte';
import { AngleLeftOutline } from 'flowbite-svelte-icons';
</script>
<MyIcon icon="{AngleLeftOutline}" />
Svelete 5 #
<script lang="ts">
import { AngleLeftOutline } from 'flowbite-svelte-icons';
import MyIcon from 'path/to/MyIcon.svelte'
const config: { size: IconOutline['Props']['size'], color: string, ariaLabel: string } = {
size: "xl",
color: '#FF5733',
ariaLabel: "my addressbook icon",
};
</script>
<MyIcon {...config} Icon={AngleLeftOutline} />
Here, we import the `MyIcon` component and the `AngleLeftOutline` icon. By passing the `AngleLeftOutline` icon to the `icon` prop of MyIcon, you apply the default configuration to the icon.