New Icon Mixin

[GGKapanadze]

Description

This PR introduces a new mixin that supports base64 icon placement with new theme support (#999)

API

The API for the new mixin is almost the same, to maintain the same DX

@include icon("chevron_right", var(--ilo-color-blue));

1. The icon machine name from @ilo-org/icon, required
2. The CSS variable that indicates the color of the icon

Implementation

Base64 encoded svg has no direct support for CSS variables since it is evaluated as a static string, one possible solution to get rid of dataurilicon was to eliminate the base64 encoded svgs but it has its disadvantages

• We are maintaining two design systems for react and for twig and having a single source of truth from the styles package is a good thing
• We could use the icon component for both twig and react, but for twig users js bundle for the icon component will become the required dependency, which isn't common behavior for the drupal & symphony projects
• Right now twig and react have radically different coverage for the components in terms of js so maintaining icons from the styles package will increase the phase for the development
• The rewrite overhead (time-wise)

So, the current implementation keeps the icons in base64 and adds CSS variables support with the utilization of the mask-image. You can read more about mask-image here;tldr, we place the icon as a mask element and add color to it using background-color.

There is a disadvantage too, if one node uses both icon mixin and background color they should be split markup-wise or pseudo selectors should be used

Component migration

First I tried to port all the components, but it would block further development of the components, so we can address every component in the scope of #971. The PR has a few examples of how to port the component to the new mixin.

Migrated components

Component	Status
Accordion	💬 icon is styled as a separate tag
Blockquote	✅
Callout	✅
Linklist	💬 reduced file size, +improved rtl, missing ident icon
Pagination	✅ on of the biggest user of dataurlicon
Tag	✅

[changeset-bot]

🦋 Changeset detected

Latest commit: 3008904

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@ilo-org/styles	Patch
@ilo-org/react	Patch
@ilo-org/twig	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for ilo-ui-react ready!

Name	Link
🔨 Latest commit	3008904
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-react/deploys/6751b06d569aff0008f39cd3
😎 Deploy Preview	https://deploy-preview-1262--ilo-ui-react.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.

[netlify]

✅ Deploy Preview for ilo-ui-twig-develop ready!

Name	Link
🔨 Latest commit	3008904
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-twig-develop/deploys/6751b06d4b819c0008222664
😎 Deploy Preview	https://deploy-preview-1262--ilo-ui-twig-develop.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.

[netlify]

✅ Deploy Preview for ilo-ui-twig ready!

Name	Link
🔨 Latest commit	3008904
🔍 Latest deploy log	https://app.netlify.com/sites/ilo-ui-twig/deploys/6751b06d7314470008c56275
😎 Deploy Preview	https://deploy-preview-1262--ilo-ui-twig.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.