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

render(){
            return(
                <tr>
                    <td>{this.props.obj.sno}</td>
                    <td align="left">{this.props.obj.assessment}</td>
                    <td>{this.props.obj.YOP}</td>
                    <td>{this.props.obj.Date}</td>
                    <td>{this.props.obj.attended}</td>
                    <td>{this.props.obj.absent}</td>
                    <td>{this.props.obj.max}</td>
                    <td>{this.props.obj.avg}</td>
                    <td>{this.props.obj.min}</td>
                    <td>
                        <Tooltip title="Students" placement="right">
                            <Link to={"/user/"+this.props.obj.id} ><FontAwesomeIcon icon={faUser} className="ml-2 p-1 fa-lg" style={{backgroundColor:'#2A324B',color:'white',fontSize:'20',borderRadius:'10'}}/></Link>
                        </Tooltip>
                    </td>
                </tr>
            );
    }

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,
}

library.add(
  faHome,
  faInfoCircle,
  faUser,
  faYoutube,
  faBookmark,
  faSignOutAlt,
  faCaretDown,
  faArrowAltCircleLeft,
  faArrowAltCircleRight,
  faAtom,
  faMap
);

GitterRoomItem = ({name, avatarUrl, roomUrl, userCount, visible}) => {
  return (
    <div className="gitter-room-list-item-component" aria-hidden="true" onClick={() => window.open(roomUrl, "_blank")}>
      <img className="image" alt="Avatar" src={avatarUrl && avatarUrl !== ""  ? avatarUrl : withPrefix('/images/gitterPlaceholder.png')} />
      <div>
        <p className="gitter-room-name">{name}</p>
        <p className="gitter-room-members">
          <FontAwesomeIcon icon={faUser} /> {userCount} Members
        </p>
        {visible ? <p className="gitter-room-members">
          Public IRC
        </p> : null}
      </div>
    </div>
  )
}

navbar.args = {
  firstName: "Dress",
  secondName: "Fit",
  categories: [
    {
      id: 1,
      route: "/",
      name: "Home",
    },
    {
      id: 2,
      route: "/women",
      name: "Women",
    },
    {
      id: 3,
      route: "/men",
      name: "Men",
    },
    {
      id: 4,
      route: "/kids",
      name: "Baby & Kids",
    },
    {
      id: 5,
      route: "/accessories",
      name: "Accessories",
    },
  ],
  iconList: [
    { icon: faSearch, link: "/search", alt: "search" },
    { icon: faShoppingCart, link: "/cart", alt: "cart" },
    { icon: faUser, link: "/user", alt: "user" },
  ],
}

ClientInfo = (props) => {


    const [details, setDetails] = useState(false);
    const toggle = () => setDetails(!details);

    const clientInfo = props.info

    const formatToPhone = phone => {
        const zip = phone.substring(0, 3)
        const middle = phone.substring(3, 6)
        const last = phone.substring(6, 10)

        if (phone.length !== 10) {
            return phone;
        }

        return `(${zip}) ${middle}-${last}`
    }

    let phone = formatToPhone(clientInfo.phone)


    if (details === true) {
        return (
            <>
            <DetailsBtn2 onClick={toggle}>View Details</DetailsBtn2>
            <Container>
                <Mod isOpen={details} toggle={toggle}> 
                <MH1 data-cy="assign-tech-header">{clientInfo.companyName}</MH1>
                <hr></hr>
                <MBody>
                    <SpaceBetween>
                        <div>
                            <BorderedDiv>
                                <FontAwesomeIcon icon={faPhone} />
                                <MDiv>
                                    <p>{phone}</p>
                                </MDiv>
                            </BorderedDiv>
                            <BorderedDiv>
                                <FontAwesomeIcon icon={faMapMarkerAlt} />
                                <MDiv>
                                    <p>{clientInfo.street}</p>
                                    <p>{clientInfo.city}</p>
                                    <p>{clientInfo.state}</p>
                                    <p>{clientInfo.zip}</p>
                                </MDiv>
                            </BorderedDiv>
                            <BorderedDiv>
                            <FontAwesomeIcon icon={faUser} />
                                <MDiv>
                                    {/* @TODO: Pull this info from props */}
                                    <p>{clientInfo.contactName}</p>
                                    <p>{clientInfo.contactEmail}</p>
                                </MDiv>
                            </BorderedDiv>
                        </div>
                    </SpaceBetween>
                    <MButton onClick={toggle}>Done</MButton>
                </MBody>
                </Mod>
            </Container>
            </>
        )
    } else {
        return (
            <DetailsBtn onClick={toggle}>View Details</DetailsBtn>
        )
    }
}

render(){
        return( 
            <div>
                <FontAwesomeIcon icon={faUser} className="mr-2" /> User
            </div>
        )
    }

render() {


    return (

        <div className="cardContainer">
          <Card>
            <CardBody>

              <CardTitle tag="h4" className=" mb-2 mb-xl-2 font-weight-bold">
                Mapa Rio Grande do Sul
              </CardTitle> 

              </CardBody>

              <Map center={center} zoom={7} maxZoom={9}>

                <TileLayer
                  attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />

            <MarkerClusterGroup>
                  {array_obj_confirmed.map(({lat, lng, nome, confirmed, pop_estimada, data}, index) => (
                        <Marker position={[lat, lng]} key={index} icon={new L.NumberedDivIcon({number: confirmed})} attribution="confirmed" >
                            <Popup minWidth={250}>
                              <div className="popUp-container">
                                <div className="popUp-title">{nome}</div>
                                <div className="popUp-body">
                                  <ul>
                                    <li><FontAwesomeIcon icon={faVirus}/> Casos confirmados: {confirmed}</li>
                                    <li><FontAwesomeIcon icon={faUser}/> População Estimada 2019: {pop_estimada}</li>
                                    <li><FontAwesomeIcon icon={faCalendar}/> Data da ultima atualização: {data}</li>  
                                  </ul> 
                                </div>
                              </div>
                            </Popup>
                        </Marker>
                      

                      
                      ))}  
                      </MarkerClusterGroup> 
              </Map>
          </Card> 
        </div>
    );
  }

BlogCard = (props) => {
  const {
    _id,
    authorName,
    lang,
    createdAt,
    title,
    authorProfileLink,
    cover,
    metaDescription,
  } = props.data;
  let isDescArabic = isArabic(metaDescription);

  const titleSlugify = (title) => {
    return title.toLowerCase().replace(/\s+/g, "-").replace(/&/g, "-and-");
  };
  return (
    <article className={`row mt-5`}>
      <section className="col-md-3 text-md-right text-left">
        <ul className="list-unstyled pt-5 d-flex flex-row-reverse d-md-block">
          <li className="px-md-0 px-3">
            <a
              href={authorProfileLink}
              rel="noreferrer noopener"
              target="_blank"
              className="profile-links"
            >
              {authorName} <FontAwesomeIcon icon={faUser} />
            </a>
          </li>
          <li className="px-md-0 px-3">
            {parseDate(createdAt)} <FontAwesomeIcon icon={faCalendarWeek} />
          </li>
        </ul>
      </section>
      <section className={`col-md-9 d-flex justify-content-right`}>
        <div
          className={`card border-0 ${lang === "Arabic" && "text-right"} ${
            styles["blog-card"]
          }`}
        >
          <Link to={`/blog/${_id}/${titleSlugify(`${title}`)}`}>
            <img
              src={cover}
              className={`${styles["blog-card__image"]} card-img-top `}
              alt={`${title}'s cover`}
            />
          </Link>
          <div className={`card-body ${styles["blog__info"]}`}>
            <h2>
              <Link to={`/blog/${_id}/${titleSlugify(`${title}`)}`}>
                {title}
              </Link>
            </h2>
            <p className={`${isDescArabic && "letter-spacing-none"} card-text`}>
              {metaDescription.split(" ").slice(0, 30).join(" ")}
            </p>
          </div>
        </div>
      </section>
    </article>
  );
}

render() {
        return (
            <Navbar color='dark' dark expand='lg'>
                <Link
                    to='/'
                    className='navbar-brand'
                    style={{ fontFamily: "Monoton", fontWeight: "100" }}>
                    <img
                        src={logo}
                        style={{ maxWidth: "40px" }}
                        className='mx-2'
                    />
                    BlogApp
                </Link>
                <NavbarToggler onClick={this.toggle} />{" "}
                <Collapse isOpen={this.state.isOpen} navbar>
                    {this.state.user ? (
                        <Nav className='ml-auto mr-2' navbar>
                            <NavItem className='navbar-item'>
                                <ButtonDropdown
                                    isOpen={this.state.isDropdownOpen}
                                    toggle={this.dropdownToggle}>
                                    <Button id='caret' color='primary'>
                                        <FontAwesomeIcon
                                            icon={faUser}
                                            className='mr-2'
                                        />
                                        {this.state.user.username}
                                    </Button>
                                    <DropdownToggle caret color='primary' />
                                    <DropdownMenu right>
                                        <Link
                                            to='/myblogs/'
                                            className='dropdown-item'>
                                            My Blogs
                                        </Link>

                                        <DropdownItem divider />
                                        <DropdownItem onClick={this.logout}>
                                            logout
                                            <FontAwesomeIcon
                                                icon={faSignOutAlt}
                                                className='ml-3'
                                            />
                                        </DropdownItem>
                                    </DropdownMenu>
                                </ButtonDropdown>
                            </NavItem>
                        </Nav>
                    ) : (
                        <Nav className='ml-auto' navbar>
                            <NavItem className='navbar-item'>
                                <Link className='nav-link' to='/login'>
                                    Login
                                </Link>
                            </NavItem>
                        </Nav>
                    )}
                </Collapse>
            </Navbar>
        );
    }

GithubRepo = ({ reponame, title, auth_token }) => {

  const [loading, setLoading] = useState(true)
  const [repo, setRepo] = useState(null)

  useEffect(() => {
    const repoFetchUrl = `https://api.github.com/repos/${reponame}?access_token=${auth_token}`
    setLoading(true)
    fetch(repoFetchUrl, { 
      method: 'GET', 
      headers: new Headers({
        'Authorization': auth_token, 
        'Content-Type': 'application/json'
    })})
    .then((res) => res.json()).then((data) => {
      setRepo(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }, [reponame, auth_token])

  return (
    <div className="github-repo-component">
      {title ? <div className="header-component">
        <h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title}</span></h2>
      </div> : null}
      {repo && !repo.message ?
      <Container>
        {loading && <p>Fetching the details</p>}
        {repo ? 
          <GithubCard name={repo.name} description={repo.description.substring(0, 300)} 
                      image={repo.organization.avatar_url}
                      username={repo.full_name} url={repo.html_url}
                      from={repo.created_at} /> 
        : null}
        <div style={{textAlign: "center"}}>
            {loading && <p>Fetching the details</p>}
            {repo ?
                <Row>   
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faAsterisk} /> Owner</p>
                      <p className="card-para">{repo.owner.login}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faCode} /> Languages</p>
                      <p className="card-para">{repo.language}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faCodeBranch} /> No. of Forks</p>
                      <p className="card-para">{repo.forks}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faHistory} /> Last Updated</p>
                      <p className="card-para">{moment(repo.upadted_at).format("MMMM Do YYYY")}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faExclamation} /> Open Issues</p>
                      <p className="card-para">{repo.open_issues_count} Issues Opened</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faUser} /> No. of Contributors</p>
                      <p className="card-para">{repo.subscribers_count}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faGithubAlt} /> default Branch</p>
                      <p className="card-para">{repo.default_branch}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faIdBadge} /> License</p>
                      <p className="card-para">{repo.license.name}</p>
                    </div> 
                  </Col>
                </Row> 
            : null}
        </div>
        
      </Container>    
      : <div style={{textAlign: "center"}}><h2>Repo Not Found, Please check the repo name or the Auth Token</h2></div>} 
    </div>
  )
}