Adding icons

In notebook:
Building Modern Web Apps
Created at:
2016-01-27
Updated:
2016-01-27
Tags:
libraries JavaScript React Ampersand Webpack
Use the github repo icons
Github Octicons -> it's a font and they've put it on npm
​$ npm i --save octicons​ to use
and just import it as we did with the css in app.js 
  // ****     app.js      ****
import ...
// ++++ 1. import the icons
import icons from 'octicons/octicons/octicons.css'
// webpack is great for this
// it will resolve the paths inside octincons.css

window.app = app

app.extend({
    init () {
        this.me = new Me()
        this.me.fetchInitialData()
        this.router = new Router();
        this.router.history.start();
    }
})

app.init();
In build webpack parsed octicons.css and included these assets into the output.
Explains why it's great for caching.
If it's smaller than a certain size, it will inline as data-url.
Now we just need to add appropriate classes
  // ****     pages/repos.js      ****
import React form 'react'
import ampersandMixin from 'ampersan-react-mixin'

export default React.createClass({
    mixins: ampersandMixin,
    
    render () {
        const {repos} = this.props
    
        return (
            <div>
                <h2>Repos</h2>
                <ul>
                    {repos.map( repo => 
                        // ++++ 1. add the className (css class)
                        (<li key={repo.id}><span className="octicon octicon-repo"> </span><a href="">{repo.full_name}</a></li>)
                    )}
                </ul>
            </div>
        )
    }
    
})