Adding icons
Use the github repo icons
Github Octicons -> it's a font and they've put it on npm
$ npm i --save octicons
to useand 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>
)
}
})