Working with multiple colors
Let's imagine that we have a really different icons with next requirements:
- We have some known list of the accent colors, and we want to specify them in our CSS
- All other colors should be inherited from the parent (for example,
currentColor)
Configure resetColors option
TIP
In previous guide we've explained resetColors option in details.
typescript
import svg from '@neodx/svg/vite';
svg({
// ...
resetColors: {
// 1. Define known accent colors
replace: {
from: ['#6C707E', '#A8ADBD', '#818594'],
to: 'var(--icon-accent-color)'
},
// 2. Replace all other colors with `currentColor`
replaceUnknown: 'currentColor'
}
});Add CSS variables
css
/* shared/ui/index.css */
@layer base {
:root {
/* make default accent color */
--icon-primary-color: #6c707e;
}
}Usage
Dirty but works 🫢
Probably, you can find a better solution 🫠
tsx
import { Icon } from '@/shared/ui';
export function SomeFeature() {
return (
<Icon
name="common/add"
className="text-red-800 [--icon-primary-color:theme(colors.green.800)]"
/>
);
}