fix(action): icon preview light and dark mode

[danielbayley]

Fixes #1489 properly, improving on #1493.

Description

Fix icon preview to display correctly, cross-browser, including a temporary bug fix for WebKit.

Before Submitting

• I've read the Contribution Guidelines.
• I've checked if there was an existing PR that solves the same issue.

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const HousesIcon = createLucideIcon('Houses', [
  ["path",{"d":"M10 20v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"}],
  ["path",{"d":"M6 17H3a1 1 0 0 1-1-1V9.5c0-.6.3-1.2.7-1.6l4.6-3.7a1 1 0 0 1 1.3 0l8.7 7.3c.4.4.7.9.7 1.5v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-6c0-.6.3-1.1.7-1.5l8.6-7.3a1 1 0 0 1 1.3 0l4.6 3.7c.5.4.8 1 .8 1.6V16a1 1 0 0 1-1 1h-3"}]
])

[jguddas]

modified to point to the preview url

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const HousesIcon = createLucideIcon('Houses', [
  ["path",{"d":"M10 20v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5"}],
  ["path",{"d":"M6 17H3a1 1 0 0 1-1-1V9.5c0-.6.3-1.2.7-1.6l4.6-3.7a1 1 0 0 1 1.3 0l8.7 7.3c.4.4.7.9.7 1.5v6a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-6c0-.6.3-1.1.7-1.5l8.6-7.3a1 1 0 0 1 1.3 0l4.6 3.7c.5.4.8 1 .8 1.6V16a1 1 0 0 1-1 1h-3"}]
])

[jguddas]

Doesn't work, tested in firefox and chrome.

Test cases:

• dark / light mode in system settings
• dark / light mode in github settings

To get the raw code from the preview comment you can click on reference in new issue.

[danielbayley]

Doesn't work, tested in firefox and chrome.

Yeah I should have marked this as draft; it got mangled playing around with PRs to my fork (just trying to get the action running properly on there) to test properly… but running into 403 errors, do I need to set a particular repo *_TOKEN for the action? I haven’t had time to fully dig through the various composite actions involved…

So the correct CSS workaround for the underlying bug—which a multibillion dollar company seems unable to fix—is as follows:

:root { color-scheme: light dark }
* { stroke: currentcolor }
_::-webkit-full-page-media, _:future, :root * {
  stroke: white;
  mix-blend-mode: difference;
}

This works for the SVGs in READMEs on many of my other repos, and others.

The only issue here, with this applied to overlapping strokes (and only on WebKit) is the mix-blend-mode re-inverting the overlapping stroke parts… Not sure exactly how to address that. Possibly along the lines of fill-rule="nonzero" or something? Here’s a directly uploaded example:

To get the raw code from the preview comment you can click on reference in new issue.

Thanks @jguddas, that beats trying to copy it and cleanup from the Actions run log… But ideally, I was hoping to get the bot running exactly the same on my fork…

[jguddas]

Doesn't work?

https://lucide-p7cyegt4o-lucide.vercel.app/api/gh-icon/stroke-width/2/PHN2Zz48cGF0aCBkPSJNMTAgMjB2LTVhMSAxIDAgMCAxIDEtMWgyYTEgMSAwIDAgMSAxIDF2NSIgLz48cGF0aCBkPSJNNiAxN0gzYTEgMSAwIDAgMS0xLTFWOS41YzAtLjYuMy0xLjIuNy0xLjZsNC42LTMuN2ExIDEgMCAwIDEgMS4zIDBsOC43IDcuM2MuNC40LjcuOS43IDEuNXY2YTEgMSAwIDAgMS0xIDFIN2ExIDEgMCAwIDEtMS0xdi02YzAtLjYuMy0xLjEuNy0xLjVsOC42LTcuM2ExIDEgMCAwIDEgMS4zIDBsNC42IDMuN2MuNS40LjggMSAuOCAxLjZWMTZhMSAxIDAgMCAxLTEgMWgtMyIgLz48L3N2Zz4=.svg