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 .18.104.22.168s-.22.5-.5.5-.5-.22-.5-.5.22-.5.5-.5zm2 0h3c.28 0 .22.214.171.124s-.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 = = />;