SVG Icons in react

Icon.js

import React from 'react'
import classes from 'classnames'

const ICONS = {
  'arrow-left': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-arrow-left"></use>`,
  'arrow-right': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-arrow-right"></use>`,
  'tick': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-tick"></use>`,
  'cross': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-cross"></use>`,
  'thin-cross': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-thin-cross"></use>`,
  'comment': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-comment"></use>`,
  'location': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-location"></use>`,
  'social': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-social"></use>`,
  'whatsapp': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-whatsapp"></use>`,
  'facebook': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-facebook"></use>`,
  'twitter': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-twitter"></use>`,
  'add': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-add"></use>`,
  'post': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-post"></use>`,
  'list': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-list"></use>`,
  'quiz': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-quiz"></use>`,
  'review': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-review"></use>`,
  'draft': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-draft"></use>`,
  'media': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-media"></use>`,
  'settings': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-settings"></use>`,
  'chat': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-chat"></use>`,
  'pin': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-pin"></use>`,
  'help': `<use
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xlink:href="/assets/images/icons.svg#icon-help"></use>`
}

const Icon = props => {
  /* eslint-disable no-use-before-define */
  const {
    name,
    className,
    title,
    role = 'img',
    ...rest } = props
  const useTag = ICONS[name]
  /* eslint-enable no-use-before-define */

  if (!useTag) {
    throw new Error(`${name} icon does not exist.`)
  }

  return (
    <svg
      {...{ role, title: title || `${name} icon` }}
      {...rest}
      className={classes('icon', className)}
      dangerouslySetInnerHTML={{ __html: useTag }} />)
}

export default Icon