diff --git a/README.md b/README.md index fa24502..1e606db 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,6 @@ To get up and running using Font Awesome with Angular follow below steps: * [In-depth usage guide](./docs/usage.md) * [Using other styles](./docs/usage/using-other-styles.md) * [Full feature list](./docs/usage/features.md) -* [Change the default prefix](./docs/usage/default-prefix.md) * [Upgrading instructions](UPGRADING.md) ## Examples diff --git a/UPGRADING.md b/UPGRADING.md index e0e2263..7e2b2a8 100644 --- a/UPGRADING.md +++ b/UPGRADING.md @@ -12,3 +12,4 @@ You might also be interested in the larger umbrella project [upgrade guide](http ## Version Specific Guides * [Font Awesome 4 or older](docs/upgrading/v4.md) * [0.1.0 to 0.1.0-6](docs/upgrading/0.1.0-0.1.0-6.md) +* [0.4.0 to 0.5.0](docs/upgrading/0.4.0-0.5.0.md) diff --git a/docs/upgrading/0.4.0-0.5.0.md b/docs/upgrading/0.4.0-0.5.0.md new file mode 100644 index 0000000..5955dbc --- /dev/null +++ b/docs/upgrading/0.4.0-0.5.0.md @@ -0,0 +1,33 @@ +# Upgrading 0.4.0 to 0.5.0 + +## Migrate from global icon library to FaIconLibrary + +Icon library from `@fortawesome/fontawesome-svg-core` (referred as *global icon library*) is deprecated in favour of `FaIconLibrary` provided by `@fortawesome/angular-fontawesome` and managed by Angular (referred as *icon library*). + +The library will emit a warning when icon definition from a global icon library is used, so to migrate you'll need to replace all usages of the global icon library. + +```diff +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +-import { library } from '@fortawesome/fontawesome-svg-core'; ++import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; +import { faCoffee, fas } from '@fortawesome/free-solid-svg-icons'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, FontAwesomeModule], + bootstrap: [AppComponent] +}) +export class AppModule { +- constructor() { ++ constructor(library: FaIconLibrary) { +- library.add(fas, faCoffee); ++ library.addIconPacks(fas); ++ library.addIcons(faCoffee); + } +} +``` + +You can also use `FaConfig.globalLibrary` property to change the warning into the hard error or suppress warnings altogether (not recommended). diff --git a/docs/usage.md b/docs/usage.md index 7848099..131bad0 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -49,6 +49,3 @@ Take your icons to the next level with these advanced features. * [Layers with text](./usage/features.md#layers-with-text) * [Layers with counter](./usage/features.md#layers-with-counter) * [Programmatic API](./usage/features.md#programmatic-api) - -## Configurations -* [Changing the Default Prefix](./usage/default-prefix.md) diff --git a/docs/usage/default-prefix.md b/docs/usage/default-prefix.md index e5ee663..e69de29 100644 --- a/docs/usage/default-prefix.md +++ b/docs/usage/default-prefix.md @@ -1,13 +0,0 @@ -# Changing the default prefix - -The default prefix, `fas`, can be adjusted by injecting the `FaConfig` and modifying the `defaultPrefix` property. - -```typescript -import { FaConfig } from '@fortawesome/angular-fontawesome'; - -export class AppComponent { - constructor(private faConfig: FaConfig) { - this.faConfig.defaultPrefix = 'far'; - } -} -``` diff --git a/docs/usage/icon-library.md b/docs/usage/icon-library.md index ca292a7..7a45787 100644 --- a/docs/usage/icon-library.md +++ b/docs/usage/icon-library.md @@ -2,61 +2,68 @@ The icon library provides convenient usage in your templates but you have to manage the icons separate from your components. This has long-term maintenance implications, specifically, this means that if someone accidentally removes the icon from your icon library the component that uses it will break. -Icons can be registered once in `app.module` with `library.add()`. Icons added to the library will be available to any other component whose parent module also imports `FontAwesomeModule`. This eliminates the need to redefine or explicitly import icons into individual components across multiple modules, lazy-loaded or not. +Icons can be registered once in `app.module` with `FaIconLibrary.addIcons()` or `FaIconLibrary.addIconPacks()`. Icons added to the library will be available to any other components whose parent module also imports `FontAwesomeModule`. This eliminates the need to redefine or explicitly import icons into individual components across multiple modules, lazy-loaded or not. `src/app/app.component.html` ```html -
- - - - -
+ + + + ``` `src/app/app.module.ts` -1. Import `{ FontAwesomeModule } from '@fortawesome/angular-fontawesome'` +1. Import `{ FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'` 1. Add `FontAwesomeModule` to `imports` -1. Import `{ library } from '@fortawesome/fontawesome-svg-core'` +1. Inject `FaIconLibrary` into constructor of the module. 1. Import an icon like `{ faCoffee } from '@fortawesome/free-solid-svg-icons'` -1. Add to the library with `library.add(faCoffee)` +1. Add icon to the library with `library.addIcons(faCoffee)` ```typescript -import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; - -import { AppComponent } from './app.component'; -import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; -import { library } from '@fortawesome/fontawesome-svg-core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { faCoffee } from '@fortawesome/free-solid-svg-icons'; +import { AppComponent } from './app.component'; @NgModule({ - declarations: [ - AppComponent - ], - imports: [ - BrowserModule, - FontAwesomeModule - ], - providers: [], + declarations: [AppComponent], + imports: [BrowserModule, FontAwesomeModule], bootstrap: [AppComponent] }) export class AppModule { - constructor() { + constructor(library: FaIconLibrary) { // Add an icon to the library for convenient access in other components - library.add(faCoffee); + library.addIcons(faCoffee); } } ``` -You can also import entire icon styles. But be careful! This way of importing icons does not support tree-shaking, so all icons from the imported package will end up in your bundle. +You can also import entire icon styles. But be careful! This way of importing icons does not support tree-shaking, so all icons from the imported package will end up in the bundle. -```javascript -import { library } from '@fortawesome/fontawesome-svg-core'; +```typescript import { fas } from '@fortawesome/free-solid-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons'; -library.add(fas, far); +export class AppModule { + constructor(library: FaIconLibrary) { + library.addIconPacks(fas, far); + } +} +``` + +## Changing the default prefix + +The default prefix, `fas`, can be adjusted by injecting the `FaConfig` and modifying the `defaultPrefix` property. + +```typescript +import { FaConfig } from '@fortawesome/angular-fontawesome'; + +export class AppComponent { + constructor(faConfig: FaConfig) { + faConfig.defaultPrefix = 'far'; + } +} ``` diff --git a/projects/demo/src/app/alternate-prefix.component.ts b/projects/demo/src/app/alternate-prefix.component.ts index 759eaaa..10b1288 100644 --- a/projects/demo/src/app/alternate-prefix.component.ts +++ b/projects/demo/src/app/alternate-prefix.component.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; -import { FaConfig } from '@fortawesome/angular-fontawesome'; -import { library } from '@fortawesome/fontawesome-svg-core'; +import { FaConfig, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { faBellSlash, faHandPaper, faUser } from '@fortawesome/free-regular-svg-icons'; @Component({ @@ -11,10 +10,10 @@ import { faBellSlash, faHandPaper, faUser } from '@fortawesome/free-regular-svg- ] }) export class AlternatePrefixComponent { - constructor(private faConfig: FaConfig) { + constructor(faConfig: FaConfig, library: FaIconLibrary) { // Setting the defaultPrefix to far - this.faConfig.defaultPrefix = 'far'; + faConfig.defaultPrefix = 'far'; // Adding dynamic icons to library for use - library.add(faUser, faHandPaper, faBellSlash); + library.addIcons(faUser, faHandPaper, faBellSlash); } } diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts index d5c89ce..54a5446 100644 --- a/projects/demo/src/app/app.component.ts +++ b/projects/demo/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; -import { IconDefinition, IconName, library } from '@fortawesome/fontawesome-svg-core'; +import { FaIconLibrary } from '@fortawesome/angular-fontawesome'; +import { IconDefinition, IconName } from '@fortawesome/fontawesome-svg-core'; import { faFlag, faUser as regularUser } from '@fortawesome/free-regular-svg-icons'; import { faAdjust, @@ -58,7 +59,7 @@ export class AppComponent { isSyncAnimated = true; magicLevel = 0; - constructor() { + constructor(library: FaIconLibrary) { // Notice that we're adding two different icon objects to the library. // Each of them within their respective icon npm packages are exported as faUser, // but we've renamed the second one in order to disambiguate the two objects within @@ -78,6 +79,6 @@ export class AppComponent { // // // You don't specify the prefix in that case, because the icon object knows its own prefix. - library.add(faUser, regularUser); + library.addIcons(faUser, regularUser); } } diff --git a/src/lib/config.ts b/src/lib/config.ts index bc8e722..289449c 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -1,10 +1,40 @@ import { Injectable } from '@angular/core'; import { IconPrefix } from '@fortawesome/fontawesome-common-types'; +import { FaIconLibrary } from './icon-library'; @Injectable({providedIn: 'root'}) export class FaConfig { /** * Default prefix to use, when one is not provided with the icon name. + * + * @default 'fas' */ defaultPrefix: IconPrefix = 'fas'; + + /** + * Whether components should lookup icon definitions in the global icon + * library (the one available from + * `import { library } from '@fortawesome/fontawesome-svg-core')`. + * + * See https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md + * for detailed description of library modes. + * + * - 'unset' - Components should lookup icon definitions in the global library + * and emit warning if they find a definition there. This option is a default + * to assist existing applications with a migration. Applications are expected + * to switch to using {@link FaIconLibrary}. + * - true - Components should lookup icon definitions in the global library. + * Note that global icon library is deprecated and support for it will be + * removed. This option can be used to temporarily suppress warnings. + * - false - Components should not lookup icon definitions in the global + * library. Library will throw an error if missing icon is found in the global + * library. + * + * @deprecated This option is deprecated since 0.5.0. In 0.6.0 default will + * be changed to false. In 0.7.0 the option will be removed together with the + * support for the global icon library. + * + * @default 'unset' + */ + globalLibrary: boolean | 'unset' = 'unset'; } diff --git a/src/lib/icon-library.spec.ts b/src/lib/icon-library.spec.ts new file mode 100644 index 0000000..2a1d0a2 --- /dev/null +++ b/src/lib/icon-library.spec.ts @@ -0,0 +1,42 @@ +import { inject } from '@angular/core/testing'; +import { far, faSun as farSun, faUser as farUser } from '@fortawesome/free-regular-svg-icons'; +import { fas, faSun, faUser } from '@fortawesome/free-solid-svg-icons'; +import { FaIconLibrary } from './icon-library'; + +describe('FaIconLibrary', () => { + it('should be possible to add an icon', inject([FaIconLibrary], (library: FaIconLibrary) => { + library.addIcons(faUser); + expect(library.getIconDefinition('fas', 'user')).toBe(faUser); + })); + + it('should be possible to add multiple icons', inject([FaIconLibrary], (library: FaIconLibrary) => { + library.addIcons(faUser, farUser); + expect(library.getIconDefinition('fas', 'user')).toBe(faUser); + expect(library.getIconDefinition('far', 'user')).toBe(farUser); + })); + + it('should be possible to add an icon pack', inject([FaIconLibrary], (library: FaIconLibrary) => { + library.addIconPacks(far); + expect(library.getIconDefinition('far', 'user')).toBe(farUser); + })); + + it('should be possible to add multiple icon packs', inject([FaIconLibrary], (library: FaIconLibrary) => { + library.addIconPacks(far, fas); + expect(library.getIconDefinition('fas', 'sun')).toBe(faSun); + expect(library.getIconDefinition('far', 'sun')).toBe(farSun); + })); + + it('should be possible to get an icon', inject([FaIconLibrary], (library: FaIconLibrary) => { + library.addIcons(faUser); + expect(library.getIconDefinition('fas', 'user')).toBe(faUser); + })); + + it('should return null if icon prefix was not registered', inject([FaIconLibrary], (library: FaIconLibrary) => { + expect(library.getIconDefinition('fas', 'user')).toBeNull(); + })); + + it('should return null if icon name is not registered', inject([FaIconLibrary], (library: FaIconLibrary) => { + library.addIcons(faUser); + expect(library.getIconDefinition('fas', 'sun')).toBeNull(); + })); +}); diff --git a/src/lib/icon-library.ts b/src/lib/icon-library.ts new file mode 100644 index 0000000..cb50638 --- /dev/null +++ b/src/lib/icon-library.ts @@ -0,0 +1,32 @@ +import { Injectable } from '@angular/core'; +import { IconDefinition, IconName, IconPack, IconPrefix } from '@fortawesome/fontawesome-svg-core'; + +@Injectable({providedIn: 'root'}) +export class FaIconLibrary { + private definitions: { [prefix: string]: { [name: string]: IconDefinition } } = {}; + + addIcons(...icons: IconDefinition[]) { + for (let i = 0; i < icons.length; i++) { + const icon = icons[i]; + if (!(icon.prefix in this.definitions)) { + this.definitions[icon.prefix] = {}; + } + this.definitions[icon.prefix][icon.iconName] = icon; + } + } + + addIconPacks(...packs: IconPack[]) { + for (let i = 0; i < packs.length; i++) { + const pack = packs[i]; + const icons = Object.keys(pack).map((key) => pack[key]); + this.addIcons(...icons); + } + } + + getIconDefinition(prefix: IconPrefix, name: IconName): IconDefinition | null { + if (prefix in this.definitions && name in this.definitions[prefix]) { + return this.definitions[prefix][name]; + } + return null; + } +} diff --git a/src/lib/icon/duotone-icon.component.ts b/src/lib/icon/duotone-icon.component.ts index d2fe131..69d4346 100644 --- a/src/lib/icon/duotone-icon.component.ts +++ b/src/lib/icon/duotone-icon.component.ts @@ -1,6 +1,6 @@ import { Component, Input } from '@angular/core'; +import { IconDefinition, IconProp } from '@fortawesome/fontawesome-svg-core'; import { FaIconComponent } from './icon.component'; -import { IconLookup } from '@fortawesome/fontawesome-svg-core'; @Component({ selector: 'fa-duotone-icon', @@ -48,8 +48,8 @@ export class FaDuotoneIconComponent extends FaIconComponent { */ @Input() secondaryColor?: string; - protected normalizeIcon(): IconLookup { - const lookup = super.normalizeIcon(); + protected findIconDefinition(i: IconProp | IconDefinition): IconDefinition | null { + const lookup = super.findIconDefinition(i); if (lookup != null && lookup.prefix !== 'fad') { throw new Error( diff --git a/src/lib/icon/icon.component.spec.ts b/src/lib/icon/icon.component.spec.ts index fd11a67..758c0fe 100644 --- a/src/lib/icon/icon.component.spec.ts +++ b/src/lib/icon/icon.component.spec.ts @@ -7,6 +7,7 @@ import { Subject } from 'rxjs'; import { startWith } from 'rxjs/operators'; import { initTest, queryByCss } from '../../testing/helpers'; import { FaConfig } from '../config'; +import { FaIconLibrary } from '../icon-library'; import { FaIconComponent } from './icon.component'; describe('FaIconComponent', () => { @@ -118,8 +119,7 @@ describe('FaIconComponent', () => { const fixture = initTest(HostComponent); fixture.detectChanges(); - expect(queryByCss(fixture, 'svg')).toBeTruthy(); - expect(queryByCss(fixture, 'svg > path')).toBeFalsy(); + expect(queryByCss(fixture, 'svg')).toBeFalsy(); expect(spy).toHaveBeenCalledWith( 'FontAwesome: Property `icon` is required for `fa-icon`/`fa-duotone-icon` components. ' + 'This warning will become a hard error in 0.6.0.' @@ -185,8 +185,8 @@ describe('FaIconComponent', () => { template: '' }) class HostComponent { - constructor() { - library.add(faUser, faUserRegular); + constructor(iconLibrary: FaIconLibrary) { + iconLibrary.addIcons(faUser, faUserRegular); } } @@ -201,8 +201,8 @@ describe('FaIconComponent', () => { template: '' }) class HostComponent { - constructor() { - library.add(faUser, faUserRegular); + constructor(iconLibrary: FaIconLibrary) { + iconLibrary.addIcons(faUser, faUserRegular); } } @@ -212,4 +212,102 @@ describe('FaIconComponent', () => { fixture.detectChanges(); expect(queryByCss(fixture, 'svg').getAttribute('data-prefix')).toEqual('far'); }); + + it('should use icon definition from the icon library', () => { + @Component({ + selector: 'fa-host', + template: '' + }) + class HostComponent { + constructor(iconLibrary: FaIconLibrary) { + iconLibrary.addIcons(faUser); + } + } + + const fixture = initTest(HostComponent); + fixture.detectChanges(); + expect(queryByCss(fixture, 'svg')).toBeTruthy(); + }); + + it('should use icon definition from the global icon library and print warning with globalLibrary unset', () => { + @Component({ + selector: 'fa-host', + template: '' + }) + class HostComponent { + constructor() { + library.add(faUser); + } + } + + const spy = spyOn(console, 'error'); + + const fixture = initTest(HostComponent); + fixture.detectChanges(); + expect(queryByCss(fixture, 'svg')).toBeTruthy(); + expect(spy).toHaveBeenCalledWith( + 'FontAwesome: Global icon library is deprecated. ' + + 'Consult https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md ' + + 'for the migration instructions.' + ); + }); + + it('should not use icon definition from the global icon library and throw error with globalLibrary false', () => { + @Component({ + selector: 'fa-host', + template: '' + }) + class HostComponent { + constructor(config: FaConfig) { + library.add(faUser); + config.globalLibrary = false; + } + } + + const fixture = initTest(HostComponent); + expect(() => fixture.detectChanges()).toThrow(new Error( + 'Global icon library is deprecated. ' + + 'Consult https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md ' + + 'for the migration instructions.' + )); + }); + + it('should use icon definition from the global icon library without warnings with globalLibrary true', () => { + @Component({ + selector: 'fa-host', + template: '' + }) + class HostComponent { + constructor(config: FaConfig) { + library.add(faUser); + config.globalLibrary = true; + } + } + + const spy = spyOn(console, 'error'); + + const fixture = initTest(HostComponent); + fixture.detectChanges(); + expect(queryByCss(fixture, 'svg')).toBeTruthy(); + expect(spy).not.toHaveBeenCalledWith(); + }); + + it('should print a warning if icon definition is found neither in icon library, nor in global icon library', () => { + @Component({ + selector: 'fa-host', + template: '' + }) + class HostComponent { + } + + const spy = spyOn(console, 'error'); + + const fixture = initTest(HostComponent); + fixture.detectChanges(); + expect(queryByCss(fixture, 'svg')).toBeFalsy(); + expect(spy).toHaveBeenCalledWith( + 'FontAwesome: Could not find icon with iconName=circle and prefix=fas. ' + + 'This warning will become a hard error in 0.6.0.' + ); + }); }); diff --git a/src/lib/icon/icon.component.ts b/src/lib/icon/icon.component.ts index ce1e4bd..5544014 100644 --- a/src/lib/icon/icon.component.ts +++ b/src/lib/icon/icon.component.ts @@ -2,9 +2,10 @@ import { Component, HostBinding, Input, OnChanges, Optional, SimpleChanges } fro import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { FaSymbol, + findIconDefinition, FlipProp, icon, - IconLookup, + IconDefinition, IconParams, IconProp, parse, @@ -15,8 +16,8 @@ import { Transform } from '@fortawesome/fontawesome-svg-core'; import { FaConfig } from '../config'; -import { faNotFoundIconHtml } from '../shared/errors/not-found-icon-html'; -import { faWarnIfIconHtmlMissing } from '../shared/errors/warn-if-icon-html-missing'; +import { FaIconLibrary } from '../icon-library'; +import { faWarnIfIconDefinitionMissing } from '../shared/errors/warn-if-icon-html-missing'; import { faWarnIfIconSpecMissing } from '../shared/errors/warn-if-icon-spec-missing'; import { FaProps } from '../shared/models/props.model'; import { faClassList } from '../shared/utils/classlist.util'; @@ -87,19 +88,22 @@ export class FaIconComponent implements OnChanges { constructor( private sanitizer: DomSanitizer, private config: FaConfig, + private iconLibrary: FaIconLibrary, @Optional() private stackItem: FaStackItemSizeDirective, ) { } ngOnChanges(changes: SimpleChanges) { if (this.icon == null) { - faWarnIfIconSpecMissing(); + return faWarnIfIconSpecMissing(); } if (changes) { - const normalizedIcon = this.normalizeIcon(); - const params = this.buildParams(); - this.renderIcon(normalizedIcon, params); + const iconDefinition = this.findIconDefinition(this.icon); + if (iconDefinition != null) { + const params = this.buildParams(); + this.renderIcon(iconDefinition, params); + } } } @@ -114,8 +118,33 @@ export class FaIconComponent implements OnChanges { this.ngOnChanges({}); } - protected normalizeIcon() { - return faNormalizeIconSpec(this.icon, this.config.defaultPrefix); + protected findIconDefinition(i: IconProp | IconDefinition): IconDefinition | null { + const lookup = faNormalizeIconSpec(i, this.config.defaultPrefix); + if ('icon' in lookup) { + return lookup; + } + + const definition = this.iconLibrary.getIconDefinition(lookup.prefix, lookup.iconName); + if (definition != null) { + return definition; + } + + const globalDefinition = findIconDefinition(lookup); + if (globalDefinition != null) { + const message = 'Global icon library is deprecated. ' + + 'Consult https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md ' + + 'for the migration instructions.'; + if (this.config.globalLibrary === 'unset') { + console.error('FontAwesome: ' + message); + } else if (!this.config.globalLibrary) { + throw new Error(message); + } + + return globalDefinition; + } + + faWarnIfIconDefinitionMissing(lookup); + return null; } protected buildParams() { @@ -139,7 +168,7 @@ export class FaIconComponent implements OnChanges { title: this.title, transform: parsedTransform, classes: [...faClassList(classOpts), ...this.classes], - mask: faNormalizeIconSpec(this.mask, this.config.defaultPrefix), + mask: this.mask != null ? this.findIconDefinition(this.mask) : null, styles: this.styles != null ? this.styles : {}, symbol: this.symbol, attributes: { @@ -148,14 +177,9 @@ export class FaIconComponent implements OnChanges { }; } - private renderIcon(iconLookup: IconLookup, params: IconParams) { - const renderedIcon = icon(iconLookup, params); - - faWarnIfIconHtmlMissing(renderedIcon, iconLookup); - - this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml( - renderedIcon ? renderedIcon.html.join('\n') : faNotFoundIconHtml - ); + private renderIcon(definition: IconDefinition, params: IconParams) { + const renderedIcon = icon(definition, params); + this.renderedIconHTML = this.sanitizer.bypassSecurityTrustHtml(renderedIcon.html.join('\n')); } } diff --git a/src/lib/icon/icon.service.spec.ts b/src/lib/icon/icon.service.spec.ts index 47bd5a7..20d3379 100644 --- a/src/lib/icon/icon.service.spec.ts +++ b/src/lib/icon/icon.service.spec.ts @@ -1,4 +1,5 @@ import { inject, TestBed } from '@angular/core/testing'; +import { FaConfig } from '../config'; import { FaIconService } from './icon.service'; describe('FaIconService', () => { @@ -12,4 +13,10 @@ describe('FaIconService', () => { expect(service).toBeTruthy(); expect(service.defaultPrefix).toEqual('fas'); })); + + it('should proxy value to FaConfig', inject([FaIconService, FaConfig], (service: FaIconService, config: FaConfig) => { + expect(config.defaultPrefix).toBe('fas'); + service.defaultPrefix = 'far'; + expect(config.defaultPrefix).toBe('far'); + })); }); diff --git a/src/lib/public_api.ts b/src/lib/public_api.ts index f4b6d66..1ad609a 100644 --- a/src/lib/public_api.ts +++ b/src/lib/public_api.ts @@ -9,3 +9,4 @@ export { FaLayersTextComponent } from './layers/layers-text.component'; export { FaLayersCounterComponent } from './layers/layers-counter.component'; export { FaStackComponent } from './stack/stack.component'; export { FaStackItemSizeDirective } from './stack/stack-item-size.directive'; +export { FaIconLibrary } from './icon-library'; diff --git a/src/lib/shared/errors/not-found-icon-html.ts b/src/lib/shared/errors/not-found-icon-html.ts deleted file mode 100644 index b7c29af..0000000 --- a/src/lib/shared/errors/not-found-icon-html.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { config } from '@fortawesome/fontawesome-svg-core'; - -export const faNotFoundIconHtml = ``; diff --git a/src/lib/shared/errors/warn-if-icon-html-missing.ts b/src/lib/shared/errors/warn-if-icon-html-missing.ts index 104fd65..95daa7e 100644 --- a/src/lib/shared/errors/warn-if-icon-html-missing.ts +++ b/src/lib/shared/errors/warn-if-icon-html-missing.ts @@ -1,10 +1,8 @@ -import { Icon, IconLookup } from '@fortawesome/fontawesome-svg-core'; +import { IconLookup } from '@fortawesome/fontawesome-svg-core'; -export const faWarnIfIconHtmlMissing = (iconObj: Icon, iconSpec: IconLookup) => { - if (iconSpec && !iconObj) { - console.error( - `FontAwesome: Could not find icon with iconName=${iconSpec.iconName} and prefix=${iconSpec.prefix}. ` + - `This warning will become a hard error in 0.6.0.` - ); - } +export const faWarnIfIconDefinitionMissing = (iconSpec: IconLookup) => { + console.error( + `FontAwesome: Could not find icon with iconName=${iconSpec.iconName} and prefix=${iconSpec.prefix}. ` + + `This warning will become a hard error in 0.6.0.` + ); }; diff --git a/src/lib/shared/utils/normalize-icon-spec.util.ts b/src/lib/shared/utils/normalize-icon-spec.util.ts index 8480706..1e3e90c 100644 --- a/src/lib/shared/utils/normalize-icon-spec.util.ts +++ b/src/lib/shared/utils/normalize-icon-spec.util.ts @@ -1,16 +1,13 @@ -import { IconLookup, IconProp, IconPrefix } from '@fortawesome/fontawesome-svg-core'; - +import { IconDefinition, IconLookup, IconPrefix, IconProp } from '@fortawesome/fontawesome-svg-core'; import { isIconLookup } from './is-icon-lookup.util'; /** * Normalizing icon spec. */ -export const faNormalizeIconSpec = (iconSpec: IconProp, defaultPrefix: IconPrefix = 'fas'): IconLookup => { - - if (typeof iconSpec === 'undefined' || iconSpec === null) { - return null; - } - +export const faNormalizeIconSpec = ( + iconSpec: IconProp | IconDefinition, + defaultPrefix: IconPrefix +): IconLookup | IconDefinition => { if (isIconLookup(iconSpec)) { return iconSpec; }