Using inline SVG for greater flexibility with colourising

src/js/components/Header.js

@@ -62,7 +62,7 @@ export default class Header extends React.Component{
 	render(){
 		return (
 			<header className={(this.props.className ? this.props.className : null)}>
-				{this.props.icon ? <Icon name={this.props.icon} /> : null}
+				{this.props.icon ? <Icon className="header-icon" name={this.props.icon} /> : null}
 				{this.props.title ? <h1>{ this.props.title }</h1> : null}
 				{this.renderOptions()}
 			</header>

src/js/components/Icon.js

@@ -1,17 +1,46 @@
 
 import React, { PropTypes } from 'react'
-import { Link } from 'react-router'
 
 export default class Icon extends React.Component{
 
 	constructor(props){
 		super(props);
+
+		this.state = {
+			data: null
+		}
+	}
+
+	componentDidMount(){
+		this.load();
+	}
+
+	componentWillReceiveProps(newProps){
+		if (this.props.name !== newProps.name){
+			this.load();
+		}
+	}
+
+	load(){		
+		var self = this;
+		var url = 'assets/icons/'+this.props.name+'.svg';
+		var xmlHttp = new XMLHttpRequest();
+
+		xmlHttp.onreadystatechange = function(){ 
+			if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
+				self.setState({data: xmlHttp.responseText});
+			}
+		}
+		xmlHttp.open("GET", url, true);
+		xmlHttp.send(null);
 	}
 
 	render(){
 		var className = 'icon';
-		if (this.props.className ) className += ' '+this.props.className;
-		var src = require('../../assets/icons/'+this.props.name+'.svg');
-		return <img className={className} src={src} />;
+		if (this.props.className){
+			className += ' '+this.props.className;
+		}
+
+		return <span className={className} dangerouslySetInnerHTML={{ __html: this.state.data}}></span>;
 	}
 }

src/js/views/Queue.js

@@ -5,6 +5,7 @@ import { hashHistory, Link } from 'react-router'
 import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
+import Icon from '../components/Icon'
 import Parallax from '../components/Parallax'
 import TrackList from '../components/TrackList'
 import Track from '../components/Track'
@@ -141,7 +142,7 @@ class Queue extends React.Component{
 		var options = (
 			<span>
 				{this.props.spotify_enabled ? <button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
-					<FontAwesome name="podcast" />&nbsp;
+					<Icon name="broadcast" />&nbsp;
 					Radio
 					{this.props.radio && this.props.radio.enabled ? <span className="flag blue">On</span> : null}
 				</button> : null}