How do I convert SVG colors to CSS variables?

Click Convert to CSS variables. Unique hex fills become --svg-c1, --svg-c2 on the root, and shapes use var(--svg-cN).

How is this different from a CSS fill class?

Variables keep multiple colors. A single CSS fill class forces one fill. Use Fill Color With CSS for a one-class theme.

Yes. Change --svg-c1 on the root style or in a parent stylesheet.

Yes when they are hex/rgb. none and url() paints are left alone.

FAQ

Quick answers

How do I convert SVG colors to CSS variables?: Click Convert to CSS variables. Unique hex fills become --svg-c1, --svg-c2 on the root, and shapes use var(--svg-cN).
How is this different from a CSS fill class?: Variables keep multiple colors. A single CSS fill class forces one fill. Use Fill Color With CSS for a one-class theme.
Can I edit the tokens after conversion?: Yes. Change --svg-c1 on the root style or in a parent stylesheet.
Are stroke colors converted too?: Yes when they are hex/rgb. none and url() paints are left alone.

Source

Ready

React component

React Native (react-native-svg)

PNG export · 2× for retina

0 B