Skip to content

Instantly share code, notes, and snippets.

@sandor11

sandor11/App.jsx

Last active September 10, 2018 12:49
Show Gist options
  • Save sandor11/0319e27d0ef43637ff399ec303fa116f to your computer and use it in GitHub Desktop.
Save sandor11/0319e27d0ef43637ff399ec303fa116f to your computer and use it in GitHub Desktop.
Download ZIP
using font-awesome with React, CSS Modules, Webpack 2 and Hot Module Reloading
Raw
app.css
.highlight {
color: aquamarine;
font-weight: bold;
font-size: 2em;
}
Raw
App.jsx
import * as React from 'react';
import styles from './app.css';
import { fa, fa_question } from './icons';
console.log(fa);
const App = () => {
return (
<div>
<h1 className={styles.highlight}><span className={[fa, fa_question].join(' ')} /> React with font-awesome... like a boss!</h1>
</div>
)
}
export default App;
Raw
icons.jsx
import fontAwesome from 'font-awesome/css/font-awesome.css';
const { fa, 'fa-question':fa_question } = fontAwesome;
export {
fa,
fa_question
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My React App</title>
</head>
<body>
<div id="base-element"></div>
<script src="bundle.js"></script>
</body>
</html>
Raw
webpack.config.js
const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
resolve: {
extensions: [".js", ".json", ".jsx"],
},
entry: [
'react-hot-loader/patch',
// activate HMR for React
'webpack-dev-server/client?http://localhost:8080',
// bundle the client for webpack-dev-server
// and connect to the provided endpoint
'webpack/hot/only-dev-server',
// bundle the client for hot reloading
// only- means to only hot reload for successful updates
'./Main.jsx'
// the entry point of our app
],
output: {
filename: 'bundle.js',
// the output bundle
path: resolve(__dirname, 'dist'),
publicPath: '/'
// necessary for HMR to know where to load the hot update chunks
},
context: resolve(__dirname, 'src'),
devtool: 'inline-source-map',
devServer: {
hot: true,
// enable HMR on the server
contentBase: resolve(__dirname, 'dist'),
// match the output path
publicPath: '/'
// match the output `publicPath`
},
module: {
rules: [
{
test: /\.js$/,
use: [
'babel-loader',
],
exclude: /node_modules/
},
{
test: /\.jsx$/,
use: [
'babel-loader',
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader?modules=true'
],
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
'file-loader?limit=10000',
]
}
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NamedModulesPlugin(),
// prints more readable module names in the browser console on HMR updates
],
};
@lexblagus
Copy link

Thank you for sharing. Had a hard time trying make it work.
Please use any other icon as example, "fa-question" lead me believe it was not working, thought was an unrecognized character.

@Apostata
Copy link

Apostata commented Sep 10, 2018 •
edited
Loading

Thank you so much.
Based in your solution, I made a component to use fontawesomwe:
import React from 'react';
import fa from 'font-awesome/css/font-awesome.min.css';

const FontAwesome = (props) => {
let classes = [fa['fa']];
let inheritedClasses = props.icon.split(' ');

inheritedClasses.forEach(classe => {
    classes.push(fa[classe]);
});

return <i className={classes.join(' ')}></i>

}

export default FontAwesome;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment