Stop shipping ten variants of the same SVG. One file with stroke="currentColor" and a strokeWidth prop adapts to color, stroke, and theme at the call site — <MyIcon color="red" strokeWidth={2} /> is all the consumer needs. In React Native that means react-native-svg plus react-native-svg-transformer, wired into metro.config.js, with the .svg imported directly as a component.
The full post covers the metro config, the SVG markup that exposes currentColor and a {strokeWidth} placeholder, and why the same trick extends to strokeLinecap, strokeLinejoin, and strokeOpacity — fewer assets, easier theming, and icons that respond to hover/focus without a second file.
Originally published at andreasbergstrom.dev — read the full post there.
Top comments (0)