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

SelectableIcon = (props: SelectableIconProps) => {
    const onChange = (status: string) => {
        props.onChange(status);
    };

    const createIcon = (groupId: string, status: string, onIconProp: IconProp, offIconProp: IconProp, tooltip?: string) => {
        const iconId = `${groupId}-${status}`;
        console.log("check", props.currentState, status);
        const icon = props.currentState === status ? <FontAwesomeIcon className="swap-on header-item-selectable-icon-active" icon={onIconProp} size="1x" /> : <FontAwesomeIcon className="swap-off header-item-selectable-icon" icon={offIconProp} size="1x" />;
        return (
            <div key={iconId} className="tooltip tooltip-bottom" data-tip={tooltip ? tooltip : ""}>
                <input
                    type="radio"
                    id={iconId}
                    name={groupId}
                    onChange={() => {
                        onChange(status);
                    }}
                    hidden
                />
                <label htmlFor={iconId}>{icon}</label>
            </div>
        );
    };
    const icons = useMemo(() => {
        return props.icons.map((x) => {
            return createIcon(props.id, x.status, x.onIconProp, x.offIconProp, x.tooltip);
        });
    }, [props.currentState]);

    useEffect(() => {
        const icon = document.getElementById(props.id) as HTMLInputElement;
        // icon.checked = props.currentState;
    }, [props.currentState]);

    return <>{icons}</>;
}

getIconFromFileType = (url: string): IconProp => {
    let icon: IconDefinition;

    if (testMediaType(url) === 'audio') {
        icon = faMusic;
    } else if (testMediaType(url) === 'video') {
        icon = faFilm;
    } else if (getSite(url) === 'youtube') {
        icon = faYoutube;
    } else if (getSite(url) === 'soundcloud') {
        icon = faSoundcloud;
    } else if (getSite(url) === 'twitch') {
        icon = faTwitch;
    } else {
        icon = faFile;
    }

    return icon;
}

backIcon = faArrowLeft as IconProp;

uploadIcon = faCloudUploadAlt as IconProp;

deleteIcon = faTrashAlt as IconProp;

checkIcon = faCheck as IconProp;

searchIcon = faSearch as IconProp;

filterIcon = faFilter as IconProp;

loveIcon = faHeart as IconProp;

sendIcon = faComment as IconProp;

locationIcon = faMapMarkerAlt as IconProp;

GameCards: React.FC = () => {
  const {
    firstSelectedCard,
    setFirstSelectedCard,
    secondSelectedCard,
    setSecondSelectedCard,
    iconFoundList,
    setIconFoundList,
    iconList,
    isPaused,
    isCheckingCards,
    setIsCheckingCards,
    difficulty,
  } = useContext(GameContext)

  const onSelectCard = (index: number) => (): void => {
    if (isCheckingCards) return
    if (firstSelectedCard === -1) setFirstSelectedCard(index)
    else setSecondSelectedCard(index)
  }

  const onEndCHeckingSelectedCards = (): void => {
    setFirstSelectedCard(-1)
    setSecondSelectedCard(-1)
    setIsCheckingCards(false)
  }

  const onCheckIfFoundIcon = (): void => {
    if (firstSelectedCard === -1) return

    setIsCheckingCards(true)
    const firstSelectedCardIcon = iconList[firstSelectedCard]
    const secondSelectedCardIcon = iconList[secondSelectedCard]

    if (firstSelectedCardIcon === secondSelectedCardIcon) {
      setTimeout(() => {
        const iconFoundListClone = [...iconFoundList]
        iconFoundListClone.push(firstSelectedCardIcon)
        setIconFoundList(iconFoundListClone)
        onEndCHeckingSelectedCards()
      }, [1000])
    } else {
      setTimeout(onEndCHeckingSelectedCards, [1000])
    }
  }

  useEffect(onCheckIfFoundIcon, [secondSelectedCard])

  return (
    <Container>
      {iconList.map(
        (icon: string, index: number): React.ReactNode => {
          const wasNotFound = iconFoundList.indexOf(icon) === -1
          const isTheFirstSelectedCard = firstSelectedCard === index
          const isTheSecondSelectedCard = secondSelectedCard === index
          const onClick = onSelectCard(index)

          const isShowingFrontFace =
            isTheFirstSelectedCard || isTheSecondSelectedCard

          return (
            <CardItem
              key={index}
              onClick={onClick}
              isVisible={wasNotFound}
              isShowingFrontFace={isShowingFrontFace}
              disabled={isPaused || isShowingFrontFace}
              numOfCardsInEachLine={difficulty / 4}
            >
              <FontAwesomeIcon icon={icon as IconProp} />
            </CardItem>
          )
        },
      )}
    </Container>
  )
}

userEditIcon = faUserCog as IconProp;

sendIcon = faComment as IconProp;

calendarIcon = faCalendarAlt as IconProp;

locationIcon = faMapMarkerAlt as IconProp;

homeIcon = faHome as IconProp;

heartIcon = faHeart as IconProp;

userIcon = faUser as IconProp;

settingsIcon = faCog as IconProp;

logoutIcon = faSignOutAlt as IconProp;