How to use @fortawesome/react-fontawesome - 10 common examples

var Asterisk = function Asterisk(_ref) {
  var size = _ref.size,
      message = _ref.message;
  return _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: "asterisk",
    title: message || 'Validation Error',
    className: "has-text-danger",
    size: size || '1x'
  });
};

var ValidationFieldError = function ValidationFieldError(_ref) {
  var id = _ref.id;
  return _react["default"].createElement("span", {
    className: "has-text-danger"
  }, _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: "exclamation-triangle"
  }), "\xA0There was an error rendering field: \"", id, "\"", _react["default"].createElement(_FormControlHint["default"], {
    text: "Check console for additional details.",
    className: "is-danger"
  }));
};

var ValidationAPIError = function ValidationAPIError(_ref) {
  var error = _ref.error;
  var message = parseAPICheckErrorMessage(error);
  return _react["default"].createElement("div", {
    className: "__rjfe__ panel"
  }, _react["default"].createElement("div", {
    className: "panel-heading"
  }, _react["default"].createElement("div", {
    className: "validation-api-error"
  }, _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: "exclamation-triangle",
    className: "has-text-danger"
  }), "\xA0", _react["default"].createElement("h3", null, message || 'Error initializing FormEngine'))));
};

var FormControlHint = function FormControlHint(_ref) {
  var text = _ref.text,
      icon = _ref.icon,
      className = _ref.className;
  var derivedClassName = className || 'has-text-grey-light';
  return _react["default"].createElement("div", {
    className: "help ".concat(derivedClassName, " form-control-hint")
  }, _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: icon || 'question-circle'
  }), "\xA0", text);
};

value: function getSubsection(subsection, hideSubsectionSubtitles) {
      if (!subsection.subtitle || hideSubsectionSubtitles) return null;
      return _react.default.createElement("h2", {
        className: "subtitle",
        style: styles.subtitle
      }, _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
        icon: "angle-right"
      }), " ", subsection.subtitle);
    }
  }, {

var ValidationFieldError = function ValidationFieldError(_ref) {
  var id = _ref.id;
  return _react.default.createElement("span", {
    className: "has-text-danger"
  }, _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: "exclamation-triangle"
  }), "\xA0There was an error rendering field: \"", id, "\"", _react.default.createElement(_FormControlHint.default, {
    text: "Check console for additional details.",
    className: "is-danger"
  }));
};

var FormControlHint = function FormControlHint(_ref) {
  var text = _ref.text,
      icon = _ref.icon,
      className = _ref.className;
  var derivedClassName = className || 'has-text-grey-light';
  return _react.default.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center'
    },
    className: "help ".concat(derivedClassName)
  }, _react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: icon || 'question-circle'
  }), "\xA0", text);
};

value: function renderFormIcon(instance) {
      if (instance.getFormIcon()) {
        return _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
          icon: [instance.getFormIconPrefix(), instance.getFormIcon()],
          className: "m-r-sm"
        });
      }
    }
  }, {

function renderOption(field, value, option, index, onUpdate) {
  var isEven = index % 2 === 0;
  return _react["default"].createElement("div", {
    key: index,
    className: "radio-option-container ".concat(index === 0 ? '' : field.inline ? 'm-l-sm' : ''),
    onClick: function onClick() {
      return onUpdate(option.id || isEven, field.id);
    }
  }, _react["default"].createElement("div", {
    className: "radio-option-label"
  }, _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: ['far', getIcon(option, value, isEven)]
  }), "\xA0", _react["default"].createElement("div", null, option.title)), _react["default"].createElement(_FormChildren["default"], {
    field: option
  }));
}

value: function getSubsection(subsection, hideSubsectionSubtitles) {
      if (!subsection[SUBTITLE] || hideSubsectionSubtitles) return null;
      return _react["default"].createElement("h2", {
        className: "subtitle is-size-7 m-t-xs"
      }, _react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
        icon: "angle-right"
      }), " ", subsection[SUBTITLE]);
    }
  }, {