Setting Global Icon - Runes Webkit #

You can create global icon preferences in your Svelte application using setContext. This allows you to configure icon-related properties once and share them across multiple components.

Setting preferences #

In your +layout.svelte or +page.svelte, you can define and set global icon preferences as follows:

<script>
  import { setContext } from "svelte";

  // Define your global icon settings
  const iconCtx = {
    size: "30"
  };
  setContext("iconCtx", iconCtx);
</script>

All properties are optional, allowing you to fine-tune the appearance and accessibility of your icons as needed.

Prop size #

If you set size, icons can be customized with different color. For example:

<script>
  import { setContext } from "svelte";
  import { Accessibility } from "svelte-radix";
  const iconCtx = {
    size: "30"
  };
  setContext("iconCtx", iconCtx);
</script>

<Accessibility color="#ff4488" />

Setting more than one props #

Remember that you can set one or more properties, allowing you to tailor icon settings to your specific design and accessibility requirements.