@fortawesome/angular-fontawesome

@fortawesome/angular-fontawesome

Version 0.13.0
Published 1 month ago
226 kB
1 dependency
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

class FaConfig

class FaConfig {}

property defaultPrefix

defaultPrefix: IconPrefix;

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,
    false,
    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: () => {
    title: string;
    transform: import('@fortawesome/fontawesome-svg-core').Transform;
    classes: string[];
    mask: IconDefinition;
    styles: import('@fortawesome/fontawesome-svg-core').Styles;
    symbol: import('@fortawesome/fontawesome-svg-core').FaSymbol;
    attributes: { role: string };
};

method findIconDefinition

protected findIconDefinition: (
    i: IconProp | IconDefinition
) => IconDefinition | 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 classes

classes?: string[];

Set class attribute on the SVG element rendered by the component.
Deprecated
This input breaks view encapsulation and is not recommended. For simple cases (like colors), use class on the component itself, for more complex usages, explicitly opt-in to break the view encapsulation. This input is deprecated since 0.12.0 and will be removed in 0.13.0.

property fixedWidth

fixedWidth?: boolean;

property flip

flip?: FlipProp;

property icon

icon: IconProp;

property inverse

inverse?: boolean;

property mask

mask?: IconProp;

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 };
        spin: { alias: 'spin'; required: false };
        pulse: { alias: 'pulse'; required: false };
        mask: { alias: 'mask'; required: false };
        styles: { alias: 'styles'; 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 };
        classes: { alias: 'classes'; required: false };
        transform: { alias: 'transform'; required: false };
        a11yRole: { alias: 'a11yRole'; required: false };
    },
    {},
    never,
    never,
    false,
    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?: RotateProp;

property size

size?: SizeProp;

property styles

styles?: Styles;

Set style attribute on the SVG element rendered by the component.
Deprecated
This input breaks view encapsulation and is not recommended. For simple cases (like colors), use style on the component itself, for more complex usages, explicitly opt-in to break the view encapsulation. This input is deprecated since 0.12.0 and will be removed in 0.13.0.

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: () => {
    title: string;
    transform: Transform;
    classes: string[];
    mask: IconDefinition;
    styles: Styles;
    symbol: FaSymbol;
    attributes: { role: string };
};

method findIconDefinition

protected findIconDefinition: (
    i: IconProp | IconDefinition
) => IconDefinition | 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,
    ['*'],
    false,
    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 classes

classes?: string[];

Set class attribute on the SVG element rendered by the component.
Deprecated
This input breaks view encapsulation and is not recommended. For simple cases (like colors), use class on the component itself, for more complex usages, explicitly opt-in to break the view encapsulation. This input is deprecated since 0.12.0 and will be removed in 0.13.0.

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 };
        styles: { alias: 'styles'; required: false };
        classes: { alias: 'classes'; required: false };
        position: { alias: 'position'; required: false };
    },
    {},
    never,
    never,
    false,
    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 styles

styles?: Styles;

Set style attribute on the SVG element rendered by the component.
Deprecated
This input breaks view encapsulation and is not recommended. For simple cases (like colors), use style on the component itself, for more complex usages, explicitly opt-in to break the view encapsulation. This input is deprecated since 0.12.0 and will be removed in 0.13.0.

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 classes

classes?: string[];

Set class attribute on the SVG element rendered by the component.
Deprecated
This input breaks view encapsulation and is not recommended. For simple cases (like colors), use class on the component itself, for more complex usages, explicitly opt-in to break the view encapsulation. This input is deprecated since 0.12.0 and will be removed in 0.13.0.

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 };
        styles: { alias: 'styles'; required: false };
        classes: { alias: 'classes'; required: false };
        spin: { alias: 'spin'; required: false };
        pulse: { alias: 'pulse'; 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,
    false,
    never
>;

property ɵfac

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

property pull

pull?: PullProp;

property renderedHTML

renderedHTML: SafeHtml;

property rotate

rotate?: RotateProp;

property size

size?: SizeProp;

property styles

styles?: Styles;

Set style attribute on the SVG element rendered by the component.
Deprecated
This input breaks view encapsulation and is not recommended. For simple cases (like colors), use style on the component itself, for more complex usages, explicitly opt-in to break the view encapsulation. This input is deprecated since 0.12.0 and will be removed in 0.13.0.

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,
    ['*'],
    false,
    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,
    false,
    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,
    [
        typeof i1.FaIconComponent,
        typeof i2.FaDuotoneIconComponent,
        typeof i3.FaLayersComponent,
        typeof i4.FaLayersTextComponent,
        typeof i5.FaLayersCounterComponent,
        typeof i6.FaStackComponent,
        typeof i7.FaStackItemSizeDirective
    ],
    never,
    [
        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 mask

mask?: IconProp;

property pull

pull?: PullProp;

property rotate

rotate?: RotateProp;

property size

size?: SizeProp;

property stackItemSize

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

property style

style?: Styles;

property symbol

symbol?: FaSymbol;

property transform

transform?: string | Transform;

Type Aliases

type AnimationProp

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

Package Files (12)

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

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 1 month ago.
Package analyzed in 5315 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 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 classes

Deprecated

property fixedWidth

property flip

property icon

property inverse

property mask

property ɵcmp

property ɵfac

property pull

property renderedIconHTML

property rotate

property size

property styles

Deprecated

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 classes

Deprecated

property content

property ɵcmp

property ɵfac

property position

property renderedHTML

property styles

Deprecated

property title

method buildParams

method ngOnChanges