@fortawesome/free-solid-svg-icons#faUserPlus JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faUserPlus.
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: Widgets.js From volt-react-dashboard with MIT License | 6 votes |
|
ProfileCardWidget = () => {
return (
<Card border="light" className="text-center p-0 mb-4">
<div style={{ backgroundImage: `url(${ProfileCover})` }} className="profile-cover rounded-top" />
<Card.Body className="pb-5">
<Card.Img src={Profile1} alt="Neil Portrait" className="user-avatar large-avatar rounded-circle mx-auto mt-n7 mb-4" />
<Card.Title>Neil Sims</Card.Title>
<Card.Subtitle className="fw-normal">Senior Software Engineer</Card.Subtitle>
<Card.Text className="text-gray mb-4">New York, USA</Card.Text>
<Button variant="primary" size="sm" className="me-2">
<FontAwesomeIcon icon={faUserPlus} className="me-1" /> Connect
</Button>
<Button variant="secondary" size="sm">Send Message</Button>
</Card.Body>
</Card>
);
}
Example #2
| Source File: index.js From wedding-planner with MIT License | 6 votes |
|
SignupLink = () => {
const { loginWithRedirect } = useAuth0();
return (
<OverlayTrigger
placement="bottom"
overlay={<Tooltip id="tooltip-signup">Sign Up</Tooltip>}
>
<Nav.Link
onClick={() => loginWithRedirect({ screen_hint: 'signup' })}
>
<FontAwesomeIcon icon={faUserPlus} size="lg" />
</Nav.Link>
</OverlayTrigger>
);
}
Example #3
| Source File: NavigationBar.jsx From MyHome-Web with Apache License 2.0 | 5 votes |
|
render() {
return (
<Navbar>
<div>
<MenuIcon icon={this.props.menuToggled ? faTimes : faBars} onClick={this.props.onMenuToggle} />
<Text>MyHome logo</Text>
</div>
<div>
<span className="fa-layers fa-fw">
<FontAwesomeIcon icon={faBell} color={styles.colors.grey} size="lg" />
<Text className="fa-layers-counter" color={styles.colors.white} fontSize="2em" backgroundColor={styles.colors.red}>2</Text>
</span>
<span>
<Avatar src="https://http.cat/400" margin="0 10px" width="25px" height="25px" />
<Text
fontWeight="500"
dropdownMargin="0 0 0 -30px"
dropdown={
<ItemList>
{this.props.currentUser ?
<Item onClick={this.doSignOut}>
<FontAwesomeIcon icon={faSignOutAlt} />
<Text padding="0 0 0 5px">Logout</Text>
</Item>
:
<>
<Item onClick={this.goToSignUp}>
<FontAwesomeIcon icon={faUserPlus} />
<Text padding="0 0 0 5px">Sign Up</Text>
</Item>
<Item onClick={this.goToLogin}>
<FontAwesomeIcon icon={faSignInAlt} />
<Text padding="0 0 0 5px">Login</Text>
</Item>
</>
}
</ItemList>
}
>
{this.props.currentUser ? 'Tony Stark' : 'Guest'}
</Text>
</span>
</div>
</Navbar>
)
}
Example #4
| 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 #5
| Source File: Sidebar.jsx From UniDrive with GNU General Public License v2.0 | 4 votes |
|
export default function Sidebar({
authorizeUser, filterFilesInAllAccounts, userList, removeAllAccounts,
starFilter,
}) {
const body = document.getElementsByTagName('body')[0];
const style = getComputedStyle(body);
const initialState = (style.getPropertyValue('--sidebar-width') === '225px');
const [expand, setExpand] = useState(initialState);
const selectedElementList = document.getElementsByClassName('selected');
const initilaSelected = (selectedElementList.length === 0) ? 'all-files' : selectedElementList[0].id;
const [selected, setSelected] = useState(initilaSelected);
const scrollToggle = (ref) => {
userList.forEach((user) => {
user.ref.current.style.display = 'none';
});
ref.current.style.display = 'block';
window.scrollTo(0, ref.current.offsetTop - 100);
};
const toggleExpand = () => {
const sidebarItem = document.getElementsByClassName('collapsible');
Array.from(sidebarItem).forEach((item) => {
if (expand) {
item.classList.add('collapse');
body.style.setProperty('--sidebar-width', '60px');
} else {
item.classList.remove('collapse');
body.style.setProperty('--sidebar-width', '225px');
}
});
setExpand(!expand);
};
const handleClick = (target) => {
setSelected(target);
let query = 'trashed = false';
if (target === 'my-drive') {
query += ' and "me" in owners';
} else if (target === 'shared') {
query += ' and not "me" in owners';
} else if (target === 'starred') {
starFilter();
return;
}
filterFilesInAllAccounts(query);
};
const sidebarClassName = (expand) ? 'collapsible' : 'collapsible collapse';
return (
<div className={(expand) ? 'sidebar' : 'sidebar collapse'}>
<div>
<button type="button" className="sidebar-add-button" id="signin-btn" onClick={() => authorizeUser()}>
<FontAwesomeIcon icon={faUserPlus} size="lg" title="Add an Account" />
{expand ? ' Add Account' : ''}
</button>
<button type="button" className="sidebar-remove-button" id="remove-btn" onClick={() => removeAllAccounts()}>
<FontAwesomeIcon icon={faUserSlash} size="lg" title="Remove All Accounts" />
{expand ? ' Remove All Accounts' : ''}
</button>
<button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'all-files') ? 'selected' : ''}`} id="all-files" onClick={() => handleClick('all-files')}>
<FontAwesomeIcon className="sidebar-icon" icon={faHome} size="lg" title="All Files" />
{expand ? ' All Files' : ''}
</button>
<button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'my-drive') ? 'selected' : ''}`} id="my-drive" onClick={() => handleClick('my-drive')}>
<FontAwesomeIcon className="sidebar-icon" icon={faGoogleDrive} size="lg" title="My Drive Files" />
{expand ? ' My Drive Files' : ''}
</button>
<button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'shared') ? 'selected' : ''}`} id="shared" onClick={() => handleClick('shared')}>
<FontAwesomeIcon className="sidebar-icon" icon={faShareSquare} size="lg" title="Shared" />
{expand ? ' Shared' : ''}
</button>
<button type="button" className={`sidebar-item ${sidebarClassName} ${(selected === 'starred') ? 'selected' : ''}`} id="starred" onClick={() => handleClick('starred')}>
<FontAwesomeIcon className="sidebar-icon" icon={faStar} size="lg" title="Starred" />
{expand ? ' Starred' : ''}
</button>
<div className="sidebar-user-container">
{ userList.map((user) => {
const { name, picture } = parseIDToken(user.idToken);
const { ref } = user;
return (
<button type="button" className={`sidebar-user ${sidebarClassName}`} key={user.id} onClick={() => scrollToggle(ref)}>
<img className="sidebar-picture" src={picture} alt="Account profile" />
{expand ? ` ${name}` : ''}
</button>
);
})}
</div>
</div>
<div className="collapse-container collapsible">
<button type="button" className="collapse-button" onClick={() => toggleExpand()}>
<FontAwesomeIcon icon={expand ? faCaretSquareLeft : faCaretSquareRight} size="lg" title={expand ? 'Collapse' : 'Expand'} />
</button>
</div>
</div>
);
}
Example #6
| Source File: index.jsx From loopring-swap with GNU General Public License v3.0 | 4 votes |
|
Drawer = ({
open,
onClose,
onConnectWallet,
selectedWeb3Account,
onLogin,
onRegister,
needsRegistration,
loadingAuthStatus,
onLogout,
loggedIn,
darkTheme,
onDarkThemeChange,
selectedLanguage,
onSelectedLanguageChange,
}) => {
const container = useRef(null);
const [icon, setIcon] = useState(faLock);
const [iconColor, setIconColor] = useState("");
const [summaryMessageKey, setSummaryMessageKey] = useState("placeholder");
const [buttonMessageKey, setButtonMessageKey] = useState("placeholder");
useLayoutEffect(() => {
if (needsRegistration) {
setIcon(faUserPlus);
setIconColor(selectedTheme.primary);
setSummaryMessageKey("drawer.wallet.connect.register");
setButtonMessageKey("drawer.wallet.connect.action.register");
} else if (loggedIn) {
setIcon(faLockOpen);
setIconColor(selectedTheme.success);
setSummaryMessageKey("drawer.wallet.connect.logout");
setButtonMessageKey("drawer.wallet.connect.action.logout");
} else if (selectedWeb3Account) {
setIcon(faLock);
setIconColor(selectedTheme.error);
setSummaryMessageKey("drawer.wallet.connect.login");
setButtonMessageKey("drawer.wallet.connect.action.login");
} else {
setIcon(faPlug);
setIconColor(selectedTheme.primary);
setSummaryMessageKey("drawer.wallet.connect.summary");
setButtonMessageKey("drawer.wallet.connect.action.connect");
}
}, [loggedIn, needsRegistration, selectedWeb3Account]);
const handleButtonClick = useCallback(() => {
if (needsRegistration) {
onRegister();
} else if (loggedIn) {
onLogout();
} else if (selectedWeb3Account) {
onLogin();
} else {
onConnectWallet();
}
}, [
loggedIn,
needsRegistration,
onConnectWallet,
onLogin,
onLogout,
onRegister,
selectedWeb3Account,
]);
return (
<RootFlex
flexDirection="column"
alignItems="center"
open={open}
ref={container}
>
<HeaderFlex mb={3}>
<EllipsizedBox>
{selectedWeb3Account ? (
getShortenedEthereumAddress(selectedWeb3Account)
) : (
<FormattedMessage id="drawer.wallet.connect.header.connect" />
)}
</EllipsizedBox>
<Box ml={3} minWidth="auto">
<CloseIcon icon={faTimes} onClick={onClose} />
</Box>
</HeaderFlex>
<Box mb={3}>
<Icon icon={icon} color={iconColor} fontSize="40" />
</Box>
<Box px={4} mb={3} fontSize="12px" textAlign="center">
<SummaryMessage>
<FormattedMessage id={summaryMessageKey} />
</SummaryMessage>
</Box>
<Box mb={4}>
<Button onClick={handleButtonClick} loading={loadingAuthStatus}>
<FormattedMessage id={buttonMessageKey} />
</Button>
</Box>
<Box width="100%" mb={2}>
<Settings
darkTheme={darkTheme}
onDarkThemeChange={onDarkThemeChange}
selectedLanguage={selectedLanguage}
onSelectedLanguageChange={onSelectedLanguageChange}
/>
</Box>
<Box width="100%" mb={2}>
<Lrc />
</Box>
<Box width="100%" mb={2}>
<Support />
</Box>
<Box width="100%" mb={2}>
<TechnicalResources />
</Box>
<Box width="100%" mb={2}>
<ExchangeInfo />
</Box>
</RootFlex>
);
}
Example #7
| Source File: DemoDashboard.jsx From react-lte with MIT License | 4 votes |
|
export default function DemoDashboard() {
return (
<>
<LteContentHeader title='Dashboard' />
<LteContent>
<Row>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faCog} text='CPU Traffic' number='10%' iconColor='info' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faThumbsUp} text='Likes' number='41,410' iconColor='danger' />
</Col>
<div className='clearfix hidden-md-up' />
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faShoppingCart} text='Sales' number='760' iconColor='success' />
</Col>
<Col xs='12' sm='6' md='3'>
<LteInfoBox icon={faUsers} text='New Members' number='2,000' iconColor='warning' />
</Col>
</Row>
<Row>
<Col lg='3' xs='6'>
<LteSmallBox title='150' message='New Orders' href='/info' icon={faShoppingBasket} color='info' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='53%' message='Bounce Rate' href='/info' icon={faChartBar} color='success' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='44' message='User Registrations' href='/info' icon={faUserPlus} color='warning' />
</Col>
<Col lg='3' xs='6'>
<LteSmallBox title='65' message='Unique Visitors' href='/info' icon={faChartPie} color='danger' />
</Col>
</Row>
<Row>
<Col lg='8'>
<Card>
<CardHeader className='border-transparent'>
<CardTitle>Latest Orders</CardTitle>
<LteCardTools>
<Button color='' className='btn-tool' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<Table responsive>
<thead>
<tr>
<th>Order ID</th>
<th>Item</th>
<th>Status</th>
<th>Popularity</th>
</tr>
</thead>
<tbody>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='info'>
Processing
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00c0ef' data-height='20'>
90,80,-90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR1848</td>
<td>Samsung Smart TV</td>
<td>
<Badge tag='span' color='warning'>
Pending
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f39c12' data-height='20'>
90,80,-90,70,61,-83,68
</div>
</td>
</tr>
<tr>
<td>OR7429</td>
<td>iPhone 6 Plus</td>
<td>
<Badge tag='span' color='danger'>
Delivered
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#f56954' data-height='20'>
90,-80,90,70,-61,83,63
</div>
</td>
</tr>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td>
<Badge tag='span' color='success'>
Shipped
</Badge>
</td>
<td>
<div className='sparkbar' data-color='#00a65a' data-height='20'>
90,80,90,-70,61,-83,63
</div>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
<Row>
<Col lg='6'>
<LteDirectChat color='warning'>
<CardHeader>
<CardTitle>Direct Chat</CardTitle>
<LteCardTools>
<Badge color='warning' data-toggle='tooltip' title='3 New Messages'>
3
</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button
color=''
className='btn-tool'
data-toggle='tooltip'
title='Contacts'
data-widget='chat-pane-toggle'
>
<FontAwesomeIcon icon={faComments} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<LteDirectChatMessages>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 2:00 pm'
image={user1}
message="Is this template really for free? That's unbelievable!"
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 2:05 pm'
image={user3}
message='You better believe it!'
/>
<LteDirectChatMsg
name='Alexander Pierce'
date='23 Jan 5:37 pm'
image={user1}
message='Working with AdminLTE on a great new app! Wanna join?'
/>
<LteDirectChatMsg
right
name='Sarah Bullock'
date='23 Jan 6:10 pm'
image={user3}
message='I would love to.'
/>
</LteDirectChatMessages>
<LteDirectChatContacts>
<LteContactsList>
<LteContactsListItem
href='/contacts'
image={user1}
name='Count Dracula'
date='2/28/2015'
message='How have you been? I was...'
/>
<LteContactsListItem
href='/contacts'
image={user7}
name='Sarah Doe'
date='2/23/2015'
message='I will be waiting for...'
/>
<LteContactsListItem
href='/contacts'
image={user3}
name='Nadia Jolie'
date='2/20/2015'
message="I'll call you back at..."
/>
<LteContactsListItem
href='/contacts'
image={user5}
name='Nora S. Vans'
date='2/10/2015'
message='Where is your new...'
/>
<LteContactsListItem
href='/contacts'
image={user6}
name='John K.'
date='1/27/2015'
message='Can I take a look at...'
/>
<LteContactsListItem
href='/contacts'
image={user8}
name='Kenneth M.'
date='1/4/2015'
message='Never mind I found...'
/>
</LteContactsList>
</LteDirectChatContacts>
</CardBody>
<CardFooter>
<Form>
<InputGroup>
<Input placeholder='Type Message ...' />
<InputGroupAddon addonType='append'>
<Button color='warning'>Send</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</CardFooter>
</LteDirectChat>
</Col>
<Col lg='6'>
<Card>
<CardHeader>
<CardTitle>Latest Members</CardTitle>
<LteCardTools>
<Badge color='danger'>8 New Members</Badge>
<Button className='btn-tool' color='' data-card-widget='collapse'>
<FontAwesomeIcon icon={faMinus} />
</Button>
<Button color='' className='btn-tool' data-card-widget='remove'>
<FontAwesomeIcon icon={faTimes} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody className='p-0'>
<LteUsersList>
<LteUsersListItem image={user1} href='/users' name='Alexander Pierce' date='Today' />
<LteUsersListItem image={user8} href='/users' name='Norman' date='Yesterday' />
<LteUsersListItem image={user7} href='/users' name='Jane' date='12 Jan' />
<LteUsersListItem image={user6} href='/users' name='John' date='12 Jan' />
<LteUsersListItem image={user2} href='/users' name='Alexander' date='13 Jan' />
<LteUsersListItem image={user5} href='/users' name='Sarah' date='14 Jan' />
<LteUsersListItem image={user4} href='/users' name='Nora' date='15 Jan' />
<LteUsersListItem image={user3} href='/users' name='Nadia' date='15 Jan' />
</LteUsersList>
</CardBody>
</Card>
</Col>
</Row>
</Col>
<Col lg='4'>
<LteInfoBox icon={faTag} text='Inventory' number='5,200' bgColor='warning' />
<LteInfoBox icon={faHeart} text='Mentions' number='92,050' bgColor='success' />
<LteInfoBox icon={faCloudDownloadAlt} text='Downloads' number='114,381' bgColor='danger' />
<LteInfoBox icon={faComment} text='Direct Messages' number='163,921' bgColor='info' />
<Card>
<CardHeader className='border-0'>
<CardTitle>Online Store Overview</CardTitle>
<LteCardTools>
<Button className='btn-tool' color=''>
<FontAwesomeIcon icon={faDownload} />
</Button>
<Button color='' className='btn-tool'>
<FontAwesomeIcon icon={faBars} />
</Button>
</LteCardTools>
</CardHeader>
<CardBody>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-success text-xl'>
<FontAwesomeIcon icon={faRedo} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-success' />
12%
</span>
<span className='text-muted'>CONVERSION RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center border-bottom mb-3'>
<p className='text-warning text-xl'>
<FontAwesomeIcon icon={faShoppingCart} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-warning' /> 0.8%
</span>
<span className='text-muted'>SALES RATE</span>
</p>
</div>
<div className='d-flex justify-content-between align-items-center mb-0'>
<p className='text-danger text-xl'>
<FontAwesomeIcon icon={faUsers} />
</p>
<p className='d-flex flex-column text-right'>
<span className='font-weight-bold'>
<FontAwesomeIcon icon={faArrowUp} className='text-danger' /> 1%
</span>
<span className='text-muted'>REGISTRATION RATE</span>
</p>
</div>
</CardBody>
</Card>
</Col>
</Row>
</LteContent>
</>
);
}
