使用 Svelte 设置 SVG 样式
Style SVG stroke with Svelte
我在 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>
您可以像添加按钮一样添加 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>
由于 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 中有以下代码,我希望使用 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>
您可以像添加按钮一样添加 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>
由于 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