Has anyone used Astro Icon and tryed to conditionaly output an icon depending on their circumstances.
<Icon name={theme ? "sun" : "moon"} height='30' id='theme-toggle' />
#Astro Icon - Conditional Styling?
shy path
dense rain
The code you posted looks fine, if it does not work for you, you can post a full example. It all depends on how you manage theme variable though, as Astro icon runs on the server, so the server has to know it on build time for ssg, which does not makes sense, and runtime for ssr. What are you using ? ssg or ssr ?
shy path
Can I access variables from a script ? with the is:inline flag ?
That way I could use my var storedTheme to make the decission.
I am not using ssr for now.
dense rain
A script tag can only use client side js variables. If you do not use ssr, then the variable you pass like that from an astro component is going to reset your theme on every page reload.
For more details about server vs client states management, see this https://stackoverflow.com/a/74840400/1324481