Custom icons - Svelte Awesome Icons

You can create a custom default icon, by using Icon:

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 { Icon } from 'svelte-awesome-icons';
  export let Icon: Component;
</script>

<IconSolid {...config} {icon} />

Svelte 5 #

<script lang="ts">
  import { Icon as AwesomeIcon } from 'svelte-awersome-icons';
  import { type Component } from 'svelte';
  const config: { size: string, color: string, ariaLabel: string, class: string } = {
    size: "40",
    color: '#88FF33',
    ariaLabel: "my custom icon",
    class: "mx-2"
  };
  interface Props {
    Icon: Component
  }

  let { Icon }: Props = $props();
</script>

<AwesomeIcon {...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.

Implementation #

To use your custom default icon in a Svelte page, do the following:

Svelte 4 #

<script>
  import MyIcon from 'path/to/MyIcon.svelte';
  import { BandageSolid } from 'svelte-awesome-icons';
</script>

<MyIcon icon="{BandageSolid}" />

Svelte 5 #

<script lang="ts">
  import { AddressBookRegular } from 'svelte-awesome-icons';
  import MyIcon from 'path/to/MyIcon.svelte'
</script>

<MyIcon Icon={AddressBookRegular} />

Here, we import the MyIcon component and the BandageSolid icon. By passing the BandageSolid icon to the icon prop of MyIcon, you apply the default configuration to the icon.