"The requirement was clear: the product marketing and marketing teams needed to own and update these badge icons independently, without involving the dev team every time a new badge was introduced or an existing one changed."
"Instead of loading the SVG as an <img> (which can't be styled) or inlining it (which couples it to the codebase), we use the CSS directive mask-image."
"Only the shape of the SVG is visible, you control the fill via background-color. Since we set that to currentColor, the icon inherits the color of its surrounding context automatically."
Subito introduced a system for loading and coloring SVG icons that allows marketing teams to manage user badges independently from the development team. The solution involves hosting SVGs on S3 for easy access and using the CSS mask-image property to dynamically color the icons. This approach enables icons to inherit colors from their surrounding context, ensuring they match the brand colors of different categories. The system enhances flexibility and efficiency in managing visual elements on the platform.
Read at DEV Community
Unable to calculate read time
Collection
[
|
...
]