React FontAwesome SVG Icon

import { FunctionComponent } from 'react';
import { FontAwesomeSvgIcon } from 'react-fontawesome-svg-icon';
import { faSkating, faSkiing, faSkiingNordic, faSnowboarding, faSnowplow } from '@fortawesome/free-solid-svg-icons';

const Example: FunctionComponent = () => (
    <div style={ { fontSize: '1.25rem' } }>
        <div><FontAwesomeSvgIcon fixedWidth icon={ faSkating } style={ { background: 'DodgerBlue' } }/> Skating</div>
        <div><FontAwesomeSvgIcon fixedWidth icon={ faSkiing } style={ { background: 'SkyBlue' } }/> Skiing</div>
        <div><FontAwesomeSvgIcon fixedWidth icon={ faSkiingNordic } style={ { background: 'DodgerBlue' } }/> Nordic Skiing</div>
        <div><FontAwesomeSvgIcon fixedWidth icon={ faSnowboarding } style={ { background: 'SkyBlue' } }/> Snowboarding</div>
        <div><FontAwesomeSvgIcon fixedWidth icon={ faSnowplow } style={ { background: 'DodgerBlue' } }/> Snowplow</div>
    </div>
);

export default Example;

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

const Example: FunctionComponent = () => (
    <>
        <ul className="fa-ul">
            <li><FontAwesomeSvgIcon icon={ faCoffee } size="lg" listItem/> Coffee</li>
            <li><FontAwesomeSvgIcon icon={ faHeart } size="lg" listItem/> Love</li>
        </ul>
    </>
);

export default Example;

import { FunctionComponent } from 'react';
import { FontAwesomeSvgIcon } from 'react-fontawesome-svg-icon';
import { faArrowRight, faQuoteLeft } from '@fortawesome/free-solid-svg-icons';

const Example: FunctionComponent = () => (
    <>
        <p>
            <FontAwesomeSvgIcon icon={ faQuoteLeft } size="sm" pull="left"/>
            <span>Your time is limited, so don&apos;t waste it living someone else&apos;s life. Don&apos;t be trapped by dogma – which is living with the results of other people&apos;s thinking.</span>
            &nbsp;&mdash;&nbsp;
            <i>Steve Jobs</i>
        </p>
        <p>
            <FontAwesomeSvgIcon icon={ faArrowRight } size="lg" pull="right" border/>
            <span>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.</span>
            &nbsp;&mdash;&nbsp;
            <i>Charles Dickens, A Tale of Two Cities</i>
        </p>
    </>
);

export default Example;

import { useEffect, useRef, useState, FunctionComponent } from 'react';
import { FontAwesomeSvgIcon } from 'react-fontawesome-svg-icon';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

type Size = { width: number, height: number } | null;

const Example: FunctionComponent = () => {
    const [size, setSize] = useState<Size>(null);
    const ref = useRef<SVGSVGElement>(null);

    useEffect(() => {
        if (ref.current) {
            const { width, height } = ref.current.getBoundingClientRect();
            setSize({ width, height });
        }
    }, []);

    return (
        <>
            <FontAwesomeSvgIcon ref={ ref } icon={ faCoffee } size="lg"/>
            <span>{ size && JSON.stringify(size) }</span>
        </>
    );
};

export default Example;

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

const weirdProgrammingLanguages: string[] = [
    'LOLCODE',
    'Rockstar',
    'TrumpScript',
    'Brainf*ck',
    'Shakespeare',
    'Whitespace',
    'Velato',
    'Chicken',
    'Piet',
    'Befunge',
];

const styles = {
    container: { display: 'flex' },
    title: { flex: 1 },
    icon: { width: '1.25rem', height: '1.25rem', margin: '0.5rem' },
};

const Example: FunctionComponent = () => {
    return (
        <>
            <FontAwesomeSvgIcon icon={ faHeart } symbol/>
            <FontAwesomeSvgIcon icon={ faCoffee } symbol="beverage-icon"/>
            { weirdProgrammingLanguages.map((language) => (
                <div key={ language } style={ styles.container }>
                    <span style={ styles.title }>{ language }</span>
                    <svg style={ styles.icon }>
                        <use xlinkHref="#fas-heart"/>
                    </svg>
                    <svg style={ styles.icon }>
                        <use xlinkHref="#beverage-icon"/>
                    </svg>
                </div>
            )) }
        </>
    );
};

export default Example;