@fortawesome/angular-fontawesome

@fortawesome/angular-fontawesome

Version 1.0.0
Published 5 months ago
132 kB
2 dependencies
MIT license

Install

npm i @fortawesome/angular-fontawesome

yarn add @fortawesome/angular-fontawesome

pnpm add @fortawesome/angular-fontawesome

Overview

Angular Fontawesome, an Angular library

Index

Classes

FaConfig
FaDuotoneIconComponent
FaIconComponent
FaIconLibrary
FaLayersComponent
FaLayersCounterComponent
FaLayersTextComponent
FaStackComponent
FaStackItemSizeDirective
FontAwesomeModule

Classes

class FaConfig

class FaConfig {}

property autoAddCss

autoAddCss: boolean;

property defaultPrefix

defaultPrefix: any;

Default prefix to use, when one is not provided with the icon name.
'fas'

property fallbackIcon

fallbackIcon: IconDefinition;

Provides a fallback icon to use whilst main icon is being loaded asynchronously. When value is null, then fa-icon component will throw an error if icon input is missing. When value is not null, then the provided icon will be used as a fallback icon if icon input is missing.
null

property fixedWidth

fixedWidth?: boolean;

Set icons to the same fixed width.
See Also
- {@link: https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons} false

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FaConfig, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<FaConfig>;

class FaDuotoneIconComponent

class FaDuotoneIconComponent extends FaIconComponent {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    FaDuotoneIconComponent,
    'fa-duotone-icon',
    never,
    {
        swapOpacity: { alias: 'swapOpacity'; required: false };
        primaryOpacity: { alias: 'primaryOpacity'; required: false };
        secondaryOpacity: { alias: 'secondaryOpacity'; required: false };
        primaryColor: { alias: 'primaryColor'; required: false };
        secondaryColor: { alias: 'secondaryColor'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FaDuotoneIconComponent, never>;

property primaryColor

primaryColor?: string;

Customize the color of the primary icon layer. Accepts any valid CSS color value.
CSS inherited color

property primaryOpacity

primaryOpacity?: string | number;

Customize the opacity of the primary icon layer. Valid values are in range [0, 1.0].
1.0

property secondaryColor

secondaryColor?: string;

Customize the color of the secondary icon layer. Accepts any valid CSS color value.
CSS inherited color

property secondaryOpacity

secondaryOpacity?: string | number;

Customize the opacity of the secondary icon layer. Valid values are in range [0, 1.0].
0.4

property swapOpacity

swapOpacity?: boolean | 'true' | 'false';

Swap the default opacity of each duotone icon’s layers. This will make an icon’s primary layer have the default opacity of 40% rather than its secondary layer.
false

method buildParams

protected buildParams: () => IconParams;

method findIconDefinition

protected findIconDefinition: (
    i: IconProp | IconDefinition
) => CoreIconDefinition | null;

class FaIconComponent

class FaIconComponent implements OnChanges {}

constructor

constructor(
    sanitizer: DomSanitizer,
    config: FaConfig,
    iconLibrary: FaIconLibrary,
    stackItem: FaStackItemSizeDirective,
    stack: FaStackComponent
);

property a11yRole

a11yRole: string;

Specify the role attribute for the rendered element.
'img'

property animation

animation?: AnimationProp;

Icon animation.
Most of the animations are only available when using Font Awesome 6. With Font Awesome 5, only 'spin' and 'spin-pulse' are supported.

property border

border?: boolean;

property fixedWidth

fixedWidth?: boolean;

property flip

flip?: FlipProp;

property icon

icon: any;

property inverse

inverse?: boolean;

property mask

mask?: any;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    FaIconComponent,
    'fa-icon',
    never,
    {
        icon: { alias: 'icon'; required: false };
        title: { alias: 'title'; required: false };
        animation: { alias: 'animation'; required: false };
        mask: { alias: 'mask'; required: false };
        flip: { alias: 'flip'; required: false };
        size: { alias: 'size'; required: false };
        pull: { alias: 'pull'; required: false };
        border: { alias: 'border'; required: false };
        inverse: { alias: 'inverse'; required: false };
        symbol: { alias: 'symbol'; required: false };
        rotate: { alias: 'rotate'; required: false };
        fixedWidth: { alias: 'fixedWidth'; required: false };
        transform: { alias: 'transform'; required: false };
        a11yRole: { alias: 'a11yRole'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    FaIconComponent,
    [null, null, null, { optional: true }, { optional: true }]
>;

property pull

pull?: PullProp;

property renderedIconHTML

renderedIconHTML: SafeHtml;

property rotate

rotate?: any;

property size

size?: SizeProp;

property symbol

symbol?: FaSymbol;

property title

title?: string;

Specify a title for the icon.
This text will be displayed in a tooltip on hover and presented to the screen readers.

property transform

transform?: any;

method buildParams

protected buildParams: () => IconParams;

method findIconDefinition

protected findIconDefinition: (
    i: IconProp | IconDefinition
) => CoreIconDefinition | null;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method render

render: () => void;

Programmatically trigger rendering of the icon.
This method is useful, when creating FaIconComponent dynamically or changing its inputs programmatically as in these cases icon won't be re-rendered automatically.

class FaIconLibrary

class FaIconLibrary implements FaIconLibraryInterface {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FaIconLibrary, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<FaIconLibrary>;

method addIconPacks

addIconPacks: (...packs: IconPack[]) => void;

method addIcons

addIcons: (...icons: IconDefinition[]) => void;

method getIconDefinition

getIconDefinition: (prefix: IconPrefix, name: IconName) => IconDefinition | null;

class FaLayersComponent

class FaLayersComponent implements OnInit, OnChanges {}

Fontawesome layers.

constructor

constructor(renderer: Renderer2, elementRef: ElementRef, config: FaConfig);

property fixedWidth

fixedWidth?: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    FaLayersComponent,
    'fa-layers',
    never,
    {
        size: { alias: 'size'; required: false };
        fixedWidth: { alias: 'fixedWidth'; required: false };
    },
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FaLayersComponent, never>;

property size

size?: SizeProp;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

class FaLayersCounterComponent

class FaLayersCounterComponent implements OnChanges {}

constructor

constructor(parent: FaLayersComponent, sanitizer: DomSanitizer);

property content

content: string;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    FaLayersCounterComponent,
    'fa-layers-counter',
    never,
    {
        content: { alias: 'content'; required: false };
        title: { alias: 'title'; required: false };
        position: { alias: 'position'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    FaLayersCounterComponent,
    [{ optional: true }, null]
>;

property position

position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

property renderedHTML

renderedHTML: SafeHtml;

property title

title?: string;

method buildParams

protected buildParams: () => CounterParams;

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class FaLayersTextComponent

class FaLayersTextComponent implements OnChanges {}

constructor

constructor(parent: FaLayersComponent, sanitizer: DomSanitizer);

property border

border?: boolean;

property content

content: string;

property fixedWidth

fixedWidth?: boolean;

property flip

flip?: FlipProp;

property inverse

inverse?: boolean;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    FaLayersTextComponent,
    'fa-layers-text',
    never,
    {
        content: { alias: 'content'; required: false };
        title: { alias: 'title'; required: false };
        flip: { alias: 'flip'; required: false };
        size: { alias: 'size'; required: false };
        pull: { alias: 'pull'; required: false };
        border: { alias: 'border'; required: false };
        inverse: { alias: 'inverse'; required: false };
        rotate: { alias: 'rotate'; required: false };
        fixedWidth: { alias: 'fixedWidth'; required: false };
        transform: { alias: 'transform'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<
    FaLayersTextComponent,
    [{ optional: true }, null]
>;

property pull

pull?: PullProp;

property renderedHTML

renderedHTML: SafeHtml;

property rotate

rotate?: any;

property size

size?: SizeProp;

property title

title?: string;

property transform

transform?: any;

method buildParams

protected buildParams: () => TextParams;

Updating params by component props.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class FaStackComponent

class FaStackComponent implements OnInit, OnChanges {}

constructor

constructor(renderer: Renderer2, elementRef: ElementRef);

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    FaStackComponent,
    'fa-stack',
    never,
    { size: { alias: 'size'; required: false } },
    {},
    never,
    ['*'],
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FaStackComponent, never>;

property size

size?: SizeProp;

Size of the stacked icon. Note that stacked icon is by default 2 times bigger, than non-stacked icon. You'll need to set size using custom CSS to align stacked icon with a simple one. E.g. fa-stack { font-size: 0.5em; }.

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

method ngOnInit

ngOnInit: () => void;

class FaStackItemSizeDirective

class FaStackItemSizeDirective implements OnChanges {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    FaStackItemSizeDirective,
    'fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]',
    never,
    {
        stackItemSize: { alias: 'stackItemSize'; required: false };
        size: { alias: 'size'; required: false };
    },
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FaStackItemSizeDirective, never>;

property stackItemSize

stackItemSize: '1x' | '2x';

Specify whether icon inside FaStackComponent should be rendered in regular size (1x) or as a larger icon (2x).

method ngOnChanges

ngOnChanges: (changes: SimpleChanges) => void;

class FontAwesomeModule

class FontAwesomeModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<FontAwesomeModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<FontAwesomeModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    FontAwesomeModule,
    never,
    [
        typeof i1.FaIconComponent,
        typeof i2.FaDuotoneIconComponent,
        typeof i3.FaLayersComponent,
        typeof i4.FaLayersTextComponent,
        typeof i5.FaLayersCounterComponent,
        typeof i6.FaStackComponent,
        typeof i7.FaStackItemSizeDirective
    ],
    [
        typeof i1.FaIconComponent,
        typeof i2.FaDuotoneIconComponent,
        typeof i3.FaLayersComponent,
        typeof i4.FaLayersTextComponent,
        typeof i5.FaLayersCounterComponent,
        typeof i6.FaStackComponent,
        typeof i7.FaStackItemSizeDirective
    ]
>;

Interfaces

interface FaIconLibraryInterface

interface FaIconLibraryInterface {}

method addIconPacks

addIconPacks: (...packs: IconPack[]) => void;

method addIcons

addIcons: (...icons: IconDefinition[]) => void;

method getIconDefinition

getIconDefinition: (prefix: IconPrefix, name: IconName) => IconDefinition | null;

interface FaProps

interface FaProps {}

Fontawesome props.

property animation

animation?: AnimationProp;

property border

border?: boolean;

property className

className?: string;

property counter

counter?: boolean;

property fixedWidth

fixedWidth?: boolean;

property flip

flip?: FlipProp;

property inverse

inverse?: boolean;

property pull

pull?: PullProp;

property rotate

rotate?: RotateProp | string;

property size

size?: SizeProp;

property stackItemSize

stackItemSize?: '1x' | '2x';

interface IconDefinition

interface IconDefinition {}

property icon

icon: [
    number,
    number,
    string[],
    string,
    // unicode
    string | string[]
];

property iconName

iconName: IconName;

property prefix

prefix: IconPrefix;

interface IconLookup

interface IconLookup {}

property iconName

iconName: IconName;

property prefix

prefix: IconPrefix;

interface IconPack

interface IconPack {}

index signature

[key: string]: IconDefinition;

Type Aliases

type AnimationProp

type AnimationProp =
    | 'beat'
    | 'fade'
    | 'beat-fade'
    | 'bounce'
    | 'flip'
    | 'shake'
    | 'spin'
    | 'spin-reverse'
    | 'spin-pulse'
    | 'spin-pulse-reverse';

type IconName

type IconName = CoreIconName | (string & {});

type IconPrefix

type IconPrefix = CoreIconPrefix | (string & {});

Package Files (13)

Dependencies (2)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (1)

@angular/core

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/angular-fontawesome.

Markdown

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

HTML

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

Updated 5 months ago.
Package analyzed in 3999 ms.
Missing or incorrect documentation? Open an issue for this package.

@fortawesome/angular-fontawesome

Install

Overview

Index

Classes

Interfaces

Type Aliases

Classes

class FaConfig

property autoAddCss

property defaultPrefix

property fallbackIcon

property fixedWidth

See Also

property ɵfac

property ɵprov

class FaDuotoneIconComponent

property ɵcmp

property ɵfac

property primaryColor

property primaryOpacity

property secondaryColor

property secondaryOpacity

property swapOpacity

method buildParams

method findIconDefinition

class FaIconComponent

constructor

property a11yRole

property animation

property border

property fixedWidth

property flip

property icon

property inverse

property mask

property ɵcmp

property ɵfac

property pull

property renderedIconHTML

property rotate

property size

property symbol

property title

property transform

method buildParams

method findIconDefinition

method ngOnChanges

method render

class FaIconLibrary

property ɵfac

property ɵprov

method addIconPacks

method addIcons

method getIconDefinition

class FaLayersComponent

constructor

property fixedWidth

property ɵcmp

property ɵfac

property size

method ngOnChanges

method ngOnInit

class FaLayersCounterComponent

constructor

property content

property ɵcmp

property ɵfac

property position

property renderedHTML

property title

method buildParams

method ngOnChanges

class FaLayersTextComponent

constructor

property border

property content

property fixedWidth

property flip

property inverse