使用 Svelte 设置 SVG 样式

Question

我在 Svelte 中有以下代码，我希望使用 CSS class 名称（text-error 和 text-success 而不是 #ff5722 和 #10b759。

这可能吗？

我宁愿不在组件中定义确切的颜色，而是让主题通过 CSS class (DaisyUI) 来决定。

Svelte 的新手，所有内容的最新版本。

<script>
    let isStreaming = false;

    function toggleStreaming() {
        isStreaming = !isStreaming;
    }    
</script>

<div class="someClass">
    <button on:click={toggleStreaming} class="btn {isStreaming ?
    ' text-error':
    ' text-success'}">
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke="{isStreaming ? '#ff5722': '#10b759'}" <!-- this part -->
             class="h-6 mr-2">
            <path stroke-width="2"
                  d="{isStreaming ? 'M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636' : 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'}">
            </path>
        </svg>
        {isStreaming ? 'Kill' : 'Stream'}
    </button>
</div>

Answer 1

您可以像添加按钮一样添加 class

<... class="{isStreaming ? 'text-success' : 'text-error'}">

或通过 class: directive >> REPL
("...但是让主题通过CSS决定 class" 笔画必须定义在class上——在主题？否则可能会使用变量...)

<svg
  ...
  class:text-success={isStreaming}
  class:text-error={!isStreaming}
  ...
>

<style>
    .text-success {
        stroke: #10b759;
    }
    .text-error {
        stroke: #ff5722;
    }
</style>

Answer 2

由于 Daisy UI 只是一个 Tailwind 插件，您可以像在 Tailwind 中一样执行此操作：通过将 stroke-current 添加到 SVG 并更改按钮的文本颜色（就像您已经在做了）。

<svg ... class="h-6 mr-2 stroke-current">...

这是一个使用 Daisy UI CDN 的 Svelte REPL 以及您的示例，仅进行了一次更改 https://svelte.dev/repl/814fd418f164491fbf97d39528cde2d3?version=3.46.3

使用 Svelte 设置 SVG 样式

Style SVG stroke with Svelte

css

svg

tailwind-css

svelte

daisyui