Return to Archive
Type: Protocol2026.04.17

Using SVGs as Components

Author

Omnath Dubey

Research Visual
SRC: LABORATORY_RENDER_01
STATUS: VERIFIED

Why `img src` isn't enough. Styling and animating SVGs by inlining them in React.

If you use `<img src="icon.svg" />`, you can't change its color with CSS on hover. ### Inline SVG `<svg fill="currentColor" ... />` Now the icon inherits the text color. `className="text-red-500 hover:text-blue-500"` This allows for dynamic theming (Dark Mode) without loading multiple icon files.
#SVG#React#CSS#WebDesign
Share Protocol

Related Protocols

View Archive