What’s this useful for?
While not a feature I reach for every day, it’s useful to know that React supports rendering SVG within JSX. This is because SVG markup can be written directly within HTML, and JSX is no different. These JSX-controlled SVGs are useful for templating SVGs and rendering them with different props for different use cases.
Even something as simple as using this feature for UI icons can save a good amount of asset bundle size by allowing for more granular control than we’re able to achieve with the currentColor CSS technique.
Example: Template-driven icon component
Now that we’ve explored a couple use cases, let’s take a look at a simple one: controlling an SVG icon with props for color and size.
const BrowserIcon = color size<svg=""="1.1"==="0 0 8 8"><path=="M.344 0a.5.5 0 0 0-.344.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0-.094 0 .5.5 0 0 0-.063 0zm1.156 1c.28 0 .188.8.131.52s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm2 0h3c.28 0 .184.108.40.206s-.22.5-.5.5h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5zm-2.5 2h6v4h-6v-4z"/></svg>;const ICON =COLORS:BRAND: '#106fa5'SIZES:MED: 24;
import BrowserIcon ICON from './icons.jsx';const Example =<BrowserIcon = = />;
Server-side rendering is an excellent feature of React. It’s frequently used for pre-rendering single page applications, improving the experience of an initial page load. Server-side rendering is also useful for non-SPA websites.
Demonstrating a quick CSS fix for blurry background SVGs in Internet Explorer 11.