@fortawesome/free-solid-svg-icons#faTimesCircle JavaScript Examples

Rejected = () => (
  <div className="container loading">
    <div className="row">
      <div className="col-md-12 text-center pt-4">
        <FontAwesomeIcon size="2x" color="red" icon={faTimesCircle} />
      </div>
    </div>
  </div>
)

ICONS = {
  bars: faBars,
  'check-circle': faCheckCircle,
  'chevron-down': faChevronDown,
  'chevron-right': faChevronRight,
  'exchange-alt': faExchangeAlt,
  exclamation: faExclamation,
  'exclamation-triangle': faExclamationTriangle,
  info: faInfo,
  moon: faMoon,
  question: faQuestion,
  rss: faRss,
  'sign-in-alt': faSignInAlt,
  sun: faSun,
  snowflake: faSnowflake,
  star: faStar,
  'times-circle': faTimesCircle,
  user: faUser,
}

render() {
        if (this.state.game) {
            const showPlayerDialog = gameService.currentPlayer === null && !this.state.showHelp;
            const card = this.state.cardToShow;
            return (<div>
                <Settings game={this.state.game} logs={this.state.logs} chat={this.state.chat}
                          showHelp={this.showHelp}/>
                <div className="game">
                    <Board game={this.state.game}/>
                    <Logs logs={this.state.logs}/>
                    <Video game={this.state.game} chat={this.state.chat}/>
                    <Players game={this.state.game}/>
                </div>
                {this.state.showHelp && <HelpDialog dismiss={this.hideHelp}/>}
                {showPlayerDialog && <SelectPlayerDialog game={this.state.game}/>}
                {card && <div className="card-overlay">
                    <div className={"card-picked " + card.type}>
                        {<a className="close" onClick={(e) => {
                            this.setState({cardToShow: null});
                        }}><FontAwesomeIcon icon={faTimesCircle}/></a>}
                        <span className="card-type">{card.type}</span>
                        <span className="card-text">{card.card}</span>
                        <span className="card-player">TO: {card.player.name}</span>
                    </div>
                </div>}
            </div>);
        } else {
            return (<div className="game-loading">
                {this.state.lostConnection && <span>Lost connection to server, reconnecting...</span>}
                {!this.state.lostConnection && <span>Loading game...</span>}
            </div>);
        }
    }

UnfilledCF = forwardRef(({ onRemove, children }, dragRef) => {
  return (
    <div className="content-field-description">
      <div className="drag-handle" ref={dragRef}>
        <FontAwesomeIcon icon={faArrowsAlt} color="inherit" />
      </div>
      <button className="close flat" type="button" onClick={onRemove}>
        <FontAwesomeIcon icon={faTimesCircle} color="inherit" />
      </button>
      {children}
    </div>
  );
})

ServerStatus = (props) => {
    const { connecting, connected, responseTime, serverType } = props;
    const { t } = useTranslation();

    let className = '';
    let toolTip = `${serverType} is`;
    let pingText;
    let icon = faCheckCircle;
    let splash = null;

    if (connected) {
        className += ' text-success';
        toolTip += ' connected';

        let pingClass;

        if (responseTime === undefined) {
            pingText = <span>{t('Waiting for ping')}</span>;
        } else {
            if (responseTime < 150) {
                pingClass = 'text-success';
            } else if (responseTime < 300) {
                pingClass = 'text-warning';
            } else {
                pingClass = 'text-danger';
            }

            pingText = (
                <React.Fragment>
                    <span>{serverType}: </span>
                    <span className={pingClass}>{responseTime}ms</span>
                </React.Fragment>
            );
        }
    } else if (connecting) {
        className += ' text-warning';
        icon = faTimesCircle;
        toolTip += ' connecting';
        pingText = (
            <React.Fragment>
                <span>{serverType}: </span>
                <span className='text-warning'>{t('Connecting')}</span>
            </React.Fragment>
        );
    } else {
        className += ' text-danger';
        icon = faBan;
        toolTip += ' disconnected';
        pingText = (
            <React.Fragment>
                <span>{serverType}: </span>
                <span className='text-danger'>{t('Disconnected')}</span>
            </React.Fragment>
        );
        splash = <div className='disconnect-splash panel'><span className='text-danger'>Disconnected!</span></div>
    }

    return (
        <li className='server-status'>
            {pingText}
            <span className={className}>
                <FontAwesomeIcon icon={icon} title={t(toolTip)} />
            </span>
            {splash}
        </li>
    );
}

render() {

        const street = this.props.street || gameService.getStreet(this.props.position, this.props.game);

        const houses = [];
        if (street.houses > 0) {
            for (let i = 0; i < street.houses; i++) {
                houses.push(<div className="house" key={i}><FontAwesomeIcon icon={faHome}/></div>)
            }
        } else if (street.hotel > 0) {
            for (let i = 0; i < street.hotel; i++) {
                houses.push(<div className="hotel" key={i}><FontAwesomeIcon icon={faHotel}/></div>)
            }
        }
        const opened = this.state.opened;
        let canSend = false, owner = false, canBuyHouse = false;
        if (opened) {
            const permissions = gameService.allowedToSendDeed(street, this.props.game);
            canSend = permissions.canSend;
            owner = permissions.owner;
            canBuyHouse = gameService.canBuyHouse(street, this.props.game);
        }

        const mortgageClass = street.mortgaged ? " mortgaged":"";

        return (
            <div
                className={"street board-card grid-area-" + this.props.position + " " + this.props.boardPos + " " + (opened ? "opened" : "")+mortgageClass}
                onClick={() => this.setState({opened: true})}>
                {opened && <a className="close" onClick={(e) => {
                    this.setState({opened: false});
                    e.stopPropagation();
                }}><FontAwesomeIcon icon={faTimesCircle}/></a>}
                <div className="color" style={{backgroundColor: street.color}}>
                    {houses}
                </div>
                <div className="title">{street.title}</div>
                <div className="body">
                    {opened && Object.keys(street.rent).map(k => <div key={k}>{k}:&nbsp;{street.rent[k]}</div>)}
                    {opened && <div>
                        <hr/>
                        Cost:
                        {Object.keys(street.cost).map(k => <div key={k}>{k}:&nbsp;{street.cost[k]}</div>)}
                    </div>}

                    {opened && <Mortgage property={street} isOwner={owner} game={this.props.game} type="regular"/>}

                    {opened && canBuyHouse && <div className="housing">
                        <hr />
                        <div>
                            Houses: <button onClick={this.removeHouse}>-</button> {street.houses} /
                            4 <button onClick={this.addHouse}>+</button>
                        </div>
                        {(street.houses === 4 || street.hotel === 1) && <div>
                            Hotel: <button onClick={this.removeHotel}>-</button> {street.hotel} / 1 <button
                            onClick={this.addHotel}>+</button>
                        </div>}
                    </div>}

                    {opened && <div>
                        <hr/>
                        Owned by: {gameService.getPlayerFromId(street.owner).name}
                    </div>}

                    {opened && canSend && <div className='send-street'>
                        <hr/>
                        Send to:
                        <select value={this.state.sendTo} onChange={(e) => this.setState({sendTo: e.target.value})}>
                            <option value="">Select</option>
                            {this.props.game.players.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                        </select>
                        &nbsp;
                        <button onClick={this.sendStreet}>Send !</button>
                    </div>}

                </div>
                <div className="price">${street.price}</div>
            </div>
        )
    }

render() {
        const station = this.props.station || gameService.getStation(this.props.position, this.props.game);
        const opened = this.state.opened;


        let canSend = false;
        let owner = false;
        if (opened) {
            const permissions = gameService.allowedToSendDeed(station, this.props.game);
            canSend = permissions.canSend;
            owner = permissions.owner;
        }

        const mortgageClass = station.mortgaged ? " mortgaged":"";

        return (<div className={"train-station board-card grid-area-"+this.props.position+" " + this.props.boardPos + " " + (opened ? "opened" : "")+mortgageClass}
                     onClick={() => this.setState({opened: true})}>
            {opened && <a className="close" onClick={(e) => {
                this.setState({opened: false});
                e.stopPropagation();
            }}><FontAwesomeIcon icon={faTimesCircle}/></a>}
            <div className="title">{station.title}</div>
            <div className="icon">
                <FontAwesomeIcon icon={faTrain}/>
            </div>
            {opened && <div className="body">
                {Object.keys(station.rent).map(k => <div key={k}>{k}:&nbsp;{station.rent[k]}</div>)}

                {opened && <Mortgage property={station} isOwner={owner}  game={this.props.game} type="trainStations"/>}

                <div>
                    <hr/>
                    Owned by: {gameService.getPlayerFromId(station.owner).name}
                </div>

                {opened && canSend && <div className='send-street'>
                    <hr/>
                    Send to:
                    <select value={this.state.sendTo} onChange={(e) => this.setState({sendTo: e.target.value})}>
                        <option value="">Select</option>
                        {this.props.game.players.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                    </select>
                    &nbsp;
                    <button onClick={this.sendStation}>Send !</button>
                </div>}

            </div>}
            <div className="price">${station.price}</div>
        </div>);
    }

render() {
        const utility = this.props.utility || gameService.getUtility(this.props.position, this.props.game);
        const opened = this.state.opened;

        let canSend = false;
        let owner = false;
        if (opened) {
            const permissions = gameService.allowedToSendDeed(utility, this.props.game);
            canSend = permissions.canSend;
            owner = permissions.owner;
        }

        const mortgageClass = utility.mortgaged ? " mortgaged":"";
        return (
            <div className={"utility grid-area-"+this.props.position+" board-card " + this.props.boardPos + " " + (opened ? "opened" : "")+mortgageClass}
                 onClick={() => this.setState({opened: true})}>

                {opened && <a className="close" onClick={(e) => {
                    this.setState({opened: false});
                    e.stopPropagation();
                }}><FontAwesomeIcon icon={faTimesCircle}/></a>}

                <div className="title">{utility.title}</div>
                <div className="icon body">

                    {utility.type === 'water' && <FontAwesomeIcon icon={faFaucet}/>}
                    {utility.type === 'electricity' && <FontAwesomeIcon icon={faLightbulb}/>}
                </div>
                {opened && <div className="body">
                    {utility.description}

                    <Mortgage property={utility} isOwner={owner}  game={this.props.game} type="utilities"/>


                    <div>
                        <hr/>
                        Owned by: {gameService.getPlayerFromId(utility.owner).name}
                    </div>

                    {opened && canSend && <div className='send-street'>
                        <hr/>
                        Send to:
                        <select value={this.state.sendTo} onChange={(e) => this.setState({sendTo: e.target.value})}>
                            <option value="">Select</option>
                            {this.props.game.players.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
                        </select>
                        &nbsp;
                        <button onClick={this.sendUtility}>Send !</button>
                    </div>}

                </div>}
                <div className="price">${utility.price}</div>
            </div>);
    }

library.add(
    faArrowAltCircleUp,
    faCog,
    faEdit,
    faEye,
    faEyeSlash,
    faList,
    faPause,
    faPlay,
    faPlus,
    faSearch,
    faTachometerAlt,
    faTimes,
    faTimesCircle,
    faTrash,
    faCheckCircle,
    faStream,
    faSave,
    faExclamationCircle,
    faBullhorn,
    faArrowsAltV,
    faUnlink,
    faQuestionCircle,
    faImages,
    faUpload,
    faCopy,
    faCheck,
    faFile,
    faAward,
    faLink,
    faChevronDown,
    faSignOutAlt,
    faPen,
    faExternalLinkSquareAlt,
    faSpinner,
    faUndo,
    faPlusCircle,
    faAngleDown,
    faLink,
);

export default function () {
  library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
    faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
    faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}