react-survey-builder 1.0.2 → 1.0.4

package/lib/dynamic-option-list.js

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _UUID = _interopRequireDefault(require("./UUID"));
 var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
+var _fa = require("react-icons/fa");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
   * <DynamicOptionList />
@@ -173,14 +174,10 @@ var DynamicOptionList = exports["default"] = /*#__PURE__*/function (_React$Compo
         }, /*#__PURE__*/_react["default"].createElement("button", {
           onClick: _this2.addOption.bind(_this2, index),
           className: "btn btn-success"
-        }, /*#__PURE__*/_react["default"].createElement("i", {
-          className: "fas fa-plus-circle"
-        })), index > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+        }, /*#__PURE__*/_react["default"].createElement(_fa.FaPlusCircle, null)), index > 0 && /*#__PURE__*/_react["default"].createElement("button", {
           onClick: _this2.removeOption.bind(_this2, index),
           className: "btn btn-danger"
-        }, /*#__PURE__*/_react["default"].createElement("i", {
-          className: "fas fa-minus-circle"
-        }))))));
+        }, /*#__PURE__*/_react["default"].createElement(_fa.FaMinusCircle, null))))));
       })));
     }
   }]);

package/lib/multi-column/grip.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactDnd = require("react-dnd");
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var _fa = require("react-icons/fa");
 var style = {
   // display: 'inline-block',
   // border: '1px dashed gray',
@@ -40,8 +41,8 @@ var Grip = function Grip(_ref) {
   return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
     className: "btn is-isolated",
     style: style
-  }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: "is-isolated fas fa-grip-vertical"
+  }, /*#__PURE__*/_react["default"].createElement(_fa.FaGripVertical, {
+    className: "is-isolated"
   })));
 };
 var _default = exports["default"] = (0, _reactDnd.DragSource)(_ItemTypes["default"].BOX, gripSource, function (connect) {

package/lib/survey-elements/component-drag-handle.js

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactDnd = require("react-dnd");
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
+var _fa = require("react-icons/fa");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -74,8 +75,8 @@ var DragHandle = /*#__PURE__*/function (_PureComponent) {
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn is-isolated",
         style: style
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "is-isolated fas fa-grip-vertical"
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaGripVertical, {
+        className: "is-isolated"
       })));
     }
   }]);

package/lib/survey-elements/header-bar.js

@@ -12,6 +12,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
 var _componentDragHandle = _interopRequireDefault(require("./component-drag-handle"));
+var _fa = require("react-icons/fa");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
   * <HeaderBar />
@@ -29,19 +30,19 @@ var HeaderBar = exports["default"] = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "toolbar-header"
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: "badge badge-secondary"
+        className: "badge bg-secondary"
       }, this.props.data.text), /*#__PURE__*/_react["default"].createElement("div", {
         className: "toolbar-header-buttons"
       }, this.props.data.element !== 'LineBreak' && /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn is-isolated",
         onClick: this.props.editModeOn.bind(this.props.parent, this.props.data)
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "is-isolated fas fa-edit"
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaEdit, {
+        className: "is-isolated"
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn is-isolated",
         onClick: this.props.onDestroy.bind(this, this.props.data)
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "is-isolated fas fa-trash"
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTrash, {
+        className: "is-isolated"
       })), /*#__PURE__*/_react["default"].createElement(_componentDragHandle["default"], {
         data: this.props.data,
         index: this.props.index,

package/lib/survey-elements/index.js

@@ -190,7 +190,7 @@ var TextInput = /*#__PURE__*/function (_React$Component5) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -229,7 +229,7 @@ var EmailInput = /*#__PURE__*/function (_React$Component6) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -268,7 +268,7 @@ var PhoneNumber = /*#__PURE__*/function (_React$Component7) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -307,7 +307,7 @@ var NumberInput = /*#__PURE__*/function (_React$Component8) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("input", props)));
     }
   }]);
@@ -345,7 +345,7 @@ var TextArea = /*#__PURE__*/function (_React$Component9) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("textarea", props)));
     }
   }]);
@@ -382,7 +382,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component10) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement("select", props, this.props.data.options.map(function (option) {
         var this_key = "preview_".concat(option.key);
         return /*#__PURE__*/_react["default"].createElement("option", {
@@ -448,7 +448,7 @@ var Signature = /*#__PURE__*/function (_React$Component11) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true || !!sourceDataURL ? /*#__PURE__*/_react["default"].createElement("img", {
         src: sourceDataURL
       }) : /*#__PURE__*/_react["default"].createElement(_reactSignatureCanvas["default"], pad_props), canClear && /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
@@ -527,7 +527,7 @@ var Tags = /*#__PURE__*/function (_React$Component12) {
         style: _objectSpread({}, this.props.style),
         className: baseClasses
       }, /*#__PURE__*/_react["default"].createElement(_componentHeader["default"], this.props), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "form-floating"
+        className: "form-group"
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], props)));
     }
   }]);
@@ -924,9 +924,7 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
         className: "image-upload-control"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn btn-default"
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-camera"
-      }), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaCamera, null), " Upload Photo"), /*#__PURE__*/_react["default"].createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
         onLoad: function onLoad() {
           return URL.revokeObjectURL(_this16.state.previewImg);
         },
@@ -936,9 +934,7 @@ var Camera = /*#__PURE__*/function (_React$Component20) {
       }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn btn-image-clear",
         onClick: this.clearImage
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-times"
-      }), " Clear Photo")))));
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear Photo")))));
     }
   }]);
   return Camera;
@@ -1035,9 +1031,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
       }, /*#__PURE__*/_react["default"].createElement(_componentLabel["default"], this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
         className: "btn btn-default",
         onClick: this.saveFile
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-download"
-      }), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaDownload, null), " Download File")) : /*#__PURE__*/_react["default"].createElement("div", {
         className: "image-upload-container"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: fileInputStyle
@@ -1051,9 +1045,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
         className: "image-upload-control"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn btn-default"
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-file"
-      }), " Upload File"), /*#__PURE__*/_react["default"].createElement("p", null, "Select a file from your computer or device."))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaFile, null), " Upload File"), /*#__PURE__*/_react["default"].createElement("p", null, "Select a file from your computer or device."))), this.state.fileUpload && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "file-upload-preview"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         style: {
@@ -1068,9 +1060,7 @@ var FileUpload = /*#__PURE__*/function (_React$Component21) {
       }, this.state.fileUpload.size.length > 6 ? "Size:  ".concat(Math.ceil(this.state.fileUpload.size / (1024 * 1024)), " mb") : "Size:  ".concat(Math.ceil(this.state.fileUpload.size / 1024), " kb"))), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
         className: "btn btn-file-upload-clear",
         onClick: this.clearFileUpload
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-times"
-      }), " Clear File")))));
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, null), " Clear File")))));
     }
   }]);
   return FileUpload;

package/lib/survey-elements-edit.js

@@ -19,6 +19,7 @@ var _dynamicOptionList = _interopRequireDefault(require("./dynamic-option-list")
 var _requests = require("./stores/requests");
 var _UUID = _interopRequireDefault(require("./UUID"));
 var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
+var _fa = require("react-icons/fa");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var toolbar = {
@@ -170,8 +171,8 @@ var SurveyElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Comp
         className: "clearfix"
       }, /*#__PURE__*/_react["default"].createElement("h4", {
         className: "float-start"
-      }, this.props.element.text), /*#__PURE__*/_react["default"].createElement("i", {
-        className: "float-end fas fa-times dismiss-edit",
+      }, this.props.element.text), /*#__PURE__*/_react["default"].createElement(_fa.FaTimes, {
+        className: "float-end dismiss-edit",
         onClick: this.props.manualEditModeOff
       })), this.props.element.hasOwnProperty('content') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "form-group"

package/lib/survey-validator.js

@@ -13,6 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _xss = _interopRequireDefault(require("xss"));
 var _IntlMessages = _interopRequireDefault(require("./language-provider/IntlMessages"));
+var _fa = require("react-icons/fa");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
   * <SurveyValidator />
@@ -85,8 +86,8 @@ var SurveyValidator = exports["default"] = /*#__PURE__*/function (_React$Compone
         className: "alert alert-danger validation-error"
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "clearfix"
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: "fas fa-exclamation-triangle float-start"
+      }, /*#__PURE__*/_react["default"].createElement(_fa.FaExclamationTriangle, {
+        className: "float-start"
       }), /*#__PURE__*/_react["default"].createElement("ul", {
         className: "float-start"
       }, errors)), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/toolbar-draggable-item.js

@@ -42,12 +42,11 @@ var ToolbarItem = /*#__PURE__*/function (_React$Component) {
         connectDragSource = _this$props.connectDragSource,
         data = _this$props.data,
         onClick = _this$props.onClick;
+      var IconComponent = data.icon;
       if (!connectDragSource) return null;
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("li", {
         onClick: onClick
-      }, /*#__PURE__*/_react["default"].createElement("i", {
-        className: data.icon
-      }), data.name));
+      }, /*#__PURE__*/_react["default"].createElement(IconComponent, null), data.name));
     }
   }]);
   return ToolbarItem;

package/lib/toolbar.js

@@ -19,6 +19,7 @@ var _toolbarGroupItem = _interopRequireDefault(require("./toolbar-group-item"));
 var _UUID = _interopRequireDefault(require("./UUID"));
 var _store = _interopRequireDefault(require("./stores/store"));
 var _functions = require("./functions");
+var _fa = require("react-icons/fa");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -115,7 +116,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'header-text'
         }),
-        icon: 'fas fa-heading',
+        icon: _fa.FaHeading,
         "static": true,
         content: intl.formatMessage({
           id: 'place-holder-text'
@@ -126,7 +127,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'label'
         }),
         "static": true,
-        icon: 'fas fa-font',
+        icon: _fa.FaFont,
         content: intl.formatMessage({
           id: 'place-holder-text'
         })
@@ -136,7 +137,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'paragraph'
         }),
         "static": true,
-        icon: 'fas fa-paragraph',
+        icon: _fa.FaParagraph,
         content: intl.formatMessage({
           id: 'place-holder-text'
         })
@@ -146,14 +147,14 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'line-break'
         }),
         "static": true,
-        icon: 'fas fa-arrows-alt-h'
+        icon: _fa.FaArrowsAltH
       }, {
         key: 'Dropdown',
         canHaveAnswer: true,
         name: intl.formatMessage({
           id: 'dropdown'
         }),
-        icon: 'far fa-caret-square-down',
+        icon: _fa.FaCaretSquareDown,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -165,7 +166,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'tags'
         }),
-        icon: 'fas fa-tags',
+        icon: _fa.FaTags,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -177,7 +178,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'checkboxes'
         }),
-        icon: 'far fa-check-square',
+        icon: _fa.FaCheckSquare,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -189,7 +190,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'checkbox'
         }),
-        icon: 'far fa-check-square',
+        icon: _fa.FaCheckSquare,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -201,7 +202,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'multiple-choice'
         }),
-        icon: 'far fa-dot-circle',
+        icon: _fa.FaRegDotCircle,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -216,7 +217,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        icon: 'fas fa-font',
+        icon: _fa.FaFont,
         field_name: 'text_input_'
       }, {
         key: 'EmailInput',
@@ -227,7 +228,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-email'
         }),
-        icon: 'fas fa-envelope',
+        icon: _fa.FaEnvelope,
         field_name: 'email_input_',
         placeholder: ''
       }, {
@@ -239,7 +240,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        icon: 'fas fa-plus',
+        icon: _fa.FaPlus,
         field_name: 'number_input_'
       }, {
         key: 'PhoneNumber',
@@ -250,7 +251,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-phone-number'
         }),
-        icon: 'fas fa-phone',
+        icon: _fa.FaPhone,
         field_name: 'phone_input_'
       }, {
         key: 'TextArea',
@@ -261,7 +262,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        icon: 'fas fa-text-height',
+        icon: _fa.FaTextHeight,
         field_name: 'text_area_'
       }, {
         key: 'FieldSet',
@@ -272,7 +273,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'fieldset'
         }),
-        icon: 'fas fa-bars',
+        icon: _fa.FaBars,
         field_name: 'fieldset-element'
       }, {
         key: 'TwoColumnRow',
@@ -281,7 +282,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'two-columns-row'
         }),
         label: '',
-        icon: 'fas fa-columns',
+        icon: _fa.FaColumns,
         field_name: 'two_col_row_'
       }, {
         key: 'ThreeColumnRow',
@@ -290,7 +291,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'three-columns-row'
         }),
         label: '',
-        icon: 'fas fa-columns',
+        icon: _fa.FaColumns,
         field_name: 'three_col_row_'
       }, {
         key: 'FourColumnRow',
@@ -300,7 +301,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'four-columns-row'
         }),
         label: '',
-        icon: 'fas fa-columns',
+        icon: _fa.FaColumns,
         field_name: 'four_col_row_',
         col_count: 4,
         class_name: 'col-md-3'
@@ -312,7 +313,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'five-columns-row'
         }),
         label: '',
-        icon: 'fas fa-columns',
+        icon: _fa.FaColumns,
         field_name: 'five_col_row_',
         col_count: 5,
         class_name: 'col'
@@ -324,7 +325,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'six-columns-row'
         }),
         label: '',
-        icon: 'fas fa-columns',
+        icon: _fa.FaColumns,
         field_name: 'six_col_row_',
         col_count: 6,
         class_name: 'col-md-2'
@@ -334,7 +335,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           id: 'image'
         }),
         label: '',
-        icon: 'far fa-image',
+        icon: _fa.FaRegImage,
         field_name: 'image_',
         src: ''
       }, {
@@ -346,7 +347,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
-        icon: 'fas fa-star',
+        icon: _fa.FaStar,
         field_name: 'rating_'
       }, {
         key: 'DatePicker',
@@ -360,7 +361,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'date'
         }),
-        icon: 'far fa-calendar-alt',
+        icon: _fa.FaRegCalendarAlt,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -371,7 +372,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'signature'
         }),
-        icon: 'fas fa-pen-square',
+        icon: _fa.FaPenSquare,
         label: intl.formatMessage({
           id: 'signature'
         }),
@@ -381,7 +382,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'website'
         }),
-        icon: 'fas fa-link',
+        icon: _fa.FaLink,
         "static": true,
         content: intl.formatMessage({
           id: 'place-holder-website-link'
@@ -392,7 +393,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'file-attachment'
         }),
-        icon: 'fas fa-file',
+        icon: _fa.FaFile,
         "static": true,
         content: intl.formatMessage({
           id: 'place-holder-file-name'
@@ -405,7 +406,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'range'
         }),
-        icon: 'fas fa-sliders-h',
+        icon: _fa.FaSlidersH,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -425,7 +426,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'camera'
         }),
-        icon: 'fas fa-camera',
+        icon: _fa.FaCamera,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),
@@ -435,7 +436,7 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         name: intl.formatMessage({
           id: 'file-upload'
         }),
-        icon: 'fas fa-file',
+        icon: _fa.FaFile,
         label: intl.formatMessage({
           id: 'place-holder-label'
         }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-survey-builder",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A complete survey builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",

package/types/index.d.ts

@@ -114,7 +114,7 @@ export type ToolbarItem = {
   key: string;
   name: string;
   static: boolean;
-  icon: string;
+  icon: React.ReactNode;
   content: string;
 };