Scalable Vector Graphics
Last but not least, one of the most interesting techniques we can apply in the browser to draw icons and graphs is Scalable Vector Graphics (SVG).
SVG is great, because it is a declarative way of describing vectors and it fits perfectly with the purposes of React.
We used to use icon fonts to create icons, but they have well-known problems, with the first being that they are not accessible. It is also pretty hard to position icon fonts with CSS, and they do not always look beautiful in all browsers. These are the reasons we should prefer SVG for our web applications.
From a React point of view, it does not make any difference if we output a div or an SVG element from the render method, and this is what makes it so powerful. ...
Get React Design Patterns and Best Practices now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
