diff --git a/src/core/directives/fa-icon.ts b/src/core/directives/fa-icon.ts index 112a267df..c01d1809e 100644 --- a/src/core/directives/fa-icon.ts +++ b/src/core/directives/fa-icon.ts @@ -16,10 +16,11 @@ import { AfterViewInit, Directive, ElementRef, Input, OnChanges, SimpleChange } import { CoreLogger } from '@singletons/logger'; import { Http } from '@singletons'; import { CoreConstants } from '@/core/constants'; +import { CorePromisedValue } from '@classes/promised-value'; /** - * Directive to enable font-awesome 5 as ionicons. - * Check available icons at https://fontawesome.com/icons?d=gallery&m=free + * Directive to enable font-awesome 6.3 as ionicons. + * Check available icons at https://fontawesome.com/search?o=r&m=free * * Example usage: * @@ -35,6 +36,8 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges { */ private static readonly DEV_ICONS_STATUS: Record> = {}; + protected static aliases?: CorePromisedValue>; + @Input() name = ''; protected element: HTMLElement; @@ -91,10 +94,21 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges { iconName = iconName.substring(parts[0].length + 1); - const src = `assets/fonts/${font}/${library}/${iconName}.svg`; + // Set it here to avoid loading unexisting icon paths (svg/iconName) caused by the tick delay of the checkIconAlias promise. + let src = `assets/fonts/${font}/${library}/${iconName}.svg`; this.element.setAttribute('src', src); + + if (font === 'font-awesome') { + const iconNameChecked = await this.checkIconAlias(iconName); + if (iconNameChecked !== iconName) { + src = `assets/fonts/${font}/${library}/${iconName}.svg`; + this.element.setAttribute('src', src); + } + } + this.element.classList.add('faicon'); this.validateIcon(this.name, src); + } /** @@ -121,6 +135,51 @@ export class CoreFaIconDirective implements AfterViewInit, OnChanges { this.setIcon(); } + /** + * Check icon alias and returns the new icon name. + * + * @param iconName Icon name. + * @returns New icon name. + */ + protected async checkIconAlias(iconName: string): Promise { + const aliases = await CoreFaIconDirective.getIconsAliases(); + + if (aliases[iconName]) { + this.logger.error(`Icon ${iconName} is an alias of ${aliases[iconName]}, please use the new name.`); + + return aliases[iconName]; + } + + return iconName; + } + + /** + * Read the icon aliases json file. + * + * @returns Promise resolved when loaded. + */ + protected static async getIconsAliases(): Promise> { + if (CoreFaIconDirective.aliases !== undefined) { + return CoreFaIconDirective.aliases; + } + + CoreFaIconDirective.aliases = new CorePromisedValue(); + + try { + const aliases = await Http.get>('assets/fonts/font-awesome/aliases.json', { + responseType: 'json', + }).toPromise(); + + CoreFaIconDirective.aliases.resolve(aliases); + + return aliases; + } catch { + CoreFaIconDirective.aliases.resolve({}); + + return {}; + } + } + /** * Validate that an icon exists, or show warning otherwise (only in development and testing environments). *