demo · v144
Use Tree Theming
Define an icon set once in <symbol>s with a hardcoded fill. Reuse with <use>. v144 makes the cascade walk into the use-tree correctly — a CSS theme on the outer <svg> finally overrides the inner fill, so the same icon set re-skins per context. Pre-144 needed JS or per-icon overrides.
SVG2 cascade in use-tree: checking…
bell
cog
heart
bolt
bookmark
pin
the API
<svg style="display:none">
<symbol id="bell" viewBox="0 0 24 24">
<path d="…" fill="#666"/> <!-- presentation attr -->
</symbol>
</svg>
<svg class="theme-primary"><use href="#bell"/></svg>
/* CSS now wins the cascade inside the use-tree (SVG2 alignment) */
.theme-primary use { fill: var(--accent-blue); }