[FEAT]: Override global icon size using Context

[risalfajar]

Description

It'll be convenient if we can override default icon size by calling setContext("iconSize", "16") on root layout.

This will make all icons size consistent while easy to change.

Additional Information

No response

[shinokada]

How about creating your default icons? Please read docs on Creating a Default Global Icon Setting in Svelte and Custom Default Icon.

[risalfajar]

The problem with Default Global Icon Setting you mentioned is we need to use and pass the config every time we're inserting the icon.

But if we're using Context then we need to call setContext() once then use the icons as usual.

[shinokada]

How do you like this?

// AddressBookRegular.svelte
<script>
  import { getContext } from 'svelte'
  export let size = '24';
  export let role = 'img';
  export let color = 'currentColor';
  export let ariaLabel = 'address book';

  const ctx = getContext('iconCtx') ?? {}
  size = ctx.size ? ctx.size : size;
  role = ctx.role ? ctx.role : role;
  color = ctx.color ? ctx.color : color;
</script>

<svg
  xmlns="http://www.w3.org/2000/svg"
  {...$$restProps}
  {role}
  width={size}
  height={size}
  fill={color}
  class={$$props.class}
  aria-label={ariaLabel}
  viewBox="0 0 512 512"
  ><path
    d="M384 48c8.8 0 16 7.2 16 16V448c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H384zM96 0C60.7 0 32 28.7 32 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zM240 256a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16H336c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80H208zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zM496 192c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V336z"
  /></svg
>

Then you can set context:

<script>
  import { setContext } from "svelte";
  import {AddressBookRegular} from "svelte-awesome-icons";
  const iconCtx = {
    size:50,
    color: '#ff4488'
  }
  setContext("iconCtx", iconCtx)
</script>

<AddressBookRegular />

[risalfajar]

It's good, but maybe we can make it simpler?

<script>
  import { getContext } from 'svelte'

  const ctx = getContext('iconCtx') ?? {}

  export let size = ctx.size || '24';
  export let role = ctx.role || 'img';
  export let color = ctx.color || 'currentColor';
  export let ariaLabel = 'address book';
</script>

[shinokada]

I just released svelte-awesome-icons@0.6.4. Can you check it and let me know?

[risalfajar]

Wow, that's so fast! It works amazingly, thank you Okada-san.

[shinokada]

Please feel free to open a new issue. Thank you for your contribution.