add fallback when css masking is not supported

[hatemhosny]

What type of PR is this? (check all applicable)

• ✨ Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• ♻️ Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert
• 🌐 Internationalization / Translation

Description

As discussed in #652 , CSS masking is a relatively new feature and is not yet widely supported (baseline compatibility: "newly available").

This PR adds a fallback when it is not available by using the same svg data url as a background image instead, and makes the color darker or lighter by changing filter (e.g. invert(0.8) -> invert(1)).

It does not use the currentColor like the CSS mask, however it uses shades of grey.
Not ideal, but very usable.
This will only have effect when the CSS masking is not available.

The main code added:

@supports not (mask-image: var(--svg)) {
  [class^='icon-'] {
    background-color: transparent;
    background-image: var(--svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: var(--icon-filter);
  }

  a:hover [class^='icon-'],
  button:hover [class^='icon-'],
  [class^='icon-']:hover {
    filter: var(--icon-filter-active);
  }
}

Related Tickets & Documents

Fixes #652

Mobile & Desktop Screenshots/Recordings

If CSS masking doesn't work (before the fix):

Dark theme

Light theme

Share screen: light theme

Share screen: dark theme

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentations?

• 📓 docs (./docs)
• 📕 storybook (./storybook)
• 📜 README.md
• 🙅 no documentation needed

@gigamaster , would you kindly review this at your convenience?

[netlify]

✅ Deploy Preview for livecodes ready!

Name	Link
🔨 Latest commit	b4384a5
🔍 Latest deploy log	https://app.netlify.com/sites/livecodes/deploys/67477bec5bd4620008e9cc7b
😎 Deploy Preview	https://deploy-preview-654--livecodes.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cloudflare-workers-and-pages]

Deploying livecodes with    Cloudflare Pages

Latest commit:	b4384a5
Status:	✅  Deploy successful!
Preview URL:	https://9dce33f1.livecodes.pages.dev
Branch Preview URL:	https://css-icon-fallback.livecodes.pages.dev

View logs

[hatemhosny]

Merging as discussed in #652