What am I missing when conditionally styling SVGs

So I have a SVG of an arrow that only has a stroke color. I want to change this stroke color based on a bool value passed to the component, if true color = black else white. Desired output (attached photo):
export function B({ hold }: DirectionalCommandVariants) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
class={`w-12 h-12 stroke-white`}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
/>
</svg>
);
}
export function B({ hold }: DirectionalCommandVariants) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
class={`w-12 h-12 stroke-white`}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
/>
</svg>
);
}
Renders a svg that doesn't show:
export function B({ hold }: DirectionalCommandVariants) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
class={`w-12 h-12 stroke-${!hold ? "white" : "black"}`}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
/>
</svg>
);
}
export function B({ hold }: DirectionalCommandVariants) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="3"
class={`w-12 h-12 stroke-${!hold ? "white" : "black"}`}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"
/>
</svg>
);
}
What other info should I include here to better help others help me understand deno/fresh rendering better?
No description
DAH
Deno AI Helper33d ago
I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you've provided, I can offer some general advice. In the second code snippet where you're trying to conditionally apply the stroke color, you're using template literals to set the class name. This should work as expected, assuming that the hold variable is a boolean and is being passed correctly to the component. However, if the SVG is not rendering as expected, here are a couple of things you might want to check: 1. Ensure that the CSS classes w-12, h-12, stroke-white, and stroke-black are defined in your stylesheet and are being applied correctly. If these classes are not defined, the SVG might not be visible due to having no width, height, or stroke color. 2. Check if the conditional logic for the class is working as intended. You can temporarily replace the template literal with a static class name to see if the SVG renders correctly. 3. Make sure that the DirectionalCommandVariants type (if it's TypeScript) correctly defines the hold property as a boolean. 4. Verify that there are no console errors in the browser's developer tools that could indicate a problem with the rendering. Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of the advice given. If the issue persists, you may want to seek help from the community or look for examples of similar implementations for further guidance.
N
NeTT33d ago
use full classes
!hold ? `stroke-white` : `stroke-black`
!hold ? `stroke-white` : `stroke-black`
It's not really a fresh issue that's how tailwind works
A
antpowell32d ago
Will try this and update with results, thanks for the response. Thanks that was the answer! Worked exactly how I expected it too.
More Posts
Error in npm package - how to squelch?I'm using an npm package that I think isn't being processed for Deno correctly. I get this error: `Is there a way to handle subpath imports within a library?I'm trying to convert a library package to work with deno. Internally, the package makes a bunch ofHow to connect to a MySQL 5.0.24?I was trying to use mysql@v2.12.1 to connect to a MySQL 5.0.24 Server but it is not compatible, is tTips for deploying Deno locally?Do we have a best practice for this? I want to deploy to my LAN only for a particular site. Maybe juHow to know when a Deno.Conn is closedA `Deno.Conn` is created either with `Deno.connectTls` or `Deno.connect`. How do we detect when the readFile path not foundI'm trying to use Deno.readFile but when is execute i get an error about wrong path. The files are Is there a way to read big files using something like .seek but with ending position as well?So, I'm doing a version of the billion line challenge in JS. I've already implemented a version withesbuild-deno-loader with npm private registryDid anyone used the esbuild-deno-loader with npm: specifier while using a private npm registry that how to load env variables from .env file in taskthe `source` shell command is not available. I tried ``` "tasks": { "my-task": "export .env &&Is there a way to specify a range and list from KV?```typescript const kv = await Deno.openKv(); kv.set(["parent", 1], "key1") kv.set(["parent", 2], "kPermissionDenied while using ioredis npm packageHello, I'm facing an issue with an npm library ioredis (https://github.com/redis/ioredis). For someIs there a way to obtain Deno.cron schedule info?Deploy lists the registered cron jobs with name, schedule, last run and next run. Is there a programVisual Studio Code Deno does not use node typesI'm trying to use the "esquery" node library with its types, but for any reason Deno ignores the typDrop permissionsI'd like to harden my deno app a bit, but specifying permissions manually gets repetitive. Is there New fresh project comes out of the box with errorsI created a new fresh project on linux, I am using VsCode and im getting many errors although the prIs there a deno function for inputting prompt reply without pressing enter?Normally, one has to press enter for the input to be accepted. I was wondering if there was a versio