react-fontawesome-slim
v1.0.0
Published
A minimal React component for Fontawesome SVG icon from react-fontawesome-svg-icon
Downloads
3
Maintainers
Readme
React FontAwesome Slim
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. This library is also created from Eugene Zinovyev's react-fontawesome-svg-icon.
Motivation
Existing @fortawesome/react-fontawesome brings the whole @fortawesome/fontawesome-svg-core into the final bundle, making the bundle size way bigger.
Existing react-fontawesome-svg-icon made by Eugene Zinovyev also had its last update early this year. React 18, launched in late March was not included on its peer list.
This library was made to both support the latest version of React, while also making the bundle size smaller.
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
andcolor
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 Transformsmask
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|