svelte中svg图像转换的正确方法

Question

在svelte中，我可以选择在两个图像之间切换，或者使用css来更改svg图像的颜色。哪个是“更好/最佳做法”？(我们也使用顺风css)。

    <div class='w-2 h-2'>
     {#if condition}
      <Image1/>  <--white image
     {:else}
      <Image2/>  <--red image
     {/if}
    </div>

或者，如果默认图像是白色的，则将红色传递给它。根据某些条件，颜色变量将是文本-红色或文本-白色。

    <div class='w-2 h-2 ${color}'> 
      <Image1/>
    </div>

Answer 1

Svelte的反应性可以通过CSS取代颜色条件。我们可以避免如果条件。

App.svelte

<script>
import Icon from "./Icon.svelte"

let stroke = "green";

function changeStroke(){
    stroke = "red"
}

</script>

<Icon {stroke}/>

<button on:click={changeStroke}>Change</button>

Icon.svelte

<script>
export let stroke = 'white';
</script>

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {stroke} stroke-width="2">
  <!-- Big SVG -->
</svg>

参见下面的示例REPL