使用Svelte设置SVG笔划样式

Question

我在Svelte中有以下代码，我希望使用CSS类名(分别为text-error和text-success，而不是#ff5722和#10b759(来设置笔划颜色的样式。

这可能吗？

我宁愿不在组件中定义确切的颜色，而是让主题通过CSS类(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

由于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

Answer 2

您可以像在按钮上那样添加类

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

或者经由CCD_ 6指令>gt；REPL
("…但让主题通过CSS类来决定">笔划必须在类上定义-主题就是这样？否则可能会使用变量…(

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

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