react-fontawesome-svg-icon

Disclaimer

This package exists to let bundle size be smaller. This is not an official package. If you are looking for an official one, please, check here: @fortawesome/react-fontawesome

Motivation

I regularly need Font Awesome SVG icon to be used in personal projects. Unfortunately, existing @fortawesome/react-fontawesome brings the whole @fortawesome/fontawesome-svg-core into my bundles. It seems to happen because of the way @fortawesome/fontawesome-svg-core package bundled - tree shaking cannot remove all unused code from it.

Demo

How it works

The package uses icon vector data provided by Fontawesome SVG packages (e.g. @fortawesome/free-solid-svg-icons or @fortawesome/free-regular-svg-icons) and styles from @fortawesome/fontawesome-svg-core.

It is important to include styles from @fortawesome/fontawesome-svg-core to the bundle to make it work. Check installation section to more details.

Example

import React from 'react';
import { FontAwesomeSvgIcon } from 'react-fontawesome-svg-icon';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

const App = () => (
    <FontAwesomeSvgIcon icon={faCoffee} />
);

export default App;

Resulting HTML

<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 640 512" class="svg-inline--fa fa-coffee fa-w-20 fa-lg">
    <path fill="currentColor" d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z">
    </path>
</svg>

Installation

Install react-fontawesome-svg-icon, @fortawesome/fontawesome-svg-core and required SVG icon packages.

npm install --save react-fontawesome-svg-icon @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

yarn add react-fontawesome-svg-icon @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Import @fortawesome/fontawesome-svg-core/styles.css into the entry point.

import React from 'react';
import ReactDOM from 'react-dom';
import '@fortawesome/fontawesome-svg-core/styles.css';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));

Feature Support

• Different icon collections via importing icons from different SVG icon packages.
• Sizing Icons.
• Custom className, style and color props.
• Fixed Width Icons.
• List Item Icons.
• Color Inversion.
• Pulled and Bordered icons.
• Opacity Swap for Duotone icons.
• Rotation.
• Flip.
• Spin Animation.
• Pulse Animation.
• Icon Title.
• Tab Index.
• Ref Forwarding. Component is wrapped with React.forwardRef. The ref passed to the root SVG element.
• SVG symbols.

Not supported yet:

• transform property: Power Transforms
• mask property: Masking Icons

Bundle Size Comparison

A simple React application with react-fontawesome-svg-icon bundle compared to a similar application with @fortawesome/react-fontawesome bundle.

Baseline:

• main.js 173.42 kB (55.91 kB gzipped)
• main.css 619 B (372 B gzipped)

Comparison:

• main.js 141.57 kB (45.95 kB gzipped)
• main.css 6.79 kB (1.71 kB gzipped)

main (-25,675 bytes)

	Module	Count	Size
+	../../../../react-fontawesome-svg-icon/lib/index.esm.js	1	+1,574
+	css ../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/@fortawesome/fontawesome-svg-core/styles.css	1	+7,891
-	../../../../../node_modules/@fortawesome/react-fontawesome/index.es.js	5	-91,949
-	../../../../../node_modules/@fortawesome/fontawesome-svg-core/index.es.js	1	-76,794
-	../../../../../node_modules/prop-types/index.js	3	-2,663
-	webpack/runtime/compat get default export	1	-267
-	webpack/runtime/define property getters	1	-308
-	webpack/runtime/global	1	-221
-	webpack/runtime/hasOwnProperty shorthand	1	-88
△	1 modules with minor changes		+58