building a svg icon system
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3430177/svg-font-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3430187/svg-font-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3430216/svg-font-4.png)
@eehayman
Why SVG?
- Rendering
- Control
- Sizing
- Accessibility
- Ease of Use
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433280/svg-font-5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433295/svg-6.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433298/svg-7.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433304/Poop_Emoji.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433311/High_Five_Emoji.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433321/svg-8.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433323/svg-9.png)
OK... but how?
background images
direct images (<img>)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433414/svg-10.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433419/svg-11.png)
The Sprite Bit
<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>
- Each icon defined in a <symbol>
- viewBox information required
then.... AJAX and Inject!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433454/svg-12.png)
actually using it
<svg>
<use xlink:href="#logo"></use>
</svg>
"xlink:href" value corresponds to icon's symbol ID in the sprite
but what about react?
As of v.14, xlink:href is available in JSX!
<svg>
<use xlinkHref='#logo' />
</svg>
No more dangerouslySetInnerHTML!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433470/Hugging_Face_Emoji.png)
We can do better!
make the icon... A component
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433478/svg-13.png)
flexible
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433478/svg-13.png)
reusable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433478/svg-13.png)
dynamic
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433504/svg-14.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433514/svg-15.png)
the nitty-gritty
- "Dumb" component (no lifecycle methods!)
- Written as a simple function
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 />
);
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433533/svg-16.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433535/svg-17.png)
leverage those props
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.
Accessibility
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.
the world is your oyster!
- Stroke
- Width
- Fill
- Animations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/312421/images/3433582/svg-18.png)
Questions?
Building a SVG Icon System with React
By ehayman
Building a SVG Icon System with React
- 3,083