Style SVG stroke with Svelte-CodePudding

I have the following code in Svelte and I am looking to style the stroke color using a CSS class name (text-error and text-success instead of #ff5722 and #10b759, respectively).

Is this possible?

I would rather not define the exact color in the component, but let the theme decide through the CSS class (DaisyUI).

New to Svelte, latest versions of everything.

<script>
    let isStreaming = false;

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

<div >
    <button on:click={toggleStreaming} >
        <svg xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke="{isStreaming ? '#ff5722': '#10b759'}" <!-- this part -->
             >
            <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>

CodePudding user response：

Since Daisy UI is just a Tailwind plugin you can do this the same way you would in Tailwind: By adding stroke-current to the SVG and changing the text color of the button (like you're already doing).

<svg ... >...

Here's a Svelte REPL using the Daisy UI CDN and your example with that single change https://svelte.dev/repl/814fd418f164491fbf97d39528cde2d3?version=3.46.3

CodePudding user response：

You can add the class like you do on the button

<... >

or via the class: directive >> REPL
("...but let the theme decide through the CSS class" The stroke must be defined on the class - that's the case in the theme? Otherwise there might be variables which might be used...)

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

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