Custom icons - Svelte Ionicons

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: "30",
    color: '#FF5733'
  };
  import { Icon } from 'svelte-ionicons';
  export let icon: Component;
</script>

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

Svelte 5 #

<script lang="ts">
  import { Icon as IonIcon } from 'svelte-iconicons';
  import { type Component } from 'svelte';
  const config: { size: string, color: string; ariaLabel: string, class: string } = {
    size: "50",
    color: "#44ff88",
    ariaLabel: "my custom icon",
    class: "mx-4"
  };
  interface Props {
    Icon: Component
  }

  let { Icon }: Props = $props();
</script>
<IonIcon {...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:

Svelte 4 #

<script>
  import MyIcon from 'path/to/MyIcon.svelte';
  import { Accessibility } from 'svelte-ionicons';
</script>

<MyIcon icon="{Accessibility}" />

Svelte 5 #

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

<MyIcon Icon={BagAdd} />

Here, we import the MyIcon component and the AngleLeftSolid icon. By passing the Accessibility icon to the icon prop of MyIcon.