Custom Default 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`:

<script lang="ts">
  import type { ComponentType } from 'svelte';
  const config = {
    size: "xl",
    color: '#FF5733'
  };
  import { IconSolid } from 'flowbite-svelte-icons';
  export let icon: ComponentType;
</script>

<IconSolid {...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:

<script>
  import MyIcon from '$lib/MyIcon.svelte';
  import { AngleLeftOutline } from 'flowbite-svelte-icons';
</script>

<MyIcon 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.