
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
React Font Awesome is distributed via npm:
npm install react react-fa
You also need to install webpack which is the only bundler at the moment capable to bundle not only JavaScript code but also stylesheets and static assets such as fonts and images:
npm install webpack
You also need a couple of loaders for webpack:
npm install babel-loader style-loader css-loader url-loader file-loader
npm install extract-text-webpack-plugin
Just as simple as:
import React from 'react'
import ReactDOM from 'react-dom'
import {Icon} from 'react-fa'
ReactDOM.renderComponent(
<Icon spin name="spinner" />,
document.getElementById('main')
)
Props in []
are optional
Prop | Type | Default | Description |
---|---|---|---|
name | string | undefined | Required: Name of the Font Awesome Icon |
[className] | string | undefined | Set a CSS class for extra styles |
[size] | string | undefined | Increase size: 'lg', '2x', '3x', '4x', '5x' |
[rotate] | string | undefined | Rotate by deg: '45', '90', '135', '180', '225', '270', '315' |
[flip] | string | undefined | Flips Icon: 'horizontal', 'vertical' |
[fixedWidth] | boolean | false | Set Icon to a fixed width |
[spin] | boolean | false | Rotate Icon |
[pulse] | boolean | false | Rotate Icon in 8 steps |
[stack] | string | undefined | Stack Icons: '1x', '2x'. More Info |
[inverse] | boolean | false | Inverse the Icon color |
[Component] | string/func | span | Alternate DOM element |
Prop | Type | Default | Description |
---|---|---|---|
[children] | node | undefined | Required: Child elements |
[size] | string | undefined | Increase size: 'lg', '2x', '3x', '4x', '5x' |
[className] | string | undefined | Set a CSS class for extra styles |
Use the following webpack config (put it in webpack.config.js
):
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: './index.js',
output: {
path: 'assets',
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
}
]
},
plugins: [
new ExtractTextPlugin('bundle.css')
]
}
which compile everything (js, stylesheets and icon fonts) into assets/
directory so you would need this basic HTML file to start your app:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="assets/bundle.css">
</head>
<body>
<div id="main"></div>
<script src="assets/bundle.js"></script>
</body>
</html>
Note: If you run into issues with loading the FontAwesome font when not using ExtractTextPlugin
, this might be fixed by making your publicPath
absolute. See this StackOverflow question for details.
FAQs
Font Awesome icons as React components
We found that react-fa demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.