Setting Global Icon - Svelte Remix

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 { AttachmentLineBusiness } from 'svelte-remix';
  const iconCtx = {
    size: '30'
  };
  setContext('iconCtx', iconCtx);
</script>

<AttachmentLineBusiness 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.