Hey team!
@David-Shopify @Anthony_Frehner
As part of our react to preact migration, we have a requirement to ensure our icons can ingest the brand’s ‘accent’ colour set in the checkout branding settings.
For example (see star icons and module icons + arrows):
Using ‘auto’ just sets these colors to neutral instead of ingesting the accent colour that the brand has set:
Hey,
Can you share some code on how you rendered those icons in React and how you’re rendering them in the preact version? E.g what props and values you are using
Thank you !
Hey @Robin,
React icons (both appearance interactive and accent follow theme settings accent colour)
<Icon source={"cart"} appearance="interactive" size="large" />
Preact Icons
<s-icon type="cart" tone="auto" size="large" />
In the video, I render all the different tone available for the Preact icons and none of them matches the theme settings accent color)
See video: https://drive.google.com/file/d/1Qcgv9yosn2UK2cwlp8Qh18xbBOSVw_8l/view?usp=drive_link
Hope that makes sense!
Appreciate it
Hey,
in youre video, is any of the icons using tone=”custom”?
Custom would use the decorative color which if not overridden by the API should fallback to the accent color.
Yes, in the video I’m displaying every single tone available Icon.
None of them follow the theme settings colour accent.
Any chance you’ve overridden decorative color using the graphql API?
I doubt we would have!
Are you able to get this working on your side? Would be keen to see how the code looks like
Could you try wrapping your s-icon in an s-link ? Would that work?
