building a svg icon system

@eehayman

Why SVG?

  • Rendering
  • Control
  • Sizing
  • Accessibility
  • Ease of Use

OK... but how?

background images

 direct images (<img>)

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!

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!

We can do better!

make the icon... A component

flexible

reusable

dynamic

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 />
   );
}

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

Questions?

Building a SVG Icon System with React

By ehayman

Building a SVG Icon System with React

  • 3,150