Setting Global Icon - Svelte Heros v2

You can establish global icon preferences in your Svelte application using setContext. This allows you to configure icon-related properties once and share them across multiple components. Here's how you can do it.

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 = {
    strokeWidth: '2',
    size: '100', // Icon size in pixels
    color: '#ff4488', // Icon color in hexadecimal or CSS color name
    role: 'svg icon image' // Accessible role for the icon
  };
  setContext('iconCtx', iconCtx);
</script>

The size, color, role, and other 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 { AcademicCap } from 'svelte-heros-v2';
  const iconCtx = {
    size: '50'
  };
  setContext('iconCtx', iconCtx);
</script>

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

Feel free to mix and match these properties as needed to create visually appealing and accessible icons in your Svelte application.