Context
When users set color: accent (or any theme token like primary, textSecondary) on icon content items in their YAML, the icon disappears because lucide-react doesn't recognize these strings as valid CSS colors.
Affected Files
pages/approach/content.yml — multiple icons with color: accent
pages/services/content.yml — icons with theme token colors
pages/contact/content.yml — icons with theme token colors
Root Cause
In packages/core/src/components/media/Media.tsx, the renderIcon function passes color directly to lucide-react:
const renderIcon = (src: string, sizePx: number | string, color?: string) => {
const IconComponent = getIconRegistry()?.get(src);
if (IconComponent) {
return <IconComponent size={sizePx} color={color || 'currentColor'} />;
}
// ...
};
Lucide-react expects valid CSS color values. Theme tokens like "accent" are not CSS colors — they're resolved at the theme level to hex values.
Desired Behavior
- Theme tokens like "accent", "primary", "textSecondary" should resolve to their actual hex values before being passed to lucide-react
- OR use CSS variables:
<IconComponent style={{ color: 'var(--accent)' }} />
The CSS variable approach is preferred because:
- It respects dark/light mode automatically
- No runtime color resolution needed
- Matches how theme tokens work in other framework components
Suggested Approach
Modify renderIconMedia and renderIcon in Media.tsx to use CSS variable syntax:
const renderIcon = (src: string, sizePx: number | string, color?: string) => {
const IconComponent = getIconRegistry()?.get(src);
if (IconComponent) {
const iconStyle = color && isThemeToken(color)
? { color: `var(--${color})` }
: { color: color || 'currentColor' };
return <IconComponent size={sizePx} style={iconStyle} />;
}
};
Workaround for Now
Remove color: accent (and similar) from icon definitions in content.yml files until this is fixed.
Priority
LATER — This is a real bug but has a simple workaround.
Context
When users set
color: accent(or any theme token likeprimary,textSecondary) on icon content items in their YAML, the icon disappears because lucide-react doesn't recognize these strings as valid CSS colors.Affected Files
pages/approach/content.yml— multiple icons withcolor: accentpages/services/content.yml— icons with theme token colorspages/contact/content.yml— icons with theme token colorsRoot Cause
In
packages/core/src/components/media/Media.tsx, therenderIconfunction passescolordirectly to lucide-react:Lucide-react expects valid CSS color values. Theme tokens like "accent" are not CSS colors — they're resolved at the theme level to hex values.
Desired Behavior
<IconComponent style={{ color: 'var(--accent)' }} />The CSS variable approach is preferred because:
Suggested Approach
Modify
renderIconMediaandrenderIconinMedia.tsxto use CSS variable syntax:Workaround for Now
Remove
color: accent(and similar) from icon definitions in content.yml files until this is fixed.Priority
LATER — This is a real bug but has a simple workaround.