@fortawesome/react-fontawesome

@fortawesome/react-fontawesome

Version 3.3.1
Published 10 days ago
103 kB
No dependencies
MIT license

Install

npm i @fortawesome/react-fontawesome

yarn add @fortawesome/react-fontawesome

pnpm add @fortawesome/react-fontawesome

Overview

Official React component for Font Awesome

Index

Variables

variable FontAwesomeIcon

const FontAwesomeIcon: React.ForwardRefExoticComponent<any>;

React Component for rendering Font Awesome icons.
FontAwesomeIcon
Parameter props
The properties for the FontAwesomeIcon component, including icon definition and styling options.
Returns
A React element representing the Font Awesome icon, or null if the icon cannot be rendered.

Functions

function FontAwesomeLayers

FontAwesomeLayers: ({
    children,
    className,
    size,
    ...attributes
}: FontAwesomeLayersProps) => react_jsx_runtime.JSX.Element;

React Component that allows you to stack multiple Font Awesome icons on top of each other, or to layer with text or a counter.

Example 1

import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/react-fontawesome'
import { faBookmark, faCircle, faCheck, faHeart, faMoon, faPlay, faStar, faSun } from '@fortawesome/free-solid-svg-icons'

// React versions of the examples from the FontAwesome Web Docs
export const Examples = () => (
  <div className="fa-4x">
    <FontAwesomeLayers>
      <FontAwesomeIcon icon={faCircle} color="tomato" />
      <FontAwesomeIcon icon={faCheck} inverse transform="shrink-6" />
    </FontAwesomeLayers>
    <FontAwesomeLayers>
      <FontAwesomeIcon icon={faBookmark} />
      <FontAwesomeIcon icon={faHeart} color="tomato" transform="shrink-10 up-2" />
    </FontAwesomeLayers>
    <FontAwesomeLayers>
      <FontAwesomeIcon icon={faPlay} transform="rotate--90 grow-4" />
      <FontAwesomeIcon icon={faSun} inverse transform="shrink-10 up-2" />
      <FontAwesomeIcon icon={faMoon} inverse transform="shrink-11 down-4.2 left-4" />
      <FontAwesomeIcon icon={faStar} inverse transform="shrink-11 down-4.2 right-4" />
    </FontAwesomeLayers>
  </div>
)

For examples using Text or Counter components:

function LayersCounter

LayersCounter: ({
    count,
    className,
    style,
    ...attributes
}: any) => React.JSX.Element;

Counter component to be used within a FontAwesomeLayers component.

Example 1

import { FontAwesomeLayers, LayersCounter } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'

// React version of the example from the FontAwesome Web Docs
export const Example = ({ count = 1419 }) => (
  <FontAwesomeLayers size="4x">
    <FontAwesomeIcon icon={faEnvelope} />
    <LayersCounter count={count.toLocaleString()} style={{ backgroundColor: 'tomato' }} />
  </FontAwesomeLayers>
)

function LayersText

LayersText: ({
    text,
    className,
    inverse,
    transform,
    style,
    ...attributes
}: any) => React.JSX.Element;

Text component to be used within a FontAwesomeLayers component.

Example 1

import { FontAwesomeLayers, LayersText } from '@fortawesome/react-fontawesome'
import { faCalendar, faCertificate } from '@fortawesome/free-solid-svg-icons'

// React versions of the examples from the FontAwesome Web Docs
export const Examples = () => (
  <div className="fa-4x">
    <FontAwesomeLayers>
      <FontAwesomeIcon icon={faCalendar} />
      <LayersText
        text="27"
        inverse
        style={{ fontWeight: '900' }}
        transform="shrink-8 down-3"
      />
    </FontAwesomeLayers>
    <FontAwesomeLayers>
      <FontAwesomeIcon icon={faCertificate} />
      <LayersText
        text="NEW"
        inverse
        style={{ fontWeight: '900' }}
        transform="shrink-11.5 rotate--30"
      />
    </FontAwesomeLayers>
  </div>
)

Interfaces

interface AnimationProps

interface AnimationProps {}

property beat

beat?: boolean | undefined;

Makes the icon scale in and out continuously.
See Also
- https://docs.fontawesome.com/web/style/animate#beat

property beatFade

beatFade?: boolean | undefined;

Applies both scaling and fading animations from beat and fade.
See Also
- https://docs.fontawesome.com/web/style/animate#beat-fade

property bounce

bounce?: boolean | undefined;

Makes the icon bounce up and down.
See Also
- https://docs.fontawesome.com/web/style/animate#bounce

property fade

fade?: boolean | undefined;

Makes the icon fade in and out continuously.
See Also
- https://docs.fontawesome.com/web/style/animate#fade

property pulse

pulse?: boolean | undefined;

See Also
- https://docs.fontawesome.com/web/style/animate#spin-utilities
Deprecated
Will be removed in a future version. Please use spinPulse instead.
Makes the icon spin 360deg clockwise in 8 incremental steps.

property shake

shake?: boolean | undefined;

Makes the icon shake.
See Also
- https://docs.fontawesome.com/web/style/animate#shake

property spin

spin?: boolean | undefined;

Makes the icon spin 360deg clockwise continuously.
See Also
- https://docs.fontawesome.com/web/style/animate#spin

property spinPulse

spinPulse?: boolean | undefined;

Makes the icon spin 360deg clockwise in 8 incremental steps.
See Also
- https://docs.fontawesome.com/web/style/animate#spin

property spinReverse

spinReverse?: boolean | undefined;

When used in conjunction with spin or spinPulse, makes the icon spin in reverse.
See Also
- https://docs.fontawesome.com/web/style/animate#spin-utilities

interface CSSVariables

interface CSSVariables extends FontFamilyVariables {}

Adds support for FA's CSS variables to the React style prop.
TODO: Move this to fontawesome-common-types
See Also
- https://github.com/FortAwesome/react-fontawesome/pull/581#discussion_r2291185167

property '--fa-animation-delay'

'--fa-animation-delay'?: string | undefined;

property '--fa-animation-direction'

'--fa-animation-direction'?: string | undefined;

property '--fa-animation-duration'

'--fa-animation-duration'?: string | undefined;

property '--fa-animation-iteration-count'

'--fa-animation-iteration-count'?: string | undefined;

property '--fa-animation-timing'

'--fa-animation-timing'?: string | undefined;

property '--fa-beat-fade-opacity'

'--fa-beat-fade-opacity'?: string | undefined;

property '--fa-beat-fade-scale'

'--fa-beat-fade-scale'?: string | undefined;

property '--fa-beat-scale'

'--fa-beat-scale'?: string | undefined;

property '--fa-border-color'

'--fa-border-color'?: string | undefined;

property '--fa-border-padding'

'--fa-border-padding'?: string | undefined;

property '--fa-border-radius'

'--fa-border-radius'?: string | undefined;

property '--fa-border-style'

'--fa-border-style'?: string | undefined;

property '--fa-border-width'

'--fa-border-width'?: string | undefined;

property '--fa-display'

'--fa-display'?: string | undefined;

property '--fa-fade-opacity'

'--fa-fade-opacity'?: string | undefined;

property '--fa-family'

'--fa-family'?: string | undefined;

property '--fa-flip-angle'

'--fa-flip-angle'?: string | undefined;

property '--fa-flip-x'

'--fa-flip-x'?: string | undefined;

property '--fa-flip-y'

'--fa-flip-y'?: string | undefined;

property '--fa-flip-z'

'--fa-flip-z'?: string | undefined;

property '--fa-inverse'

'--fa-inverse'?: string | undefined;

property '--fa-li-margin'

'--fa-li-margin'?: string | undefined;

property '--fa-li-width'

'--fa-li-width'?: string | undefined;

property '--fa-primary-color'

'--fa-primary-color'?: string | undefined;

property '--fa-primary-opacity'

'--fa-primary-opacity'?: string | undefined;

property '--fa-pull-margin'

'--fa-pull-margin'?: string | undefined;

property '--fa-rotate-angle'

'--fa-rotate-angle'?: string | undefined;

property '--fa-secondary-color'

'--fa-secondary-color'?: string | undefined;

property '--fa-secondary-opacity'

'--fa-secondary-opacity'?: string | undefined;

property '--fa-stack-z-index'

'--fa-stack-z-index'?: string | undefined;

property '--fa-style'

'--fa-style'?: string | undefined;

property '--fa-width'

'--fa-width'?: string | undefined;

interface FontAwesomeIconProps

interface FontAwesomeIconProps
    extends AnimationProps,
        TransformProps,
        Omit<SVGAttributes<SVGSVGElement>, 'children' | 'mask' | 'transform'>,
        RefAttributes<SVGSVGElement> {}

property border

border?: boolean | undefined;

Applies a border to the icon
See Also
- https://docs.fontawesome.com/web/use-with/react/style#bordered-icons

property className

className?: string | undefined;

Any additional CSS classes to apply to the icon

property color

color?: string | undefined;

The color of the icon. Can be any valid CSS color value

property fixedWidth

fixedWidth?: boolean | undefined;

See Also
- FontAwesomeIconProps.widthAuto
Deprecated
7.0.0
Starting in FontAwesome 7.0.0, all icons are fixed width by default. This property will be removed in a future version.
If you want to remove the fixed width to replicate the behavior of previous versions, you can set the new widthAuto property to true.

property gradientFill

gradientFill?: Gradient<'linear'> | Gradient<'radial'> | undefined;

Creates a <linearGradient /> or <radialGradient /> element inside the icon svg, and applies it as a fill to the icon.

If you also provide a fill prop, the fill prop will take precedence over the gradient. Omit the fill prop to allow the gradient to be applied correctly.

Example 1

Linear Gradient Example:

<FontAwesomeIcon
  icon="coffee"
  gradientFill={{
    id: 'myGradient',
    type: 'linear',
    x1: '0%',
    y1: '0%',
    x2: '100%',
    y2: '0%',
    stops: [
      { offset: '0%', color: '#FF5F6D' },
      { offset: '100%', color: '#FFC371' },
    ],
  }}
/>

Example 2

Radial Gradient Example:

<FontAwesomeIcon
  icon="coffee"
  gradientFill={{
    id: 'myGradient',
    type: 'radial',
    r: '150%',
    cx: '30%',
    cy: '107%',
    stops: [
      { offset: '0', color: '#FDF497' },
      { offset: '0.05', color: '#FDF497' },
      { offset: '0.45', color: '#FD5949' },
      { offset: '0.6', color: '#D6249F' },
      { offset: '0.9', color: '#285AEB' },
    ],
  }}
/>

NOTE: Only supports one gradient type, providing both linear and radial gradient props will have undesired side-effects.

property icon

icon: IconProp;

The icon to render.
See Also
- https://docs.fontawesome.com/web/use-with/react/add-icons

property inverse

inverse?: boolean | undefined;

Invert the icon color.
See Also
- https://docs.fontawesome.com/web/use-with/react/style#invert-the-icon-color-to-white

property mask

mask?: IconProp | undefined;

Grab the Mask utility when you want to layer two icons but have the inner icon cut out from the icon below so the parent element’s background shows through.
See Also
- https://docs.fontawesome.com/web/use-with/react/style#mask

property maskId

maskId?: string | undefined;

Accessibility ID for the mask element

property size

size?: SizeProp | undefined;

The size of the icon from a predefined set of sizes.

property style

style?: (CSSProperties & CSSVariables) | undefined;

Any custom styles or CSS variable overrides for the icon element.

property swapOpacity

swapOpacity?: boolean | undefined;

When using Duotone icons, this property will swap the opacity of the two colors. The first color will be rendered with the opacity of the second color, and vice versa
See Also
- https://docs.fontawesome.com/web/use-with/react/style#duotone-icons

property tabIndex

tabIndex?: number | undefined;

property title

title?: string | undefined;

See Also
- https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility
Deprecated
7.0.0
Starting in FontAwesome 7.0.0, icons are decorative by default. Instead of using a title prop, use the aria-label attribute instead.

property titleId

titleId?: string | undefined;

See Also
- https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility
Deprecated
7.0.0
Starting in FontAwesome 7.0.0, icons are decorative by default. Instead of using a titleId prop, use an aria-label attribute instead.

property widthAuto

widthAuto?: boolean | undefined;

When set to true, the icon will automatically adjust its width to only the interior symbol and not the entire Icon Canvas.
See Also
- https://docs.fontawesome.com/web/style/icon-canvas 7.0.0

interface FontAwesomeLayersProps

interface FontAwesomeLayersProps extends Attributes {}

property children

children: React.ReactNode;

property className

className?: string | undefined;

property size

size?: SizeProp | undefined;

interface TransformProps

interface TransformProps {}

property flip

flip?: FlipProp | boolean | undefined;

Flip the icon horizontally, vertically or both.

property listItem

listItem?: boolean | undefined;

Example 1

<ul className='fa-ul'>
  <li>
    <span className='fa-li'>
      <FontAwesomeIcon icon={['fas', 'check']} />
    </span>
    List item with icon
  </li>
</ul>

Deprecated

Simply wrap the icon instead, no need to pass this property.

property pull

pull?: PullProp | undefined;

Wrap text around the icon by pulling it left or right.

property rotateBy

rotateBy?: boolean | undefined;

Custom rotation is used to rotate the icon by a specific number of degrees, rather than the standard 90, 180, or 270 degrees available in the rotation property.
To use this feature, set rotateBy to true and provide a CSS variable --fa-rotate-angle with the desired rotation angle in degrees.
Example 1
<FontAwesomeIcon icon="fa-solid fa-coffee" rotateBy style={{ '--fa-rotate-angle': '329deg' }} />
See Also
- https://docs.fontawesome.com/web/use-with/react/style#custom-rotation 7.0.0

property rotation

rotation?: RotateProp | undefined;

The rotation property is used to rotate the icon by 90, 180, or 270 degrees.
See Also
- https://docs.fontawesome.com/web/use-with/react/style#rotation

property symbol

symbol?: FaSymbol | undefined;

The icon should render as an SVG symbol rather than a regular element.
See Also
- https://docs.fontawesome.com/web/use-with/react/style#use-svg-symbols

property transform

transform?: string | Transform | undefined;

Apply a custom transform to the icon either using the built-in Transform config, or a CSS transform string.
See Also
- https://docs.fontawesome.com/web/use-with/react/style#power-transforms

Package Files (1)

dist/index.d.ts

Dependencies (0)

No dependencies.

Dev Dependencies (57)

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@fortawesome/react-fontawesome.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@fortawesome/react-fontawesome)

HTML

<a href="https://www.jsdocs.io/package/@fortawesome/react-fontawesome"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 9 days ago.
Package analyzed in 3992 ms.
Missing or incorrect documentation? Open an issue for this package.

@fortawesome/react-fontawesome

Install

Overview

Index

Variables

Functions

Interfaces

Variables

variable FontAwesomeIcon

Parameter props

Returns

Functions

function FontAwesomeLayers

Example 1

See Also

function LayersCounter

Example 1

See Also

function LayersText

Example 1

See Also

Interfaces

interface AnimationProps

property beat

See Also

property beatFade

See Also

property bounce

See Also

property fade

See Also

property pulse

See Also

Deprecated

property shake

See Also

property spin

See Also

property spinPulse

See Also

property spinReverse

See Also

interface CSSVariables

See Also

property '--fa-animation-delay'

property '--fa-animation-direction'

property '--fa-animation-duration'

property '--fa-animation-iteration-count'

property '--fa-animation-timing'

property '--fa-beat-fade-opacity'

property '--fa-beat-fade-scale'

property '--fa-beat-scale'

property '--fa-border-color'

property '--fa-border-padding'

property '--fa-border-radius'

property '--fa-border-style'

property '--fa-border-width'

property '--fa-display'

property '--fa-fade-opacity'

property '--fa-family'

property '--fa-flip-angle'

property '--fa-flip-x'

property '--fa-flip-y'

property '--fa-flip-z'

property '--fa-inverse'

property '--fa-li-margin'

property '--fa-li-width'

property '--fa-primary-color'

property '--fa-primary-opacity'

property '--fa-pull-margin'

property '--fa-rotate-angle'

property '--fa-secondary-color'

property '--fa-secondary-opacity'

property '--fa-stack-z-index'

property '--fa-style'

property '--fa-width'

interface FontAwesomeIconProps

property border

See Also

property className