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.