Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, Prop, State, Watch } from "@stencil/core";
- import { icon } from "@fortawesome/fontawesome-svg-core";
- import * as freeSolidFontAwesome from "@fortawesome/free-solid-svg-icons";
- import * as proLightFontAwesome from "@fortawesome/pro-light-svg-icons";
- import * as freeRegularFontAwesome from "@fortawesome/free-regular-svg-icons";
- import * as proRegularFontAwesome from "@fortawesome/pro-regular-svg-icons";
- @Component({
- tag: "my-font-awesome",
- styleUrl: "font-awesome.scss",
- shadow: false
- })
- export class FontAwesome {
- /**
- * Props
- */
- @Prop() icon: any;
- @Prop() size: string;
- @Prop() iconStyle: string = "solid";
- @Prop() plan: string = "free";
- /**
- * State
- */
- @State() iconHtml;
- /**
- * Watchers
- */
- @Watch("icon")
- iconChangedHandler(newValue) {
- this._setIcon(newValue);
- }
- /**
- * Lifecycle methods
- */
- componentWillLoad() {
- this._setIcon(this.icon);
- }
- render() {
- return this.iconHtml;
- }
- /**
- * Local methods
- */
- private _createHtmlTag(el) {
- const TagName = el.tag;
- let children = [];
- if (el.children) {
- children = el.children.map(child => this._createHtmlTag(child));
- }
- return <TagName {...el.attributes}>{children}</TagName>;
- }
- private _setIcon(selectedIcon) {
- let fontAwesome;
- switch (`${this.plan}-${this.iconStyle}`) {
- case "pro-light":
- fontAwesome = proLightFontAwesome;
- break;
- case "free-solid":
- fontAwesome = freeSolidFontAwesome;
- break;
- case "free-regular":
- fontAwesome = freeRegularFontAwesome;
- break;
- case "pro-regular":
- fontAwesome = proRegularFontAwesome;
- break;
- }
- const fontAwesomeIcon =
- typeof selectedIcon === "string"
- ? fontAwesome[selectedIcon]
- : selectedIcon;
- const classes: any = [`fa-${this.size}`];
- const iconElement = icon(fontAwesomeIcon, { classes }).abstract[0];
- this.iconHtml = this._createHtmlTag(iconElement);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement