shinokada/svelte-heros

[BUG]: Reactivity for `variation` does not work

Closed this issue · 2 comments

Description of the bug

When rendering the icon, the variation prop is not reactive.

e.g.

<script>
  import { Map } from 'svelte-heros'
  let isSolid = false
</script>

<Map on:click={() => isSolid = !isSolid} variation={isSolid ? 'solid' : 'outline'}/>

You'l notice that changing the variation after initial render does not cause the variation to change.

I think the fix is as simple as adding $: to the switch(variation) { line in each .svelte file.

e.g.

<script >export let size = "24";
export let color = "currentColor";
export let variation = "outline";
let svgpath;
let svgoutline = `...`;
let svgsolid = `...`
$: switch (variation) {
    case "outline":
        svgpath = svgoutline;
        break;
    case "solid":
        svgpath = svgsolid;
        break;
    default:
        svgpath = svgoutline;
}
export let ariaLabel = "map";
</script>

Steps To Reproduce

See description

Additional Information

No response

Thanks for the issue.

  • Added on:click as well so that your code works. v2.3.0.
  • Added $:
  • Added Dynamically change the variation to README.
  • REPL
    Please let me know what you think.

Close the issue for now.