@fortawesome/free-solid-svg-icons#faWrench JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faWrench.
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: index.js From web-client with Apache License 2.0 | 6 votes |
|
SettingsIndexPage = () => {
return <div>
<PageTitle value="Settings" />
<div className='heading'>
<Breadcrumb />
</div>
<Title title="Settings" icon={<FontAwesomeIcon icon={faWrench} />} />
<p>Click on one of the items on the left.</p>
</div>
}
Example #2
| Source File: Header.js From Postman-Clone with MIT License | 5 votes |
|
Header = () => {
return (
<div className="header">
<div className="header__row">
{/* Left Side Buttons */}
<div className="header__column">
<button className="header__newButton">
<FontAwesomeIcon icon={faPlusSquare} className="icon" />
New
</button>
<button className="header__button">Import</button>
<button className="header__button">Runner</button>
<button className="header__button">
<FontAwesomeIcon icon={faFileImport} className="icon" />
</button>
</div>
{/* Center Content */}
<div className="header__column">
<div className="header__titleWrapper">
<FontAwesomeIcon icon={faThLarge} id="header__titleIcon" />
<span className="header__titleText">My workspace</span>
<FontAwesomeIcon
icon={faChevronDown}
className="header_titleDropDownIcon"
/>
<button className="header__button" id="header__inviteButton">
<FontAwesomeIcon icon={faUserPlus} className="icon" />
Invite
</button>
</div>
</div>
{/* Right Side Content */}
<div className="header__column">
<div className="header__iconWrapper">
<FontAwesomeIcon
icon={faSyncAlt}
className="header__iconButton active"
/>
<FontAwesomeIcon
icon={faSatelliteDish}
className="header__iconButton"
/>
<FontAwesomeIcon icon={faWrench} className="header__iconButton" />
<FontAwesomeIcon icon={faBell} className="header__iconButton" />
<FontAwesomeIcon icon={faHeart} className="header__iconButton" />
<FontAwesomeIcon
icon={faMicrochip}
className="header__iconButton"
/>
<button className="header__button" id="header__upgradeButton">
Upgrade
<FontAwesomeIcon icon={faChevronDown} style={{ marginLeft: 5 }} />
</button>
</div>
</div>
</div>
</div>
);
}
Example #3
| 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>
<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>
);
}
Example #4
| Source File: Links.js From web-client with Apache License 2.0 | 4 votes |
|
Links = [
{
title: 'Projects', icon: <IconFolder size={5} />, to: '/projects', sublinks: [
{
title: 'Create',
icon: <FontAwesomeIcon icon={faPlus} />,
to: '/projects/create',
permissions: 'projects.create'
},
{
title: 'Templates',
icon: <IconDocumentDuplicate size={5} />,
to: '/projects/templates',
permissions: 'projects.templates'
}
]
},
{
title: 'Tasks',
icon: <IconClipboardList size={5} />,
to: '/tasks',
sublinks: [
{
title: 'Create',
icon: <IconPlus size={5} />,
to: '/tasks/create',
}
],
permissions: 'tasks.create'
},
{
title: 'Commands', icon: <IconTerminal size={5} />, to: '/commands', sublinks: [
{
title: 'Add',
icon: <IconPlus size={5} />,
to: '/commands/add',
}
],
permissions: 'commands.*'
},
{
title: 'Vulnerabilities', icon: <IconFlag size={5} />, to: '/vulnerabilities', sublinks: [
{
title: 'Add',
icon: <IconPlus size={5} />,
to: '/vulnerabilities/create',
},
{
title: 'Templates',
icon: <IconDocumentDuplicate size={5} />,
to: '/vulnerabilities/templates',
permissions: 'vulnerabilities.templates'
},
{
title: 'Categories',
icon: <IconDocumentDuplicate size={5} />,
to: '/vulnerabilities/categories',
permissions: 'vulnerabilities.categories'
}
],
permissions: 'vulnerabilities.*'
},
{
title: 'Reports', icon: <IconFlag size={5} />, to: '/reports', sublinks: [
{
title: 'Templates',
icon: <IconDocumentDuplicate size={5} />,
to: '/reports/templates',
permissions: 'reports.templates'
}
],
permissions: 'reports.*'
},
{
title: 'Documents', icon: <IconDocument size={5} />, to: '/documents', sublinks: [
{
title: 'Add',
icon: <IconPlus size={5} />,
to: '/documents/add',
}
],
permissions: 'documents.*'
},
{
title: 'Clients', icon: <IconBriefcase size={5} />, to: '/clients', sublinks: [
{
title: 'Create',
icon: <IconPlus size={5} />,
to: '/clients/create',
}
],
permissions: 'clients.*'
},
{
title: 'Users', icon: <IconUserGroup size={5} />, to: '/users', sublinks: [
{
title: 'Create',
icon: <IconPlus size={5} />,
to: '/users/create',
}
],
permissions: 'users.*'
},
{
title: 'Settings',
icon: <FontAwesomeIcon icon={faWrench} />,
to: '/settings',
sublinks: [
{
title: 'Organisation',
icon: <FontAwesomeIcon icon={faBriefcase} />,
to: '/settings/organisation'
},
],
permissions: 'settings.*'
},
{
title: 'System',
icon: <FontAwesomeIcon icon={faCog} />,
to: '/system',
permissions: 'system.*',
sublinks: [
{
title: 'Audit log',
icon: <IconEye size={5} />,
to: '/auditlog'
},
{
title: 'Import data',
icon: <IconUpload size={5} />,
to: '/system/import-data',
},
{
title: 'Export data',
icon: <IconDownload size={5} />,
to: '/system/export-data',
},
{
title: 'Usage',
icon: <IconCube size={5} />,
to: '/system/usage',
},
{
title: 'Application logs',
icon: <IconEye size={5} />,
to: '/system/logs'
},
{
title: 'Integrations',
icon: <IconExtensions size={5} />,
to: '/system/integrations',
},
{
title: 'Health',
icon: <IconCheck size={5} />,
to: '/system/health',
},
]
},
{
title: 'Help and support',
icon: <IconQuestionCircle size={5} />,
to: '/help',
sublinks: [
{
title: 'User manual',
icon: <IconBookOpen size={5} />,
to: 'https://docs.reconmap.com/user-manual/',
external: true,
},
{
title: 'API docs',
icon: <IconCode size={5} />,
to: `${Configuration.getDefaultApiUrl()}/docs/`,
external: true,
permissions: 'help.api',
},
{
title: 'Support',
icon: <IconSupport size={5} />,
to: '/support',
permissions: 'help.support',
},
{
title: 'Licenses',
icon: <IconSupport size={5} />,
to: '/licenses',
permissions: 'help.licenses',
}
]
}
]
