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

The following examples show how to use @fortawesome/free-solid-svg-icons#faAngleDown. 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: Tables.js    From volt-react-dashboard with MIT License 6 votes vote down vote up 
ValueChange = ({ value, suffix }) => {
  const valueIcon = value < 0 ? faAngleDown : faAngleUp;
  const valueTxtColor = value < 0 ? "text-danger" : "text-success";

  return (
    value ? <span className={valueTxtColor}>
      <FontAwesomeIcon icon={valueIcon} />
      <span className="fw-bold ms-1">
        {Math.abs(value)}{suffix}
      </span>
    </span> : "--"
  );
}
Example #2
Source File: Widgets.js    From volt-react-dashboard with MIT License 6 votes vote down vote up 
CounterWidget = (props) => {
  const { icon, iconColor, category, title, period, percentage } = props;
  const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
  const percentageColor = percentage < 0 ? "text-danger" : "text-success";

  return (
    <Card border="light" className="shadow-sm">
      <Card.Body>
        <Row className="d-block d-xl-flex align-items-center">
          <Col xl={5} className="text-xl-center d-flex align-items-center justify-content-xl-center mb-3 mb-xl-0">
            <div className={`icon icon-shape icon-md icon-${iconColor} rounded me-4 me-sm-0`}>
              <FontAwesomeIcon icon={icon} />
            </div>
            <div className="d-sm-none">
              <h5>{category}</h5>
              <h3 className="mb-1">{title}</h3>
            </div>
          </Col>
          <Col xs={12} xl={7} className="px-xl-0">
            <div className="d-none d-sm-block">
              <h5>{category}</h5>
              <h3 className="mb-1">{title}</h3>
            </div>
            <small>{period}, <FontAwesomeIcon icon={faGlobeEurope} size="xs" /> WorldWide</small>
            <div className="small mt-2">
              <FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
              <span className={`${percentageColor} fw-bold`}>
                {percentage}%
              </span> Since last month
            </div>
          </Col>
        </Row>
      </Card.Body>
    </Card>
  );
}
Example #3
Source File: Widgets.js    From volt-react-dashboard with MIT License 6 votes vote down vote up 
BarChartWidget = (props) => {
  const { title, value, percentage, data = [] } = props;
  const labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const series = data.map(d => d.value);
  const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
  const percentageColor = percentage < 0 ? "text-danger" : "text-success";

  return (
    <Card border="light" className="shadow-sm">
      <Card.Body className="d-flex flex-row align-items-center flex-0 border-bottom">
        <div className="d-block">
          <h6 className="fw-normal text-gray mb-2">{title}</h6>
          <h3>{value}</h3>
          <small className="mt-2">
            <FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
            <span className={`${percentageColor} fw-bold`}>
              {percentage}%
            </span>
          </small>
        </div>
        <div className="d-block ms-auto">
          {data.map(d => (
            <div key={`bar-element-${d.id}`} className="d-flex align-items-center text-end mb-2">
              <span className={`shape-xs rounded-circle bg-${d.color} me-2`} />
              <small className="fw-normal">{d.label}</small>
            </div>
          ))}
        </div>
      </Card.Body>
      <Card.Body className="p-2">
        <BarChart labels={labels} series={series} />
      </Card.Body>
    </Card>
  );
}
Example #4
Source File: Widgets.js    From volt-react-dashboard with MIT License 6 votes vote down vote up 
SalesValueWidget = (props) => {
  const { title, value, percentage } = props;
  const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
  const percentageColor = percentage < 0 ? "text-danger" : "text-success";

  return (
    <Card className="bg-secondary-alt shadow-sm">
      <Card.Header className="d-flex flex-row align-items-center flex-0">
        <div className="d-block">
          <h5 className="fw-normal mb-2">
            {title}
          </h5>
          <h3>${value}</h3>
          <small className="fw-bold mt-2">
            <span className="me-2">Yesterday</span>
            <FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
            <span className={percentageColor}>
              {percentage}%
            </span>
          </small>
        </div>
        <div className="d-flex ms-auto">
          <Button variant="secondary" size="sm" className="me-2">Month</Button>
          <Button variant="primary" size="sm" className="me-3">Week</Button>
        </div>
      </Card.Header>
      <Card.Body className="p-2">
        <SalesValueChart />
      </Card.Body>
    </Card>
  );
}
Example #5
Source File: Widgets.js    From volt-react-dashboard with MIT License 6 votes vote down vote up 
SalesValueWidgetPhone = (props) => {
  const { title, value, percentage } = props;
  const percentageIcon = percentage < 0 ? faAngleDown : faAngleUp;
  const percentageColor = percentage < 0 ? "text-danger" : "text-success";

  return (
    <Card className="bg-secondary-alt shadow-sm">
      <Card.Header className="d-md-flex flex-row align-items-center flex-0">
        <div className="d-block mb-3 mb-md-0">
          <h5 className="fw-normal mb-2">
            {title}
          </h5>
          <h3>${value}</h3>
          <small className="fw-bold mt-2">
            <span className="me-2">Yesterday</span>
            <FontAwesomeIcon icon={percentageIcon} className={`${percentageColor} me-1`} />
            <span className={percentageColor}>
              {percentage}%
            </span>
          </small>
        </div>
        <div className="d-flex ms-auto">
          <Button variant="secondary" size="sm" className="me-2">Month</Button>
          <Button variant="primary" size="sm" className="me-3">Week</Button>
        </div>
      </Card.Header>
      <Card.Body className="p-2">
        <SalesValueChartphone />
      </Card.Body>
    </Card>
  );
}
Example #6
Source File: App.js    From lrc-staking-dapp with MIT License 6 votes vote down vote up 
library.add(
  far,
  fas,
  faBookReader,
  faArrowLeft,
  faArrowRight,
  faQuestionCircle,
  faCopy,
  faSignOutAlt,
  faEdit,
  faAngleDown,
  faExternalLinkAlt,
  fab,
  faEthereum,
  faTwitter,
  faDiscord,
  faUnlink,
  faSearch,
  faFortAwesome,
  faExchangeAlt,
  faChartPie,
  faGlobe,
  faDonate,
  faDollarSign,
);
Example #7
Source File: projectlistdropdown.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up 
ProjectListDropDown = ({ iconColor, children }) => {
  const IconColor = iconColor ? iconColor : "#084892";
  // const dispatch = useDispatch();
  return (
    <div className="curriki-utility-list-dropdown">
      <Dropdown className="listproject-dropdown check ">
        <Dropdown.Toggle className="project-dropdown-btn-list">
          <span>
            2 projects
            <FontAwesomeIcon
              icon={faAngleDown}
              style={{ marginLeft: "11px" }}
              color="#084892"
            />
          </span>
          {/* <button style={{ width: "108px", height: "32px" }}>
            <FontAwesomeIcon
              icon={faFolderOpen}
              style={{ marginRight: "12px" }}
              color="#084892"
            />
            2 projects
          </button> */}
        </Dropdown.Toggle>

        <Dropdown.Menu className="project-menu-list">
          <div className="projectlist-title">
            <p>This activity is shared in the following projects:</p>
          </div>

          <Dropdown.Item>
            <div className="list-project">
              <button>Design, Art & History</button>
            </div>
          </Dropdown.Item>
          <Dropdown.Item>
            <div className="list-project">
              <button>Project name #2</button>
            </div>
          </Dropdown.Item>
          <Dropdown.Item>
            <div className="list-project">
              <button>Project name #</button>
            </div>
          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}
Example #8
Source File: Archive.js    From Todo-List with MIT License 5 votes vote down vote up 
function CustomToggle1({ children, eventKey }) {
    return (
        <FontAwesomeIcon icon={faAngleDown} onClick={useAccordionToggle(eventKey)}></FontAwesomeIcon>
    );
}
Example #9
Source File: icon.js    From uptime-kuma with MIT License 5 votes vote down vote up 
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,
);