@fortawesome/angular-fontawesome
- Version 0.10.2
- Published
- 265 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
Interfaces
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: 'swapOpacity'; primaryOpacity: 'primaryOpacity'; secondaryOpacity: 'secondaryOpacity'; primaryColor: 'primaryColor'; secondaryColor: 'secondaryColor'; }, {}, never, 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 border
border?: boolean;
property classes
classes?: string[];
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: 'icon'; title: 'title'; spin: 'spin'; pulse: 'pulse'; mask: 'mask'; styles: 'styles'; flip: 'flip'; size: 'size'; pull: 'pull'; border: 'border'; inverse: 'inverse'; symbol: 'symbol'; rotate: 'rotate'; fixedWidth: 'fixedWidth'; classes: 'classes'; transform: 'transform'; a11yRole: 'a11yRole'; }, {}, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< FaIconComponent, [null, null, null, { optional: true }, { optional: true }]>;
property pull
pull?: PullProp;
property pulse
pulse?: boolean;
property renderedIconHTML
renderedIconHTML: SafeHtml;
property rotate
rotate?: RotateProp;
property size
size?: SizeProp;
property spin
spin?: boolean;
property styles
styles?: Styles;
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) => never;
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: 'size'; fixedWidth: 'fixedWidth' }, {}, 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[];
property content
content: string;
property ɵcmp
static ɵcmp: i0.ɵɵComponentDeclaration< FaLayersCounterComponent, 'fa-layers-counter', never, { content: 'content'; title: 'title'; styles: 'styles'; classes: 'classes'; position: 'position'; }, {}, never, 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;
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[];
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: 'content'; title: 'title'; styles: 'styles'; classes: 'classes'; spin: 'spin'; pulse: 'pulse'; flip: 'flip'; size: 'size'; pull: 'pull'; border: 'border'; inverse: 'inverse'; rotate: 'rotate'; fixedWidth: 'fixedWidth'; transform: 'transform'; }, {}, never, never>;
property ɵfac
static ɵfac: i0.ɵɵFactoryDeclaration< FaLayersTextComponent, [{ optional: true }, null]>;
property pull
pull?: PullProp;
property pulse
pulse?: boolean;
property renderedHTML
renderedHTML: SafeHtml;
property rotate
rotate?: RotateProp;
property size
size?: SizeProp;
property spin
spin?: boolean;
property styles
styles?: Styles;
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: 'size' }, {}, 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: 'stackItemSize'; size: 'size' }, {}, 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 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 pulse
pulse?: boolean;
property rotate
rotate?: RotateProp;
property size
size?: SizeProp;
property spin
spin?: boolean;
property stackItemSize
stackItemSize?: '1x' | '2x';
property style
style?: Styles;
property symbol
symbol?: FaSymbol;
property transform
transform?: string | Transform;
Package Files (12)
- angular-fontawesome.d.ts
- config.d.ts
- fontawesome.module.d.ts
- icon-library.d.ts
- icon/duotone-icon.component.d.ts
- icon/icon.component.d.ts
- layers/layers-counter.component.d.ts
- layers/layers-text.component.d.ts
- layers/layers.component.d.ts
- shared/models/props.model.d.ts
- stack/stack-item-size.directive.d.ts
- stack/stack.component.d.ts
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (1)
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[](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 .
Package analyzed in 1219 ms. - Missing or incorrect documentation? Open an issue for this package.