Custom icons - Svelte Heros v2

If you wish to create a custom default icon, you can follow these steps.

Create a Svelte component named `src/lib/MyIcon.svelte`:

Create a custom component #

Create a Svelte component named `src/lib/MyIcon.svelte`:

<script lang="ts">
  import type { Component } from 'svelte';
  const config = {
    size: 30,
    color: '#FF5733'
  };
  import { Icon } from 'svelte-heros-v2';
  export let icon: Component;
</script>

<Icon {...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 { AcademicCap } from 'svelte-heros-v2';
</script>

<MyIcon icon="{AcademicCap}" />

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