Custom icons - Runes Webkit #
If you wish to create a custom default icon, you can follow these steps:
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-radix';
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 { Accessibility } from 'svelte-radix';
</script>
<MyIcon icon="{Accessibility}" />
Here, we import the MyIcon
component and the Accessibility
icon. By passing
the Accessibility
icon to the icon
prop of MyIcon, you apply the default
configuration to the icon.