[css-link-params] Let’s fix icons on the Web! Aka a way to pass currentColor and other context to linked SVGs #9872
Description
Problem statement & Motivation
This is an area of the web platform where small improvements could save authors a lot of pain.
Right now, authors frequently want to reuse vector icons with different colors for different parts of their UI (often even changing the color with user interactions). The current ways to do that are:
- Inline SVG with
<use>element, so that its color can change viacurrentColor. - Inline SVG that simply embeds the whole icon
- Icon font. This allows changing the icon color via CSS, but has a ton of other drawbacks.
For example, look at the ways Bootstrap Icons and Font Awesome recommend for embedding. All this complication is done entirely to pass currentColor to the icon!!
While color is the primary use case, there are other context aspects that it would be useful to be able to pass to linked files, such as:
- Font (since they cannot embed their own webfonts)
- Color scheme (light vs dark mode)
Prior art
There have been several SVG Params specs, but none moved forwards:
- Doug’s old SVG Parameters based on URL parameters and
<param>elements in<object> - Tab’s more recent SVG Params based on custom properties
These are strictly more powerful, and would solve a superset of use cases, but are also far more complex to implement.
Proposal
I want to propose something much simpler: A way to pass aspects of the page’s CSS context to an SVG linked via CSS (and hopefully later backport to HTML <img>). We could even start entirely with currentColor, since that’s by far the biggest author pain point.
We could extend src() with a second argument for passing parameters to the resource being embedded, possibly after a with keyword (inspired from JS Import assertions).
Then, we could either use a series of keywords (where color passes currentColor) or a context() function that takes a series of keywords.
content: src("icon.svg" with color);content: src("icon.svg" with context(color, font, color-scheme)) The keywords themselves could be named after CSS properties (e.g. color, font) or values (e.g. currentColor).
content: src("icon.svg" with context(currentColor)) I’m proposing extending src() only since its parsing is simpler, but we may want to extend url() as well (when strings are used for the URL).