Building reusable SVG icons w React

SVGIcons.js

import React from 'react'

// So, this is awesome. And it's the approach I took in my own site.
// Nothing wrong with it!
const IconUmbrella = React.createClass({
  render() {
    return (
      <svg className="umbrella" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="umbrella icon">
        <title>Umbrella</title>
        <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>
      </svg>
    )
  }
});

// However, if all we have is a render() method, we can eliminate
// a lot of the createClass cruft and just use a pure function! This
// only works in React >= 0.14, which most people are using these days.
function IconUmbrella() {
  return (
    <svg className="umbrella" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="umbrella icon">
      <title>Umbrella</title>
      <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z"/>
    </svg>
  )
}

// For more complex icons that need custom props, we get props as the
// first argument to our component function. We can even do default props!
function IconOffice(props) {
  const width = props.width || '100px'
  const height = props.height || '200px'
  const bookside = props.bookside || '#353f49'
  const bookfront = props.bookfront || '#474f59'

  return (
    <svg className="office" xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 188.5 188.5"
      aria-labelledby="Office Icon"
    >
      <title>Office Icon</title>
      <g className="cls-2">
        <circle id="background" className="cls-3" cx="94.2" cy="94.2" r="94.2"/>
        <path className="cls-4" d="M50.3 69.8h10.4v72.51H50.3z"/>
        <path fill={bookside} d="M50.3 77.5h10.4v57.18H50.3z"/>
        <path fill={bookfront} d="M60.7 77.5h38.9v57.19H60.7z"/>
        <path className="cls-7" d="M60.7 69.8h38.9v7.66H60.7z"/>
        <path className="cls-5" d="M60.7 134.7h38.9v7.66H60.7z"/>
      </g>
    </svg>
  )
}

// React >= 0.14 is able to render these functions just like normal components
render(<IconOffice/>, node)

That seems fine but everytime you use the component the SVG html will be pasted to the document. What about if you use it like 100 times in the website?