How to use react-icons - 10 common examples

var data = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  margin: ", ";\n  padding: ", ";\n  transform: rotate(", ");\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }

var TOGGLE_ON_COLOR = '#3AA57B';
var TOGGLE_OFF_COLOR = '#67707C';
var TOGGLE_SIZE = 20; // ToggleIconComponent

var Toggle = (0, _styledComponents["default"])(_fa.FaToggleOn)(_templateObject(), function (props) {
  return props.color;
}, function (props) {
  return props.margin || 0;
}, function (props) {
  return props.padding || 0;
}, function (props) {
  return props.rotate ? props.rotate + "deg" : '';
});

var DropdownControls =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(DropdownControls, _React$PureComponent);

  function DropdownControls() {
    var _this;

<div>
                <div>
                  <div>
                    <div>{i18next.t('fatal_error:fatal_error')}</div>
                    <div>
                      <h5>{i18next.t('fatal_error:connection_lost')}</h5>
                      <p>
                        {i18next.t('fatal_error:message')}
                      </p>
                      <p>
                        <a href="http://reef-pi.com/additional-documentation/troubleshooting/" rel="noopener noreferrer">
                          {FaMedkit()} {i18next.t('fatal_error:troubleshoot')}
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
                <div>
              </div>
            </div>
          
        
      )
    }
  }
}

onClick={this.handleDelete}
              id={'delete-' + name}
              className='btn btn-sm btn-outline-danger float-right d-block d-sm-inline ml-2'
            >
              {i18next.t('collapsible:delete')}
            
            {readOnly ? toggleStateButton : null}
            {readOnly ? editButton : null}
            {this.props.buttons}
          
          <div readonly=""> onToggle(name)}
          &gt;
            {expanded ? FaAngleUp() : FaAngleDown()}
            {this.props.title}
          </div>
        
        {expanded
          ? cloneElement(children, {
            readOnly: readOnly,
            onSubmit: handleSubmit
          })
          : null}
      
    )
  }
}

})}>
          <div>
            <button id="{'delete-'" type="button">
              {i18next.t('collapsible:delete')}
            </button>
            {readOnly ? toggleStateButton : null}
            {readOnly ? editButton : null}
            {this.props.buttons}
          </div>
          <div readonly=""> onToggle(name)}&gt;
            {expanded ? FaAngleUp() : FaAngleDown()}
            {this.props.title}
          </div>
        
        {expanded
          ? cloneElement(children, {
            readOnly: readOnly,
            onSubmit: handleSubmit
          })
          : null}
      
    )
  }
}

className='row mb-1 cursor-pointer text-center text-md-left'
          id={'expand-tc-' + this.props.data.id}
          onClick={this.handleExpand}
        >
          <div>
            <button type="button">
              Delete
            </button>
            {editButton}
          </div>
          <div>
            {this.state.expand ? FaAngleUp() : FaAngleDown()}
            <b>{this.props.data.name}</b>
          </div>
        
        {details}
      
    )
  }
}

className='row mb-1 cursor-pointer text-center text-md-left'
          id={'expand-ato-' + this.props.data.id}
          onClick={this.handleExpand}
        >
          <div>
            <button type="button">
              {i18next.t('delete')}
            </button>
            {editButton}
          </div>
          <div>
            {this.state.expand ? FaAngleUp() : FaAngleDown()}
            <b>{this.props.data.name}</b>
          </div>
        
        {details}
      
    )
  }
}

'tr',
                    { key: hgKey },
                    _react2.default.createElement(
                      'td',
                      { style: { width: '2em' } },
                      ind + 1
                    ),
                    _react2.default.createElement(
                      'td',
                      null,
                      hgVal
                    ),
                    _react2.default.createElement(
                      'td',
                      { style: { width: '5em' } },
                      _react2.default.createElement(_fa.FaTrash, {
                        style: iconStyle,
                        onClick: function onClick(e) {
                          return projectActions.removeHorizontalGuide(hgKey);
                        }
                      })
                    )
                  );
                }),
                this.state.addHGVisible ? _react2.default.createElement(

'tr',
                    { key: hgKey },
                    _react2.default.createElement(
                      'td',
                      { style: { width: '2em' } },
                      ind + 1
                    ),
                    _react2.default.createElement(
                      'td',
                      null,
                      hgVal
                    ),
                    _react2.default.createElement(
                      'td',
                      { style: { width: '5em' } },
                      _react2.default.createElement(_fa.FaTrash, {
                        style: iconStyle,
                        onClick: function onClick(e) {
                          return projectActions.removeVerticalGuide(hgKey);
                        }
                      })
                    )
                  );
                }),
                this.state.addVGVisible ? _react2.default.createElement(

})
                ),
                _react2.default.createElement(
                  'td',
                  { style: iconColStyle, title: _this2.context.translator.t('Un-chain all Group\'s Elements and remove Group') },
                  _react2.default.createElement(_fa.FaUnlink, {
                    onClick: function onClick(e) {
                      return _this2.context.groupsActions.removeGroup(groupID);
                    },
                    style: !shouldHighlight ? styleEditButton : styleEditButtonHover
                  })
                ),
                _react2.default.createElement(
                  'td',
                  { style: iconColStyle, title: _this2.context.translator.t('Delete group and all Elements') },
                  _react2.default.createElement(_fa.FaTrash, {
                    onClick: function onClick(e) {
                      return _this2.context.groupsActions.removeGroupAndDeleteElements(groupID);
                    },
                    style: !shouldHighlight ? styleEditButton : styleEditButtonHover
                  })
                ),
                _react2.default.createElement(
                  'td',
                  { onClick: selectClick, style: { width: '0em', textAlign: 'center' } },
                  dimension
                ),
                _react2.default.createElement(
                  'td',
                  { onClick: selectClick },
                  group.get('name')
                )

style: !layer.visible ? styleEyeHidden : styleEyeVisible
                  }) : null
                ),
                _react2.default.createElement(
                  'td',
                  { style: iconColStyle },
                  _react2.default.createElement(_fa.FaPencilAlt, {
                    onClick: configureClick,
                    style: !isCurrentLayer ? styleEditButton : styleEditButtonHover,
                    title: _this2.context.translator.t('Configure layer')
                  })
                ),
                _react2.default.createElement(
                  'td',
                  { style: iconColStyle },
                  !isLastLayer ? _react2.default.createElement(_fa.FaTrash, {
                    onClick: function onClick(e) {
                      return _this2.delLayer(e, layerID);
                    },
                    style: !isCurrentLayer ? styleEditButton : styleEditButtonHover,
                    title: _this2.context.translator.t('Delete layer')
                  }) : null
                ),
                _react2.default.createElement(
                  'td',
                  { style: { width: '6em', textAlign: 'center' } },
                  '[ h : ',
                  layer.altitude,
                  ' ]'
                ),
                _react2.default.createElement(
                  'td',