Generic icon React component for use with SVG glyphs

_icon.es16.jsx

import React, { Component } from 'react';

// _icon is my namespacing choice for glyphs--it could easily be set 
// as an env variable
export default class Icon extends Component {
  fullName(href='') {
    return `#${href}_icon-${this.props.glyph}`;
  }
  
  render() {
    const glyph = this.props.glyph;
    let wrapperClasses = [
      '_icon',
      '_icon-' + glyph,
      this.props.className
    ];

    return (
      <svg className={wrapperClasses.join(' ')}>
        <use xlinkHref={this.fullName()} />
      </svg>
    )
  }
}

Icon.defaultProps = {
  glyph: '',
  className: '',
};

_icon.jsx

var React = require('react');

var Icon = React.createClass({
  displayName: 'Icon',
  getInitialState: function() {
    return {
    };
  },

  getDefaultProps: function() {
    return {
      glyph: 'star',
      className: '',
    };
  },

  fullName: function (href) {
    return ['#', href, '_icon-' + this.props.glyph].join('');
  },

  render: function() {
    var glyph = this.props.glyph;
    var wrapperClasses = [
      '_icon',
      '_icon-' + glyph,
      this.props.className
    ];

    return (
      <svg className={wrapperClasses.join(' ')}>
        <use xlinkHref={this.fullName()} />
      </svg>
    )
  }
});
module.exports = Icon;