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

render() {
    const {tokenData} = this.props;

    const {showTransaferSelect, selectedTransferToken, selectedReceiveToken, showReceiveSelect,
      transferAmount, receiveAmount, totalFee, pathMeta, transactionFee, widgetError
    } = this.state;

    let transferFromTokenSelect = <span/>;
    let receiveToTokenSelect = <span/>;

    if (showTransaferSelect) {
        transferFromTokenSelect =
        (<div className="token-select-dropdown">
          <TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.transferSelectChanged}/>
        </div>
        )
    }
    if (showReceiveSelect) {
      receiveToTokenSelect = (
        <div className="token-select-dropdown">
          <TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.receiveSelectChanged}/>
        </div>
        )
    }


    if (tokenData.length === 0 ||  selectedTransferToken === undefined ||  selectedReceiveToken === undefined) {
      return (
      <div className="swap-token--loading-container">
      <div className="spinner-icon">
              <FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
      </div>
      </div>);
    }

    let pathMetaData = <span/>;
    if (pathMeta && pathMeta.length > 0) {
      pathMetaData = pathMeta.map(function(item, idx){
        let pointerArrow = <span/>;

        if (idx < pathMeta.length - 1) {
          pointerArrow =
          <div className="arrow-right-container">
            <FontAwesomeIcon icon={faArrowRight} />
          </div>
        }
        return (
        <div className="meta-item-cell-container" key={idx}>
          <div className="meta-item-cell">
            <div className="token-label-cell">{item.meta.symbol}</div>
            <div className="token-name-cell">{item.meta.name}</div>
          </div>
          {pointerArrow}
        </div>)
      })
    }
    let errorData = <span/>;
    if (widgetError && widgetError.length > 0) {
      errorData = <div className="error">{widgetError}</div>
    }
    return (
      <div className="swap-token-container">
        <div className="card">
          <div className="text">
          <Row>
          <Col lg={5}>
              <div className="h4 token-transfer-label">Transfer </div>
            <div className="token-label-amount-container">
               <Row>
               <Col lg={4} className="token-label-select-col">
               <div className="token-label-container" onClick={this.openTransferSelectDropdown}>
                 <img src={selectedTransferToken.imageURI} className="token-preview-image"/>
                 <div className="token-preview-text">{selectedTransferToken.symbol}</div>
                 <FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
               </div>
               {transferFromTokenSelect}
               </Col>
               <Col lg={8} className="token-amount-col">
                <Form.Control size="sm" type="number" placeholder="Amount" onChange={this.transferAmountChanged} value={transferAmount}/>
               </Col>
               </Row>
              </div>
            </Col>
          <Col lg={2}>
          <div className="token-transfer-arrow-container">
          <div>
          <FontAwesomeIcon icon={faArrowLeft} className="arrow-container"/>
          </div>
          <div className="bottom-arrow-container arrow-container">
          <FontAwesomeIcon icon={faArrowRight}/>
         </div>
          </div>
          </Col>
          <Col lg={5}>
            <div className="h4 token-transfer-label">Receive</div>
            <div className="token-label-amount-container">
               <Row>
                   <Col lg={4} className="token-label-select-col">
                   <div className="token-label-container" onClick={this.openReceiveSelectDropdown}>
                     <img src={selectedReceiveToken.imageURI} className="token-preview-image"/>
                     <div className="token-preview-text">{selectedReceiveToken.symbol}</div>
                     <FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
                   </div>
                   {receiveToTokenSelect}
                   </Col>
                   <Col lg={8} className="token-amount-col">
                    <Form.Control size="sm" type="text" placeholder="Amount" value={receiveAmount}
                      onChange={this.receiveAmountChanged}/>
                   </Col>
               </Row>
              </div>
           </Col>
           </Row>
           <Row className="swap-action-btn-container">
           <Col lg={8}>
            {errorData}

           </Col>
           <Col lg={3}>
            Total Fees: {transactionFee} {selectedReceiveToken.symbol}
            </Col>
            <Col lg={1}>
            <Button onClick={this.submitSwapTransaction}>Swap</Button>
            </Col>
           </Row>
           <Row>
            <Col lg={12} className="network-path-label">
              Network path :
            </Col>
            <Col lg={12} className="network-path-data">
              {pathMetaData}
            </Col>
           </Row>
          </div>
        </div>
  </div>

      )
  }