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

The following examples show how to use @fortawesome/free-solid-svg-icons#faCogs. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: icons.js From WirtBot with GNU Affero General Public License v3.0

6 votes

library.add(
  faFileDownload,
  faTrash,
  faBars,
  faCheckSquare,
  faCheck,
  faPlus,
  faCogs,
  faServer,
  faLaptop,
  faMobileAlt
);

Example #2

Source File: Settings.js From gitconvex with Apache License 2.0

6 votes

export default function Settings() {
  const settingsReducer = (state, payload) => {
    if (payload > 0) {
      return {
        viewReloadCount: state.viewReloadCount + 1,
      };
    } else {
      return state;
    }
  };
  const [state, dispatch] = useReducer(settingsReducer, settingsInitialState);

  return (
    <>
      <div className="block w-full h-full pt-5 pb-10 overflow-auto">
        <div className="font-sans text-6xl my-4 mx-10 text-gray-700 block items-center align-middle">
          <FontAwesomeIcon className="text-5xl" icon={faCogs}></FontAwesomeIcon>
          <span className="mx-10">Settings</span>
        </div>
        <div className="block my-10 justify-center mx-auto w-11/12">
          <SettingsContext.Provider value={{ state, dispatch }}>
            <SettingsDataFileComponent></SettingsDataFileComponent>
            <SettingsRepoListComponent></SettingsRepoListComponent>
            <SettingsPortComponent></SettingsPortComponent>
          </SettingsContext.Provider>
        </div>
      </div>
    </>
  );
}

Example #3

Source File: Sidebar.jsx From MyHome-Web with Apache License 2.0

5 votes

getLinks() {
    return [
      {
        link: '/',
        icon: faHome,
        text: 'Home',
      },
      {
        link: '/notifications',
        icon: faBell,
        text: 'Notifications',
      },
      {
        link: '/bookamenity',
        icon: faCalendar,
        text: 'Book Amenity',
      },
      {
        link: '/payments',
        icon: faMoneyBill,
        text: 'Payments',
      },
      {
        link: '/settings',
        icon: faCogs,
        text: 'Settings',
      },
      {
        normal: true,
        link: 'https://example.org',
        icon: faQuestion,
        text: 'Help',
      },
      {
        normal: true,
        icon: faComment,
        link: 'https://github.com/',
        text: 'Feedback',
      },
    ];
  }

Example #4

Source File: PlayerStats.jsx From ashteki with GNU Affero General Public License v3.0

4 votes

render() {
        let t = this.props.t;
        let userStyle = {};
        if (this.props.user?.faveColor) {
            userStyle.color = this.props.user.faveColor;
        }
        let userClass = 'username' + (this.props.user.role ? ` ${this.props.user.role.toLowerCase()}-role` : '');

        let playerAvatar = (
            <div className='state'>
                <Avatar imgPath={this.props.user?.avatar} />
                <b className={userClass} style={userStyle}>{this.props.user?.username || t('Noone')}</b>
            </div>
        );

        let statsClass = classNames('panel player-stats', {
            'active-player': this.props.activePlayer
        });

        let firstPlayerToken = this.props.firstPlayer ? (
            <div className='state'>
                <img src={FirstPlayerImage} title='First Player' />
            </div>
        ) : (
            ''
        );

        return (
            <div className={statsClass}>
                {playerAvatar}
                {this.renderLifeRemaining()}
                {this.renderActions()}
                {firstPlayerToken}
                {this.props.activePlayer && (
                    <div className='state first-player-state'>
                        <Trans>Active Player</Trans>
                    </div>
                )}

                {this.props.showMessages && (
                    <div className='state chat-status'>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Show dice/card history'>
                                <FontAwesomeIcon
                                    icon={faHistory}
                                    onClick={this.props.onDiceHistoryClick}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Mute spectators'>
                                <FontAwesomeIcon
                                    icon={this.props.muteSpectators ? faEyeSlash : faEye}
                                    onClick={this.props.onMuteClick}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        {this.props.showManualMode && (
                            <div className='state'>
                                <a
                                    href='#'
                                    className={this.props.manualModeEnabled ? 'text-danger' : ''}
                                    onClick={this.props.onManualModeClick}
                                >
                                    <FontAwesomeIcon icon={faWrench}></FontAwesomeIcon>
                                    <span className='ml-1'>
                                        <Trans>Manual Mode</Trans>
                                    </span>
                                </a>&nbsp;
                                <a href='#' className='pr-1 pl-1' title='Show manual command list'>
                                    <FontAwesomeIcon
                                        icon={faList}
                                        onClick={this.props.onManualCommandsClick}
                                    />
                                </a>
                            </div>
                        )}
                        <div className='state'>
                            <a
                                href='#'
                                onClick={this.onSettingsClick.bind(this)}
                                className='pr-1 pl-1'
                            >
                                <FontAwesomeIcon icon={faCogs}></FontAwesomeIcon>
                                <span className='ml-1'>
                                    <Trans>Settings</Trans>
                                </span>
                            </a>
                        </div>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Copy chat to clipboard'>
                                <FontAwesomeIcon
                                    icon={faCopy}
                                    onClick={this.writeChatToClipboard.bind(this)}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        <div>
                            <a
                                href='#'
                                onClick={this.props.onMessagesClick}
                                className='pl-1'
                                title='Toggle chat'
                            >
                                <FontAwesomeIcon icon={faComment}></FontAwesomeIcon>
                                {this.props.numMessages > 0 && (
                                    <Badge variant='danger'>{this.props.numMessages}</Badge>
                                )}
                            </a>
                        </div>
                    </div>
                )}
            </div>
        );
    }