How to use react-icons - 10 common examples

To help you get started, we’ve selected a few react-icons examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OpusCapita / react-grid / lib / cjs / datagrid / dropdown-controls.component.js View on Github external
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;
github reef-pi / reef-pi / front-end / src / fatal_error.jsx View on Github external
<div className='col' />
                <div className='col-12 col-md-8 col-lg-6'>
                  <div className='card text-white bg-danger mb-3'>
                    <div className='card-header'>{i18next.t('fatal_error:fatal_error')}</div>
                    <div className='card-body'>
                      <h5 className='card-title'>{i18next.t('fatal_error:connection_lost')}</h5>
                      <p className='card-text'>
                        {i18next.t('fatal_error:message')}
                      </p>
                      <p className='card-text'>
                        <a
                          target='_blank' rel='noopener noreferrer'
                          href='http://reef-pi.com/additional-documentation/troubleshooting/'
                          className='btn btn-primary mr-2'
                        >
                          {FaMedkit()} {i18next.t('fatal_error:troubleshoot')}
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
                <div className='col' />
              </div>
            </div>
          </div>
        </div>
      )
    }
  }
}
github reef-pi / reef-pi / front-end / src / ui_components / collapsible.jsx View on Github external
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')}
            </button>
            {readOnly ? toggleStateButton : null}
            {readOnly ? editButton : null}
            {this.props.buttons}
          </div>
          <div
            className={classNames('collapsible-title col-12 col-sm-6 col-md-8 col-lg-9 order-sm-first form-inline', {
              pointer: readOnly
            })} onClick={() => onToggle(name)}
          >
            {expanded ? FaAngleUp() : FaAngleDown()}
            {this.props.title}
          </div>
        </div>
        {expanded
          ? cloneElement(children, {
            readOnly: readOnly,
            onSubmit: handleSubmit
          })
          : null}
      </li>
    )
  }
}
github reef-pi / reef-pi / jsx / ui_components / collapsible.jsx View on Github external
})}>
          <div className='col-12 col-sm-6 col-md-4 col-lg-3 order-sm-2 order-md-last'>
            <button type='button'
              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')}
            </button>
            {readOnly ? toggleStateButton : null}
            {readOnly ? editButton : null}
            {this.props.buttons}
          </div>
          <div className={classNames('collapsible-title col-12 col-sm-6 col-md-8 col-lg-9 order-sm-first form-inline', {
            'pointer': readOnly
          })} onClick={() => onToggle(name)}>
            {expanded ? FaAngleUp() : FaAngleDown()}
            {this.props.title}
          </div>
        </div>
        {expanded
          ? cloneElement(children, {
            readOnly: readOnly,
            onSubmit: handleSubmit
          })
          : null}
      </li>
    )
  }
}
github reef-pi / reef-pi / front-end / src / temperature / sensor.jsx View on Github external
className='row mb-1 cursor-pointer text-center text-md-left'
          id={'expand-tc-' + this.props.data.id}
          onClick={this.handleExpand}
        >
          <div className='col-12 col-sm-6 col-md-4 col-lg-3 order-sm-2 order-md-last'>
            <button
              type='button'
              onClick={this.handleDelete}
              className='btn btn-sm btn-outline-danger float-right d-block d-sm-inline ml-2'
            >
              Delete
            </button>
            {editButton}
          </div>
          <div className='pointer col-12 col-sm-6 col-md-8 col-lg-9 order-sm-first form-inline'>
            {this.state.expand ? FaAngleUp() : FaAngleDown()}
            <b className='ml-2 align-middle'>{this.props.data.name}</b>
          </div>
        </div>
        {details}
      </div>
    )
  }
}
github reef-pi / reef-pi / front-end / src / ato / ato.jsx View on Github external
className='row mb-1 cursor-pointer text-center text-md-left'
          id={'expand-ato-' + this.props.data.id}
          onClick={this.handleExpand}
        >
          <div className='col-12 col-sm-6 col-md-4 col-lg-3 order-sm-2 order-md-last'>
            <button
              type='button'
              onClick={this.handleDelete}
              className='btn btn-sm btn-outline-danger float-right d-block d-sm-inline ml-2'
            >
              {i18next.t('delete')}
            </button>
            {editButton}
          </div>
          <div className='pointer col-12 col-sm-6 col-md-8 col-lg-9 order-sm-first form-inline'>
            {this.state.expand ? FaAngleUp() : FaAngleDown()}
            <b className='ml-2 align-middle'>{this.props.data.name}</b>
          </div>
        </div>
        {details}
      </div>
    )
  }
}
github cvdlab / react-planner / lib / components / sidebar / panel-guides.js View on Github external
'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(
github cvdlab / react-planner / lib / components / sidebar / panel-guides.js View on Github external
'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(
github cvdlab / react-planner / lib / components / sidebar / panel-groups.js View on Github external
})
                ),
                _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')
                )
github cvdlab / react-planner / lib / components / sidebar / panel-layers.js View on Github external
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',