Setting Global Icon - Svelte Flags

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: '40',
  };
  setContext('iconCtx', iconCtx);
</script>

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

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

Check the props section for Svelte 4 and 5: Runes for each props.