SVG guides

Practical guides to working with SVG files: changing colors, editing text, turning SVGs into React components and building icon sprites.

• How to change the colors of an SVG

  Change an SVG's colors by editing its fill and stroke, with CSS and currentColor, or with a free online recolor tool — with examples for each method.

• How to edit text in an SVG

  Edit the words, font, size and color of text in an SVG — in the code or visually in a browser editor — and why some SVG text can't be edited at all.

• How to turn an SVG into a React component

  Convert an SVG into a reusable React component: the JSX attribute changes it needs, how to pass size and color as props, TypeScript typing, and the alternatives.

• SVG sprite sheets, explained

  What an SVG sprite is, how <symbol> and <use> work, how to build one from a set of icons, how to style sprite icons, and the pitfalls with ids and external files.