g-icon alternative to fa-icon

icon.component.scss

:host {
	display: inline-block;
}

svg {
	height: 1em;
	vertical-align: -0.125em;
}

:host[size='lg'] svg {
	font-size: 1.2em;
	line-height: 0.05em;
	vertical-align: -0.2em;
}

:host[size='2x'] svg {
	font-size: 2em;
}

:host[size='4x'] svg {
	font-size: 4em;
}

:host[fixedWidth='true'],
:host[fixedWidth=''] {
	svg {
		text-align: center;
		width: 1.25em;
	}
}

:host[pulse='true'],
:host[pulse=''] {
	svg {
		animation-name: g-spin;
		animation-direction: normal;
		animation-duration: 1s;
		animation-timing-function: steps(8);
		animation-iteration-count: infinite;
	}
}

:host[inverse='true'],
:host[inverse=''] {
	color: #fff;
}

@keyframes g-spin {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

icon.component.ts

import { Component, Input } from '@angular/core';
import { IconDefinition, IconPathData } from '@fortawesome/fontawesome-common-types';

/** @see https://fontawesome.com/icons/notdef?s=solid */
const ICON_MISSING = {
	name: 'notdef',
	width: 384,
	height: 512,
	// eslint-disable-next-line max-len
	path: 'M336 0h-288C21.49 0 0 21.49 0 48v416C0 490.5 21.49 512 48 512h288c26.51 0 48-21.49 48-48v-416C384 21.49 362.5 0 336 0zM281.5 64L192 198.3L102.5 64H281.5zM64 121.7L153.5 256L64 390.3V121.7zM102.5 448L192 313.7L281.5 448H102.5zM320 390.3L230.5 256L320 121.7V390.3z',
};

@Component({
	selector: 'g-icon',
	styleUrls: ['icon.component.scss'],
	template: `
		<svg
			xmlns="http://www.w3.org/2000/svg"
			role="img"
			aria-hidden="true"
			focusable="false"
			[attr.viewBox]="viewBox"
			[ngClass]="iconName"
		>
			<g transform-origin="center" [attr.transform]="transform">
				<path fill="currentColor" [attr.d]="svgPath" />
			</g>
		</svg>
	`,
	host: {
		'[attr.title]': 'title',
		'[attr.pulse]': 'pulse',
		'[attr.inverse]': 'inverse',
		'[attr.fixedWidth]': 'fixedWidth',
	},
})
export class IconComponent {
	@Input('icon') iconDefinition: IconDefinition;
	/**
	 * Specify a title for the icon.
	 * This text will be displayed in a tooltip on hover and presented to the
	 * screen readers.
	 */
	@Input() title?: string;
	/** Make the icon into a square block */
	@Input() fixedWidth: string | boolean;
	/** lg, 2x or 4x to make the icon bigger. @note Do not use as a property binding. */
	@Input() size: 'lg' | '2x' | '4x';
	/** Inverse the icon color (make it white) */
	@Input() inverse: string | boolean;
	/** Add this attribute to animate a spinner. */
	@Input() pulse: string | boolean;
	/**
	 * SVG transform expression
	 * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
	 */
	@Input() transform: string;

	get viewBox(): string {
		const [width = ICON_MISSING.width, height = ICON_MISSING.height] = this.iconDefinition?.icon || [];
		return `0 0 ${width} ${height}`;
	}

	get svgPath(): IconPathData | number {
		if (!Array.isArray(this.iconDefinition?.icon)) return ICON_MISSING.path;
		return this.iconDefinition.icon.at(-1);
	}

	get iconName(): string {
		return `fa-${this.iconDefinition?.iconName || ICON_MISSING.name}`;
	}
}

my-component.component.ts

import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons/faExclamationTriangle';

@Component({
	selector: 'g-my-component',
	template: '<g-icon [icon]="icons.faExclamationTriangle" size="4x"></g-icon>',
})
export class MyComponent implements OnInit {
	icons = { faExclamationTriangle };
}