uhhm/portal
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 25 Wiki Activity

Feature icons: masked span painted by currentColor, not <img>
Deploy / deploy (push) Successful in 1m1s
Details

Browse Source 
An image can't take the text color; a mask-image painted by
background-color can. Icons now follow --feature-accent when the
feature declares a color, and the surrounding text color otherwise.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Bendik Aagaard Lynghaug
2026-08-12 23:36:14 +02:00
co-authored by Claude Sonnet 5
parent 34a027e17b
commit ca09dce90c
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.rs
+10 -2
View File
@@ -699,8 +699,16 @@ fn AlternativeCard(
let icon = feature.icon.clone();
view! {
<div class="feature" style:--feature-accent=color>
{icon.filter(|i| is_safe_icon_name(i)).map(|icon| view! {
<img class="feature-icon" src=format!("https://api.iconify.design/{icon}.svg") alt="" />
{icon.filter(|i| is_safe_icon_name(i)).map(|icon| {
// Masked span, not <img>: an image can't take
// currentColor, a mask painted by background-color can.
let u = format!("https://api.iconify.design/{icon}.svg");
view! {
<span
class="feature-icon"
style=format!("mask-image:url({u});-webkit-mask-image:url({u})")
></span>
}
})}
<Show when={
let name = feature.name.clone();