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.