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.

Codepen

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?