React Vis Force with icons

App.js

import React, { PropTypes, Component } from 'react';
import {
  InteractiveForceGraph,
  ForceGraphLink,
  // ForceGraphNodeWithIcon,
  ForceGraphNode,
} from 'react-vis-force';
import tinycolor from 'tinycolor2';
import {range, random, omitBy, pickBy, isFunction } from 'lodash';

import ForceGraphNodeWithIcon from './ForceGraphNodeWithIcon';
import logo from './logo.svg';
import './App.css';

const radius = 15;
const linkWidth = 5;
const nodes = range(50).map(id => ({id: `${id}`, displayName: `test${id}`, icon: '\uf0c0', color: tinycolor.random().toString()}));
const links = nodes.map(({id}) => {
  const source = `${id}`;
  const target = `${random(0, 49)}`;
  return {id: `${source}${target}`, source, target};
});


class App extends Component {
  constructor(props){
    super(props);
    this.state = {scale: 1};
  }

  render() {
    const {scale} = this.state;

    // const nodes = [
    //   {id: '1', displayName: 'test', icon: '\uf0c0', color: 'blue'},
    //   {id: '2', displayName: 'test2', icon: '\uf2bc', color: 'red'},
    //   {id: '3', displayName: 'test3', icon: '\uf0c0', color: 'red'},
    //   {id: '4', displayName: 'test4asdf asdfsa df', icon: '\uf2bc', color: 'blue'},
    //   {id: '5', displayName: 'test5', icon: '\uf2bc', color: 'green'},
    //   {id: '6', displayName: 'test6', icon: '\uf0c0', color: 'green'},
    //   {id: '7', displayName: 'test7', icon: '\uf2bc', color: 'purple'},
    //   {id: '8', displayName: 'test8', icon: '\uf2bc', color: 'green'},
    //   {id: '9', displayName: 'test9', icon: '\uf0c0', color: 'green'},
    //   {id: '10', displayName: 'test10', icon: '\uf2bc', color: 'purple'}
    // ];
    // const links = [
    //   {id: '12', source: '1', target: '2'},
    //   {id: '13', source: '1', target: '3'},
    //   {id: '14', source: '1', target: '4'},
    //   {id: '53', source: '5', target: '3'},
    //   {id: '65', source: '6', target: '5'},
    //   {id: '76', source: '7', target: '6'},
    //   {id: '86', source: '8', target: '6'},
    //   {id: '98', source: '9', target: '8'},
    //   {id: '106', source: '10', target: '6'}
    // ];

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          <InteractiveForceGraph
            simulationOptions={{
              height: window.innerHeight,
              width: window.innerWidth - 50,
              animate: false,
              strength: {
                charge: -1000
              },
              radiusMargin: 25
            }}
            onSelectNode={(event, node) => console.log(node)}
            highlightDependencies
            zoom
            zoomOptions={{
              zoomSpeed: 0.065,
              minScale: 0.1,
              maxScale: 4,
              onZoom: (e, s) => this.setState({...this.state, scale: s}),
            }}
            labelAttr="displayName"
            labelOffset={{
              x: node => node.radius + 3,
              y: node => (node.radius / 2) * -1
            }}
            opacityFactor={0.8}
            >
            {nodes.map(node =>
              <ForceGraphNodeWithIcon key={`node-${node.id}`}
                icon={node.icon}
                iconOptions={{
                  fontFamily: 'FontAwesome',
                  fill: 'white',
                }}
                iconOffset={{
                  x: node => -0.38 * node.radius,
                  y: node => 0.25 * node.radius
                }}
                node={{...node, radius}}
                fill={node.color}
                stroke={tinycolor(node.color).darken(5)}
                strokeWidth={5 * scale}
                strokeOpacity={0.2}
                showLabel />
            )}
            {links.map(link =>
              <ForceGraphLink key={`link-${link.id}`} link={{...link, value: linkWidth}} />
            )}
          </InteractiveForceGraph>
        </p>
      </div>
    );
  }
}

export default App;