@sb1/ffe-buttons-react 20.0.10 → 21.0.1

package/es/ActionButton.js

@@ -5,7 +5,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
 import classNames from 'classnames';
-import _Symbol from '@sb1/ffe-symbols-react';
 import Button from './BaseButton';
 export default function ActionButton(props) {
   var className = props.className,
@@ -15,14 +14,8 @@ export default function ActionButton(props) {
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "action",
     className: classNames(className),
-    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 }
 ActionButton.propTypes = {
@@ -42,8 +35,8 @@ ActionButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: bool,
-  /** Name of Icon shown to the left of the label */
-  leftIcon: string,
-  /** Name of Icon shown to the right of the label */
-  rightIcon: string
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+  /** Icon shown to the right of the label */
+  rightIcon: node
 };

package/es/BackButton.js

@@ -2,12 +2,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { oneOfType, func, node, string, object, shape, elementType } from 'prop-types';
 import InlineButton from './InlineBaseButton';
-import _Symbol from '@sb1/ffe-symbols-react';
+import { Icon } from '@sb1/ffe-icons-react';
 var BackButton = function BackButton(props) {
+  var chevronLeftIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im00MTguMTUzLTQ4MCAxNjIuOTIzIDE2Mi45MjRxOC4zMDggOC4zMDcgOC41IDIwLjg4NC4xOTMgMTIuNTc2LTguNSAyMS4yNjgtOC42OTIgOC42OTMtMjEuMDc2IDguNjkzdC0yMS4wNzYtOC42OTNMMzU5LjE1NS00NTQuNjkzcS01LjYxNi01LjYxNS03LjkyMy0xMS44NDYtMi4zMDgtNi4yMy0yLjMwOC0xMy40NjF0Mi4zMDgtMTMuNDYxcTIuMzA3LTYuMjMxIDcuOTIzLTExLjg0NmwxNzkuNzY5LTE3OS43NjlxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDQxOC4xNTMtNDgwWiIvPjwvc3ZnPg==';
   return /*#__PURE__*/React.createElement(InlineButton, _extends({
     buttonType: "back",
-    leftIcon: /*#__PURE__*/React.createElement(_Symbol, {
-      icon: "chevron_left",
+    leftIcon: /*#__PURE__*/React.createElement(Icon, {
+      fileUrl: chevronLeftIcon,
       size: "md"
     })
   }, props));

package/es/BaseButton.js

@@ -41,10 +41,10 @@ var BaseButton = function BaseButton(props) {
     className: "ffe-button__label"
   }, leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
     className: 'ffe-button__icon ffe-button__icon--left',
-    weight: 300
+    size: 'md'
   }), children, rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
     className: 'ffe-button__icon ffe-button__icon--right',
-    weight: 300
+    size: 'md'
   })), supportsSpinner && isLoading && /*#__PURE__*/React.createElement("span", {
     "aria-label": ariaLoadingMessage,
     role: "img",

package/es/ExpandButton.js

@@ -5,7 +5,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, oneOfType, string, node, object, shape, elementType } from 'prop-types';
 import classNames from 'classnames';
-import _Symbol from '@sb1/ffe-symbols-react';
+import { Icon } from '@sb1/ffe-icons-react';
 var ExpandButton = function ExpandButton(props) {
   var children = props.children,
     className = props.className,
@@ -14,6 +14,7 @@ var ExpandButton = function ExpandButton(props) {
     innerRef = props.innerRef,
     isExpanded = props.isExpanded,
     rest = _objectWithoutProperties(props, _excluded);
+  var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
   return /*#__PURE__*/React.createElement(Element, _extends({
     "aria-expanded": isExpanded,
     "aria-label": isExpanded ? closeLabel : undefined,
@@ -21,11 +22,10 @@ var ExpandButton = function ExpandButton(props) {
       'ffe-button--expanded': isExpanded
     }, className),
     ref: innerRef
-  }, rest), isExpanded && /*#__PURE__*/React.createElement(_Symbol, {
+  }, rest), isExpanded && /*#__PURE__*/React.createElement(Icon, {
     className: "ffe-button__icon",
-    icon: "close",
-    size: "md",
-    weight: 300
+    fileUrl: closeIcon,
+    size: "md"
   }), !isExpanded && /*#__PURE__*/React.createElement("span", null, children));
 };
 ExpandButton.propTypes = {

package/es/InlineBaseButton.js

@@ -24,12 +24,12 @@ var InlineBaseButton = function InlineBaseButton(props) {
     ref: innerRef
   }, rest), leftIcon && /*#__PURE__*/React.cloneElement(leftIcon, {
     className: 'ffe-inline-button__icon ffe-inline-button__icon--left',
-    weight: 300
+    size: 'md'
   }), /*#__PURE__*/React.createElement("span", {
     className: "ffe-inline-button__label"
   }, children), rightIcon && /*#__PURE__*/React.cloneElement(rightIcon, {
     className: 'ffe-inline-button__icon ffe-inline-button__icon--right',
-    weight: 300
+    size: 'md'
   }));
 };
 InlineBaseButton.propTypes = {

package/es/InlineExpandButton.js

@@ -4,18 +4,19 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { bool, func, node, oneOfType, object, shape } from 'prop-types';
-import _Symbol from '@sb1/ffe-symbols-react';
+import { Icon } from '@sb1/ffe-icons-react';
 import InlineButton from './InlineBaseButton';
 var InlineExpandButton = function InlineExpandButton(props) {
   var isExpanded = props.isExpanded,
     rest = _objectWithoutProperties(props, _excluded);
+  var expandMoreIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
   return /*#__PURE__*/React.createElement(InlineButton, _extends({
     buttonType: "expand",
     type: "button",
     className: isExpanded ? 'ffe-inline-button--expanded' : '',
-    rightIcon: /*#__PURE__*/React.createElement(_Symbol, {
+    rightIcon: /*#__PURE__*/React.createElement(Icon, {
       size: "md",
-      icon: "expand_more"
+      fileUrl: expandMoreIcon
     })
   }, rest));
 };

package/es/PrimaryButton.js

@@ -5,21 +5,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, oneOfType, node, string, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
-import _Symbol from '@sb1/ffe-symbols-react';
 var PrimaryButton = function PrimaryButton(props) {
   var leftIcon = props.leftIcon,
     rightIcon = props.rightIcon,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "primary",
-    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 };
 PrimaryButton.propTypes = {
@@ -39,9 +32,9 @@ PrimaryButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: bool,
-  /** Name of icon shown to the left of the label */
-  leftIcon: string,
-  /** Name of icon shown to the right of the label */
-  rightIcon: string
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+  /** Icon shown to the right of the label */
+  rightIcon: node
 };
 export default PrimaryButton;

package/es/SecondaryButton.js

@@ -5,21 +5,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, oneOfType, string, node, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
-import _Symbol from '@sb1/ffe-symbols-react';
 var SecondaryButton = function SecondaryButton(props) {
   var leftIcon = props.leftIcon,
     rightIcon = props.rightIcon,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "secondary",
-    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 };
 SecondaryButton.propTypes = {
@@ -39,9 +32,9 @@ SecondaryButton.propTypes = {
   })]),
   /**  Shows a loader if true */
   isLoading: bool,
-  /** Name of icon shown to the left of the label */
-  leftIcon: string,
-  /** Name of icon shown to the right of the label */
-  rightIcon: string
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+  /** Icon shown to the right of the label */
+  rightIcon: node
 };
 export default SecondaryButton;

package/es/ShortcutButton.js

@@ -2,12 +2,13 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
-import _Symbol from '@sb1/ffe-symbols-react';
+import { Icon } from '@sb1/ffe-icons-react';
 var ShortcutButton = function ShortcutButton(props) {
+  var chevronRightIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01MTcuODQ3LTQ4MCAzNTQuOTI0LTY0Mi45MjRxLTguMzA4LTguMzA3LTguNS0yMC44ODQtLjE5My0xMi41NzYgOC41LTIxLjI2OCA4LjY5Mi04LjY5MyAyMS4wNzYtOC42OTN0MjEuMDc2IDguNjkzbDE3OS43NjkgMTc5Ljc2OXE1LjYxNiA1LjYxNSA3LjkyMyAxMS44NDYgMi4zMDggNi4yMyAyLjMwOCAxMy40NjF0LTIuMzA4IDEzLjQ2MXEtMi4zMDcgNi4yMzEtNy45MjMgMTEuODQ2TDM5Ny4wNzYtMjc0LjkyNHEtOC4zMDcgOC4zMDgtMjAuODg0IDguNS0xMi41NzYuMTkzLTIxLjI2OC04LjUtOC42OTMtOC42OTItOC42OTMtMjEuMDc2dDguNjkzLTIxLjA3Nkw1MTcuODQ3LTQ4MFoiLz48L3N2Zz4=';
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "shortcut",
-    rightIcon: /*#__PURE__*/React.createElement(_Symbol, {
-      icon: "chevron_right",
+    rightIcon: /*#__PURE__*/React.createElement(Icon, {
+      fileUrl: chevronRightIcon,
       size: "md"
     })
   }, props));

package/es/TaskButton.js

@@ -5,16 +5,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { bool, func, node, string, oneOfType, object, shape, elementType } from 'prop-types';
 import Button from './BaseButton';
-import _Symbol from '@sb1/ffe-symbols-react';
 var TaskButton = function TaskButton(_ref) {
   var icon = _ref.icon,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Button, _extends({
     buttonType: "task",
-    leftIcon: /*#__PURE__*/React.createElement(_Symbol, {
-      icon: icon,
-      size: "md"
-    })
+    leftIcon: /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true"
+    }, icon)
   }, rest));
 };
 TaskButton.propTypes = {
@@ -26,8 +24,8 @@ TaskButton.propTypes = {
   disabled: bool,
   /** The rendered element, like an `<a />` or `<Link />` */
   element: oneOfType([func, string, elementType]),
-  /** Name of Task icon, shown to the left of the label */
-  icon: string.isRequired,
+  /** icon element shown to the left of the label */
+  icon: node,
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: oneOfType([func, shape({
     current: object

package/es/TertiaryButton.js

@@ -5,21 +5,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import { func, node, oneOfType, string, object, shape, elementType } from 'prop-types';
 import InlineButton from './InlineBaseButton';
-import _Symbol from '@sb1/ffe-symbols-react';
 var TertiaryButton = function TertiaryButton(props) {
   var leftIcon = props.leftIcon,
     rightIcon = props.rightIcon,
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/React.createElement(InlineButton, _extends({
     buttonType: "tertiary",
-    leftIcon: leftIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/React.createElement(_Symbol, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 };
 TertiaryButton.propTypes = {
@@ -33,9 +26,9 @@ TertiaryButton.propTypes = {
   innerRef: oneOfType([func, shape({
     current: object
   })]),
-  /** Name of icon shown to the left of the label */
-  leftIcon: string,
-  /** Name of icon shown to the right of the label */
-  rightIcon: string
+  /** Icon shown to the left of the label */
+  leftIcon: node,
+  /** Icon shown to the right of the label */
+  rightIcon: node
 };
 export default TertiaryButton;

package/lib/ActionButton.js

@@ -7,7 +7,6 @@ exports.default = ActionButton;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
 var _excluded = ["className", "leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,14 +21,8 @@ function ActionButton(props) {
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "action",
     className: (0, _classnames.default)(className),
-    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 }
 ActionButton.propTypes = {
@@ -49,8 +42,8 @@ ActionButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: _propTypes.bool,
-  /** Name of Icon shown to the left of the label */
-  leftIcon: _propTypes.string,
-  /** Name of Icon shown to the right of the label */
-  rightIcon: _propTypes.string
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node
 };

package/lib/BackButton.js

@@ -7,14 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _ffeIconsReact = require("@sb1/ffe-icons-react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var BackButton = function BackButton(props) {
+  var chevronLeftIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Im00MTguMTUzLTQ4MCAxNjIuOTIzIDE2Mi45MjRxOC4zMDggOC4zMDcgOC41IDIwLjg4NC4xOTMgMTIuNTc2LTguNSAyMS4yNjgtOC42OTIgOC42OTMtMjEuMDc2IDguNjkzdC0yMS4wNzYtOC42OTNMMzU5LjE1NS00NTQuNjkzcS01LjYxNi01LjYxNS03LjkyMy0xMS44NDYtMi4zMDgtNi4yMy0yLjMwOC0xMy40NjF0Mi4zMDgtMTMuNDYxcTIuMzA3LTYuMjMxIDcuOTIzLTExLjg0NmwxNzkuNzY5LTE3OS43NjlxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDQxOC4xNTMtNDgwWiIvPjwvc3ZnPg==';
   return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
     buttonType: "back",
-    leftIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: "chevron_left",
+    leftIcon: /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
+      fileUrl: chevronLeftIcon,
       size: "md"
     })
   }, props));

package/lib/BaseButton.js

@@ -47,10 +47,10 @@ var BaseButton = function BaseButton(props) {
     className: "ffe-button__label"
   }, leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
     className: 'ffe-button__icon ffe-button__icon--left',
-    weight: 300
+    size: 'md'
   }), children, rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
     className: 'ffe-button__icon ffe-button__icon--right',
-    weight: 300
+    size: 'md'
   })), supportsSpinner && isLoading && /*#__PURE__*/_react.default.createElement("span", {
     "aria-label": ariaLoadingMessage,
     role: "img",

package/lib/ExpandButton.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _ffeIconsReact = require("@sb1/ffe-icons-react");
 var _excluded = ["children", "className", "closeLabel", "element", "innerRef", "isExpanded"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -21,6 +21,7 @@ var ExpandButton = function ExpandButton(props) {
     innerRef = props.innerRef,
     isExpanded = props.isExpanded,
     rest = _objectWithoutProperties(props, _excluded);
+  var closeIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
   return /*#__PURE__*/_react.default.createElement(Element, _extends({
     "aria-expanded": isExpanded,
     "aria-label": isExpanded ? closeLabel : undefined,
@@ -28,11 +29,10 @@ var ExpandButton = function ExpandButton(props) {
       'ffe-button--expanded': isExpanded
     }, className),
     ref: innerRef
-  }, rest), isExpanded && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+  }, rest), isExpanded && /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
     className: "ffe-button__icon",
-    icon: "close",
-    size: "md",
-    weight: 300
+    fileUrl: closeIcon,
+    size: "md"
   }), !isExpanded && /*#__PURE__*/_react.default.createElement("span", null, children));
 };
 ExpandButton.propTypes = {

package/lib/InlineBaseButton.js

@@ -30,12 +30,12 @@ var InlineBaseButton = function InlineBaseButton(props) {
     ref: innerRef
   }, rest), leftIcon && /*#__PURE__*/_react.default.cloneElement(leftIcon, {
     className: 'ffe-inline-button__icon ffe-inline-button__icon--left',
-    weight: 300
+    size: 'md'
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "ffe-inline-button__label"
   }, children), rightIcon && /*#__PURE__*/_react.default.cloneElement(rightIcon, {
     className: 'ffe-inline-button__icon ffe-inline-button__icon--right',
-    weight: 300
+    size: 'md'
   }));
 };
 InlineBaseButton.propTypes = {

package/lib/InlineExpandButton.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _ffeIconsReact = require("@sb1/ffe-icons-react");
 var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
 var _excluded = ["isExpanded"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,13 +16,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var InlineExpandButton = function InlineExpandButton(props) {
   var isExpanded = props.isExpanded,
     rest = _objectWithoutProperties(props, _excluded);
+  var expandMoreIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtMzczLjUzOXEtNy4yMzEgMC0xMy40NjEtMi4zMDgtNi4yMzEtMi4zMDgtMTEuODQ2LTcuOTIzTDI3NC45MjQtNTYzLjUzOXEtOC4zMDgtOC4zMDctOC41LTIwLjg4NC0uMTkzLTEyLjU3NyA4LjUtMjEuMjY5IDguNjkyLTguNjkyIDIxLjA3Ni04LjY5MnQyMS4wNzYgOC42OTJMNDgwLTQ0Mi43NjhsMTYyLjkyNC0xNjIuOTI0cTguMzA3LTguMzA3IDIwLjg4NC04LjUgMTIuNTc2LS4xOTIgMjEuMjY4IDguNSA4LjY5MyA4LjY5MiA4LjY5MyAyMS4wNzcgMCAxMi4zODQtOC42OTMgMjEuMDc2TDUwNS4zMDctMzgzLjc3cS01LjYxNSA1LjYxNS0xMS44NDYgNy45MjMtNi4yMyAyLjMwOC0xMy40NjEgMi4zMDhaIi8+PC9zdmc+';
   return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
     buttonType: "expand",
     type: "button",
     className: isExpanded ? 'ffe-inline-button--expanded' : '',
-    rightIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
+    rightIcon: /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
       size: "md",
-      icon: "expand_more"
+      fileUrl: expandMoreIcon
     })
   }, rest));
 };

package/lib/PrimaryButton.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _excluded = ["leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -19,14 +18,8 @@ var PrimaryButton = function PrimaryButton(props) {
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "primary",
-    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 };
 PrimaryButton.propTypes = {
@@ -46,9 +39,9 @@ PrimaryButton.propTypes = {
   })]),
   /** Shows a loader if true */
   isLoading: _propTypes.bool,
-  /** Name of icon shown to the left of the label */
-  leftIcon: _propTypes.string,
-  /** Name of icon shown to the right of the label */
-  rightIcon: _propTypes.string
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node
 };
 var _default = exports.default = PrimaryButton;

package/lib/SecondaryButton.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _excluded = ["leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -19,14 +18,8 @@ var SecondaryButton = function SecondaryButton(props) {
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "secondary",
-    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 };
 SecondaryButton.propTypes = {
@@ -46,9 +39,9 @@ SecondaryButton.propTypes = {
   })]),
   /**  Shows a loader if true */
   isLoading: _propTypes.bool,
-  /** Name of icon shown to the left of the label */
-  leftIcon: _propTypes.string,
-  /** Name of icon shown to the right of the label */
-  rightIcon: _propTypes.string
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node
 };
 var _default = exports.default = SecondaryButton;

package/lib/ShortcutButton.js

@@ -7,14 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
+var _ffeIconsReact = require("@sb1/ffe-icons-react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var ShortcutButton = function ShortcutButton(props) {
+  var chevronRightIcon = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik01MTcuODQ3LTQ4MCAzNTQuOTI0LTY0Mi45MjRxLTguMzA4LTguMzA3LTguNS0yMC44ODQtLjE5My0xMi41NzYgOC41LTIxLjI2OCA4LjY5Mi04LjY5MyAyMS4wNzYtOC42OTN0MjEuMDc2IDguNjkzbDE3OS43NjkgMTc5Ljc2OXE1LjYxNiA1LjYxNSA3LjkyMyAxMS44NDYgMi4zMDggNi4yMyAyLjMwOCAxMy40NjF0LTIuMzA4IDEzLjQ2MXEtMi4zMDcgNi4yMzEtNy45MjMgMTEuODQ2TDM5Ny4wNzYtMjc0LjkyNHEtOC4zMDcgOC4zMDgtMjAuODg0IDguNS0xMi41NzYuMTkzLTIxLjI2OC04LjUtOC42OTMtOC42OTItOC42OTMtMjEuMDc2dDguNjkzLTIxLjA3Nkw1MTcuODQ3LTQ4MFoiLz48L3N2Zz4=';
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "shortcut",
-    rightIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: "chevron_right",
+    rightIcon: /*#__PURE__*/_react.default.createElement(_ffeIconsReact.Icon, {
+      fileUrl: chevronRightIcon,
       size: "md"
     })
   }, props));

package/lib/TaskButton.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _BaseButton = _interopRequireDefault(require("./BaseButton"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _excluded = ["icon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -18,10 +17,9 @@ var TaskButton = function TaskButton(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_BaseButton.default, _extends({
     buttonType: "task",
-    leftIcon: /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: icon,
-      size: "md"
-    })
+    leftIcon: /*#__PURE__*/_react.default.createElement("div", {
+      "aria-hidden": "true"
+    }, icon)
   }, rest));
 };
 TaskButton.propTypes = {
@@ -33,8 +31,8 @@ TaskButton.propTypes = {
   disabled: _propTypes.bool,
   /** The rendered element, like an `<a />` or `<Link />` */
   element: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.string, _propTypes.elementType]),
-  /** Name of Task icon, shown to the left of the label */
-  icon: _propTypes.string.isRequired,
+  /** icon element shown to the left of the label */
+  icon: _propTypes.node,
   /** Ref-setting function, or ref created by useRef, passed to the button element */
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object

package/lib/TertiaryButton.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _InlineBaseButton = _interopRequireDefault(require("./InlineBaseButton"));
-var _ffeSymbolsReact = _interopRequireDefault(require("@sb1/ffe-symbols-react"));
 var _excluded = ["leftIcon", "rightIcon"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -19,14 +18,8 @@ var TertiaryButton = function TertiaryButton(props) {
     rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/_react.default.createElement(_InlineBaseButton.default, _extends({
     buttonType: "tertiary",
-    leftIcon: leftIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: leftIcon,
-      size: "md"
-    }),
-    rightIcon: rightIcon && /*#__PURE__*/_react.default.createElement(_ffeSymbolsReact.default, {
-      icon: rightIcon,
-      size: "md"
-    })
+    leftIcon: leftIcon,
+    rightIcon: rightIcon
   }, rest));
 };
 TertiaryButton.propTypes = {
@@ -40,9 +33,9 @@ TertiaryButton.propTypes = {
   innerRef: (0, _propTypes.oneOfType)([_propTypes.func, (0, _propTypes.shape)({
     current: _propTypes.object
   })]),
-  /** Name of icon shown to the left of the label */
-  leftIcon: _propTypes.string,
-  /** Name of icon shown to the right of the label */
-  rightIcon: _propTypes.string
+  /** Icon shown to the left of the label */
+  leftIcon: _propTypes.node,
+  /** Icon shown to the right of the label */
+  rightIcon: _propTypes.node
 };
 var _default = exports.default = TertiaryButton;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sb1/ffe-buttons-react",
-    "version": "20.0.10",
+    "version": "21.0.1",
     "description": "React implementation of ffe-buttons",
     "keywords": [
         "ffe"
@@ -28,13 +28,13 @@
         "test:watch": "ffe-buildtool jest --watch"
     },
     "dependencies": {
-        "@sb1/ffe-buttons": "^18.0.5",
-        "@sb1/ffe-symbols-react": "^3.0.2",
+        "@sb1/ffe-buttons": "^18.0.6",
+        "@sb1/ffe-icons-react": "^9.0.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "devDependencies": {
-        "@sb1/ffe-buildtool": "^0.5.0",
+        "@sb1/ffe-buildtool": "^0.5.1",
         "eslint": "^5.9.0",
         "react": "^16.9.0",
         "react-collapse": "^4.0.3",
@@ -46,5 +46,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "2055ceed905bf241d03ef589dbac30eed19a3d3d"
+    "gitHead": "73d1ca2c6d689ecda874ee22ed4e8f94bad46dfb"
 }

package/types/index.d.ts

@@ -11,8 +11,8 @@ export type BaseButtonProps = {
     ariaLoadingMessage?: string;
     disabled?: boolean;
     isLoading?: boolean;
-    leftIcon?: string;
-    rightIcon?: string;
+    leftIcon?: HTMLElement | React.ElementType;
+    rightIcon?: HTMLElement | React.ElementType;
 } & MinimalBaseButtonProps;
 
 type ActionButtonProps = BaseButtonProps;
@@ -54,13 +54,13 @@ export type ShortcutButtonProps = {
 export type TaskButtonProps = {
     children?: React.ReactNode;
     disabled?: boolean;
-    icon: string;
+    icon: React.ReactNode;
 } & MinimalBaseButtonProps;
 
 export type TertiaryButtonProps = {
     children?: React.ReactNode;
-    leftIcon?: string;
-    rightIcon?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
 } & MinimalBaseButtonProps;
 
 type NoInfer<T> = [T][T extends any ? 0 : never];