@eehayman
<svg class="svg-sprite"> <defs> <symbol id="logo" viewBox="0 0 336 335"> <path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100"/> </symbol> </defs> </svg>
<svg> <use xlink:href="#logo"></use> </svg>
"xlink:href" value corresponds to icon's symbol ID in the sprite
As of v.14, xlink:href is available in JSX!
<svg> <use xlinkHref='#logo' /> </svg>
No more dangerouslySetInnerHTML!
function IconLogo() { return ( <svg className="logo" viewBox="0 0 336 335"> <path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100"/> </svg> ) }
render() { return ( <IconLogo /> ); }
function IconLogo(props) { const iconFill = props.iconFill || 'red'; return ( <svg className="logo" viewBox="0 0 336 335"> <path fill={iconFill} d="c 50,0 50,100 100,100 50,0 50,-100 100,-100"/> </svg> ) }
We can now dynamically update SVG properties based on their relative context.
Codepen
function IconLogo(props) { const iconTitle = props.iconTitle; return ( <svg className="logo" viewBox="0 0 336 335" aria-labelledby={iconTitle}> <title>{iconTitle}</title> <path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100"/> </svg> ) }
The title should contain relevant, specific text to indicate the meaning of the icon.
By ehayman