Socket
Socket
Sign inDemoInstall

react-fontawesome-svg-icon

Package Overview
Dependencies
1
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-fontawesome-svg-icon

A minimal React component for Fontawesome SVG icon.


Version published
Maintainers
1
Install size
15.1 kB
Created

Readme

Source

build Known Vulnerabilities npm version min minzip tree-shaking codecov

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

Not supported yet:

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)

ModuleCountSize
+../../../../react-fontawesome-svg-icon/lib/index.esm.js1+1,574
+css ../../../../../node_modules/css-loader/dist/cjs.js!../../../../../node_modules/@fortawesome/fontawesome-svg-core/styles.css1+7,891
-../../../../../node_modules/@fortawesome/react-fontawesome/index.es.js5-91,949
-../../../../../node_modules/@fortawesome/fontawesome-svg-core/index.es.js1-76,794
-../../../../../node_modules/prop-types/index.js3-2,663
-webpack/runtime/compat get default export1-267
-webpack/runtime/define property getters1-308
-webpack/runtime/global1-221
-webpack/runtime/hasOwnProperty shorthand1-88
1 modules with minor changes+58

Keywords

FAQs

Last updated on 11 Sep 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc