Include Sass function and support inline SVGs as background images

Created on 16 March 2021, almost 4 years ago
Updated 27 September 2024, 3 months ago

Problem/Motivation

For even greater flexibility, we could also compile a Sass map with inline SVG data for use in the background-image property. As noted in this post, data URLs have several advantages. One limitation is that the color(s) of the icon cannot be changed using "fill" or "stroke" properties; ideally a solution here would be to allow for token replacement with a Sass function when defining an icon class.

Proposed resolution

In addition to creating SVG sprites, we will also create an SCSS file with a Sass map of all SVG data. Additionally, following the method described here, we will append a Sass function for retrieving a particular icon and colorizing it as needed. Themes will then just need to import the map and create icon classes as needed.

✨ Feature request
Status

Closed: outdated

Version

1.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States beunerd Providence, Rhode Island

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024