@fortawesome/fontawesome-svg-core#IconName TypeScript Examples

TableCell: React.FC<ITableCellProps> = props => {
    const { className, column, ...otherProps } = { ...props };
    let classesArr = [column.classes, className, "sm:block"];
    if (typeof column.mobileIcon !== "undefined") {
        classesArr.push("flex p-2 sm:p-0");
    } else {
        classesArr.push("hidden");
    }
    const classes = classesArr.join(" ");
    const id = column.name;

    return (
        <Label id={id} className={classes}  {...otherProps}>
            {column.mobileIcon &&
                <FontAwesomeIcon icon={column.mobileIcon as IconName} size="sm" className="m-1 sm:hidden" />
            }
            {props.children}
        </Label>
    );
}

TableHeadItem: React.FC<ITableHeadItemProps> = observer((props) => {

    const { store, item } = props; // useStores();

    function handleClick(clickedItem: IColumn) {
        if (clickedItem.sortable) {
            store.clientStore.setSort(clickedItem.name);
        }
    }

    return (
        <Label id={item.name}
            className={`text-xs ${item.classes} ${item.sortable
                ? "cursor-pointer"
                : ""}`}
            onClick={() => handleClick(item)}
        >
            {item.label}
            {item.name === store.clientStore.sortBy &&
                <FontAwesomeIcon
                    icon={`sort-${store.clientStore.sortOrder === 1
                        ? "down"
                        : "up"}` as IconName}
                    className="ml-1" />
            }
        </Label>
    );
})

function iconName (status: string): IconName {
  switch (status) {
    case 'error':
      return 'ban';

    case 'event':
      return 'assistive-listening-systems';

    case 'received':
      return 'telegram-plane';

    default:
      return 'check';
  }
}

function createIdElem (nameElem: React.ReactNode, color: 'green' | 'red' | 'gray', icon: IconName): React.ReactNode {
  return (
    <div className='via-identity'>
      <Badge
        color={color}
        icon={icon}
        isSmall
      />
      {nameElem}
    </div>
  );
}

function iconName (status: string): IconName {
  switch (status) {
    case 'error':
      return 'ban';

    case 'event':
      return 'assistive-listening-systems';

    case 'received':
      return 'telegram-plane';

    default:
      return 'check';
  }
}

function signerIconName (status: QueueTxStatus): IconName {
  switch (status) {
    case 'cancelled':
      return 'ban';

    case 'completed':
    case 'inblock':
    case 'finalized':
    case 'sent':
      return 'check';

    case 'dropped':
    case 'invalid':
    case 'usurped':
      return 'arrow-down';

    case 'error':
    case 'finalitytimeout':
      return 'exclamation-triangle';

    case 'queued':
    // case 'retracted':
      return 'random';

    default:
      return 'spinner';
  }
}

function iconName(status: string): IconName {
  switch (status) {
    case 'error':
      return 'ban';

    case 'event':
      return 'assistive-listening-systems';

    case 'received':
      return 'telegram-plane';

    default:
      return 'check';
  }
}

function signerIconName(status: QueueTxStatus): IconName {
  switch (status) {
    case 'cancelled':
      return 'ban';

    case 'completed':
    case 'inblock':
    case 'finalized':
    case 'sent':
      return 'check';

    case 'dropped':
    case 'invalid':
    case 'usurped':
      return 'arrow-down';

    case 'error':
    case 'finalitytimeout':
      return 'exclamation-triangle';

    case 'queued':
      // case 'retracted':
      return 'random';

    default:
      return 'spinner';
  }
}

getIconType(str: string): IconType {
        if (findIconDefinition({ iconName: str as IconName, prefix: "fas" }))
            return "font-awesome";
        if (findIconDefinition({ iconName: str as IconName, prefix: "far" }))
            return "font-awesome";
        if (findIconDefinition({ iconName: str as IconName, prefix: "fab" }))
            return "font-awesome";
        if (ObsidianIcons.includes(str as ObsidianIconNames)) {
            return "obsidian";
        }
        for (const [pack, icons] of Object.entries(this.DOWNLOADED)) {
            if (str in icons) return pack as DownloadableIconPack;
        }
    }

getIconNode(icon: AdmonitionIconDefinition): Element {
        if (icon.type === "image") {
            const img = new Image();
            img.src = icon.name;
            return img;
        }
        if (icon.type == "obsidian") {
            const el = createDiv();
            setIcon(el, icon.name);
            return el;
        }
        if (this.DOWNLOADED[icon.type as DownloadableIconPack]?.[icon.name]) {
            const el = createDiv();
            el.innerHTML =
                this.DOWNLOADED[icon.type as DownloadableIconPack]?.[icon.name];
            return el.children[0];
        }
        for (const prefix of ["fas", "far", "fab"] as IconPrefix[]) {
            const definition = findIconDefinition({
                iconName: icon.name as IconName,
                prefix
            });
            if (definition) return getFAIcon(definition).node[0];
        }
    }

function ComponentForIconName(faIconName: IconName, className="", styling={}): JSX.Element {
    _initFontAwesome();
    return (<FontAwesomeIcon className={className} icon={faIconName} style={styling} />);
}

function createIdElem(nameElem: React.ReactNode, color: 'green' | 'red' | 'gray', icon: IconName): React.ReactNode {
  return (
    <div className="via-identity">
      <Badge color={color} icon={icon} isSmall />
      {nameElem}
    </div>
  );
}

async loadSettings() {
        const loaded: AdmonitionSettings = await this.loadData();
        this.data = Object.assign({}, DEFAULT_APP_SETTINGS, loaded);

        if (this.data.userAdmonitions) {
            if (
                !this.data.version ||
                Number(this.data.version.split(".")[0]) < 5
            ) {
                for (let admonition in this.data.userAdmonitions) {
                    if (
                        Object.prototype.hasOwnProperty.call(
                            this.data.userAdmonitions[admonition],
                            "type"
                        )
                    )
                        continue;
                    this.data.userAdmonitions[admonition] = {
                        ...this.data.userAdmonitions[admonition],
                        icon: {
                            type: "font-awesome",
                            name: this.data.userAdmonitions[admonition]
                                .icon as unknown as IconName
                        }
                    };
                }
            }

            if (
                !this.data.version ||
                Number(this.data.version.split(".")[0]) < 8
            ) {
                new Notice(
                    createFragment((e) => {
                        e.createSpan({
                            text: "Admonitions: Obsidian now has native support for callouts! Check out the "
                        });

                        e.createEl("a", {
                            text: "Admonitions ReadMe",
                            href: "obsidian://show-plugin?id=obsidian-admonition"
                        });

                        e.createSpan({
                            text: " for what that means for Admonitions going forward."
                        });
                    }),
                    0
                );
            }
        }

        if (
            !this.data.rpgDownloadedOnce &&
            this.data.userAdmonitions &&
            Object.values(this.data.userAdmonitions).some((admonition) => {
                if (admonition.icon.type == "rpg") return true;
            }) &&
            !this.data.icons.includes("rpg")
        ) {
            try {
                await this.downloadIcon("rpg");
                this.data.rpgDownloadedOnce = true;
            } catch (e) {}
        }

        await this.saveSettings();
    }