Image alternates now embedded in their fonts

app/scripts/components/alternate-menu.components.jsx

@@ -1,17 +1,10 @@
 import React from 'react';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import LocalClient from '../stores/local-client.stores.jsx';
 
-export default class AlternateMenu extends React.Component {
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
+export default class AlternateMenu extends React.PureComponent {
 	render() {
-
-		const alternates = _.map(this.props.alternates, (alt, index) => {
+		const alternates = this.props.alternates.map((alt, index) => {
 			return <Alternate id={index} alt={alt} key={index} unicode={this.props.unicode}/>;
 		});
 
@@ -26,10 +19,11 @@ export default class AlternateMenu extends React.Component {
 	}
 }
 
-class Alternate extends React.Component {
+class Alternate extends React.PureComponent {
 	constructor(props) {
 		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+
+		this.selectAlternate = this.selectAlternate.bind(this);
 	}
 
 	componentWillMount() {
@@ -42,8 +36,8 @@ class Alternate extends React.Component {
 
 	render() {
 		return (
-			<div className="alternate" onClick={() => {this.selectAlternate();}}>
-				<img src={`assets/images/${this.props.alt.altImg}`}/>
+			<div className="alternate" onClick={this.selectAlternate}>
+				<img src={this.props.alt.altImg} />
 			</div>
 		);
 	}