@progress/kendo-react-layout 5.10.0-dev.202301092204 → 5.10.0-dev.202301111405

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { validatePackage } from '@progress/kendo-react-common';
+import { IconWrap, svgIconPropType, validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { classNames } from '@progress/kendo-react-common';
 /**
@@ -12,7 +12,7 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
     React.useImperativeHandle(ref, function () { return ({
         element: elementRef.current
     }); });
-    var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
+    var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, svgIcon = props.svgIcon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
     var itemClasses = React.useMemo(function () { return classNames('k-bottom-nav-item', {
         'k-selected': selected,
         'k-disabled': disabled
@@ -31,7 +31,7 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
     var ItemComp = item;
     var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-selected": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
         (React.createElement(React.Fragment, null,
-            icon && React.createElement("span", { className: "k-bottom-nav-item-icon k-icon k-i-".concat(icon) }),
+            (icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
             text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
     return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
 });
@@ -45,6 +45,7 @@ BottomNavigationItem.propTypes = {
     disabled: PropTypes.bool,
     selected: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     text: PropTypes.string,
     tabIndex: PropTypes.number
 };

package/dist/es/bottomnavigation/BottomNavigationItemProps.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * The interface for describing items that can be passed to the `items` property of the BottomNavigation component.
  */
@@ -23,7 +24,12 @@ export interface BottomNavigationItemProps {
      * Defines the name for an existing icon in a KendoReact theme.
      * The icon is rendered inside the BottomNavigation item by a `span.k-icon` element.
      */
-    icon?: React.ReactNode;
+    icon?: string;
+    /**
+     * Defines an SVG icon.
+     * The icon is rendered inside the BottomNavigation item.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies the text content of the BottomNavigation item.
      */

package/dist/es/breadcrumb/BreadcrumbDelimiter.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { validatePackage } from '@progress/kendo-licensing';
-import { Icon } from '@progress/kendo-react-common';
+import { IconWrap } from '@progress/kendo-react-common';
+import { chevronRightIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from '../package-metadata';
 /**
  * Represents the BreadcrumbDelimiter component.
@@ -18,7 +19,7 @@ export var BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement(Icon, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", className: "k-breadcrumb-delimiter-icon" }));
+    return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/es/drawer/DrawerItem.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, getTabIndex } from '@progress/kendo-react-common';
+import { classNames, getTabIndex, IconWrap, svgIconPropType, toIconName } from '@progress/kendo-react-common';
 import { DrawerContext } from './context/DrawerContext';
 /**
  * Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
@@ -53,7 +53,7 @@ import { DrawerContext } from './context/DrawerContext';
  * ```
  */
 export var DrawerItem = React.forwardRef(function (props, target) {
-    var className = props.className, style = props.style, text = props.text, icon = props.icon, separator = props.separator, disabled = props.disabled, selected = props.selected, onSelect = props.onSelect, index = props.index, tabIndex = props.tabIndex, children = props.children, others = __rest(props, ["className", "style", "text", "icon", "separator", "disabled", "selected", "onSelect", "index", "tabIndex", "children"]);
+    var className = props.className, style = props.style, text = props.text, icon = props.icon, svgIcon = props.svgIcon, separator = props.separator, disabled = props.disabled, selected = props.selected, onSelect = props.onSelect, index = props.index, tabIndex = props.tabIndex, children = props.children, others = __rest(props, ["className", "style", "text", "icon", "svgIcon", "separator", "disabled", "selected", "onSelect", "index", "tabIndex", "children"]);
     var _a = React.useContext(DrawerContext), expanded = _a.expanded, mini = _a.mini, item = _a.item;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
@@ -81,7 +81,7 @@ export var DrawerItem = React.forwardRef(function (props, target) {
         }
     }, [onSelect, index, disabled]);
     var drawerItemContent = (React.createElement(React.Fragment, null,
-        icon && React.createElement("span", { className: 'k-icon ' + icon }),
+        (icon || svgIcon) && React.createElement(IconWrap, { name: icon ? toIconName(icon) : icon, icon: svgIcon }),
         !expanded && mini ? null : React.createElement("span", { className: 'k-item-text' }, text)));
     return (separator
         ? React.createElement("li", { className: 'k-drawer-item k-drawer-separator', role: "presentation" })
@@ -92,6 +92,7 @@ DrawerItem.propTypes = {
     style: PropTypes.object,
     text: PropTypes.string,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     separator: PropTypes.bool,
     selected: PropTypes.bool,
     disabled: PropTypes.bool,

package/dist/es/drawer/interfaces/DrawerItemProps.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * An interface for the Drawer items.
  */
@@ -24,6 +25,10 @@ export interface DrawerItemProps {
      * The icon is rendered inside the Drawer item by a `span.k-icon` element.
      */
     icon?: string;
+    /**
+     * Defines the SVG icon of the item.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies if the Drawer item is initially selected.
      */

package/dist/es/expansionpanel/ExpansionPanel.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, getTabIndex, useRtl, validatePackage, dispatchEvent, Keys, useAsyncFocusBlur, Icon } from '@progress/kendo-react-common';
+import { classNames, getTabIndex, useRtl, validatePackage, dispatchEvent, Keys, useAsyncFocusBlur, IconWrap } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
 /**
  * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
  */
@@ -12,7 +13,7 @@ export var ExpansionPanel = React.forwardRef(function (props, target) {
     var _c = React.useState(false), focused = _c[0], setFocused = _c[1];
     var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _d = props.expanded, expanded = _d === void 0 ? false : _d, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
+    var _d = props.expanded, expanded = _d === void 0 ? false : _d, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon, expandSVGIcon = props.expandSVGIcon, collapseSVGIcon = props.collapseSVGIcon;
     var onClick = React.useCallback(function (event) {
         dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
     }, [onAction, expanded]);
@@ -45,9 +46,11 @@ export var ExpansionPanel = React.forwardRef(function (props, target) {
             React.createElement("span", { className: "k-spacer" }),
             subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
             React.createElement("span", { className: "k-expander-indicator" },
-                React.createElement(Icon, { name: !expanded
+                React.createElement(IconWrap, { name: !expanded
                         ? !expandIcon ? 'chevron-down' : undefined
-                        : !collapseIcon ? 'chevron-up' : undefined, className: classNames(expanded
+                        : !collapseIcon ? 'chevron-up' : undefined, icon: !expanded
+                        ? !expandSVGIcon ? chevronDownIcon : undefined
+                        : !collapseSVGIcon ? chevronUpIcon : undefined, className: classNames(expanded
                         ? (_a = {},
                             _a[String(collapseIcon)] = Boolean(collapseIcon),
                             _a) : (_b = {},

package/dist/es/expansionpanel/interfaces.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseEvent } from '@progress/kendo-react-common';
+import { BaseEvent, SVGIcon } from '@progress/kendo-react-common';
 /**
  * The ExpansionPanel ref.
  */
@@ -54,6 +54,14 @@ export interface ExpansionPanelProps {
      * Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
      */
     collapseIcon?: string;
+    /**
+     * Sets a custom SVG icon for the expanded state of the ExpansionPanel.
+     */
+    expandSVGIcon?: SVGIcon;
+    /**
+     * Sets a custom SVG icon for the collapsed state of the ExpansionPanel.
+     */
+    collapseSVGIcon?: SVGIcon;
     /**
      * Sets the `dir` property of the ExpansionPanel.
      */

package/dist/es/menu/components/MenuItemArrow.d.ts

@@ -42,5 +42,5 @@ export declare class MenuItemArrow extends React.Component<MenuItemArrowProps, {
      * @hidden
      */
     render(): JSX.Element;
-    private getIconName;
+    private getIcon;
 }

package/dist/es/menu/components/MenuItemArrow.js

@@ -13,9 +13,21 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Icon } from '@progress/kendo-react-common';
+import { IconWrap } from '@progress/kendo-react-common';
+import { caretAltDownIcon, caretAltRightIcon, caretAltLeftIcon } from '@progress/kendo-svg-icons';
 import { getChildrenPosition } from '../utils/misc';
 /**
  * @hidden
@@ -38,19 +50,19 @@ var MenuItemArrow = /** @class */ (function (_super) {
      * @hidden
      */
     MenuItemArrow.prototype.render = function () {
-        return React.createElement(Icon, { className: 'k-menu-expand-arrow', name: this.getIconName() });
+        return React.createElement(IconWrap, __assign({ className: 'k-menu-expand-arrow' }, this.getIcon()));
     };
-    MenuItemArrow.prototype.getIconName = function () {
+    MenuItemArrow.prototype.getIcon = function () {
         var childrenPosition = getChildrenPosition(this.props.itemId, this.props.verticalMenu === true, this.props.dir === 'rtl');
         switch (childrenPosition) {
             case 'downward':
-                return downArrowName;
+                return { name: downArrowName, icon: caretAltDownIcon };
             case 'rightward':
-                return rightArrowName;
+                return { name: rightArrowName, icon: caretAltRightIcon };
             case 'leftward':
-                return leftArrowName;
+                return { name: leftArrowName, icon: caretAltLeftIcon };
             default:
-                return undefined;
+                return {};
         }
     };
     /**

package/dist/es/menu/components/MenuItemInternal.js

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, IconWrap } from '@progress/kendo-react-common';
 import { Popup } from '@progress/kendo-react-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc';
@@ -109,8 +109,9 @@ var MenuItemInternal = /** @class */ (function (_super) {
         }
     };
     MenuItemInternal.prototype.renderMenuIconIfApplicable = function () {
-        return this.props.item.icon ?
-            React.createElement("span", { className: "k-icon k-i-".concat(this.props.item.icon), role: "presentation", key: "0" }) : null;
+        var _a = this.props.item, icon = _a.icon, svgIcon = _a.svgIcon;
+        return icon || svgIcon ?
+            React.createElement(IconWrap, { name: icon, icon: svgIcon, key: "0" }) : null;
     };
     MenuItemInternal.prototype.renderArrowIfApplicable = function () {
         return this.props.item.items.length > 0 ?

package/dist/es/menu/models/BaseMenuItem.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * An interface which holds the shared properties of the MenuItemModel and the MenuItem components.
  */
@@ -15,6 +16,10 @@ export interface BaseMenuItem {
      * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
      */
     icon?: string;
+    /**
+     * Specifies the SVG icon that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
      */

package/dist/es/menu/models/BaseMenuItem.js

@@ -1,2 +1,3 @@
+/* eslint-disable max-len */
 export {};
 // tslint:enable:max-line-length

package/dist/es/menu/utils/prepareInputItemsForInternalWork.js

@@ -21,7 +21,7 @@ export function prepareInputItemsForInternalWork(models, menuChildren) {
 }
 function copyInputItemWithoutChildren(inputModel, inputComponent) {
     var result = {};
-    var _a = inputModel ? inputModel : inputComponent.props, text = _a.text, url = _a.url, icon = _a.icon, disabled = _a.disabled, cssClass = _a.cssClass, cssStyle = _a.cssStyle, render = _a.render, linkRender = _a.linkRender, contentRender = _a.contentRender, data = _a.data;
+    var _a = inputModel ? inputModel : inputComponent.props, text = _a.text, url = _a.url, icon = _a.icon, svgIcon = _a.svgIcon, disabled = _a.disabled, cssClass = _a.cssClass, cssStyle = _a.cssStyle, render = _a.render, linkRender = _a.linkRender, contentRender = _a.contentRender, data = _a.data;
     if (text !== undefined) {
         result.text = text;
     }
@@ -31,6 +31,9 @@ function copyInputItemWithoutChildren(inputModel, inputComponent) {
     if (icon !== undefined) {
         result.icon = icon;
     }
+    if (svgIcon !== undefined) {
+        result.svgIcon = svgIcon;
+    }
     if (disabled !== undefined) {
         result.disabled = disabled;
     }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673300822,
+    publishDate: 1673444873,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/panelbar/PanelBarItem.d.ts

@@ -13,6 +13,14 @@ export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps,
         animation: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         expanded: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/panelbar/PanelBarItem.js

@@ -26,19 +26,19 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Icon } from '@progress/kendo-react-common';
+import { classNames, IconWrap, svgIconPropType } from '@progress/kendo-react-common';
+import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
 import { Reveal } from '@progress/kendo-react-animation';
 /**
  * @hidden
  */
 function iconElement(_a) {
-    var imageUrl = _a.imageUrl, icon = _a.icon, iconClass = _a.iconClass;
+    var imageUrl = _a.imageUrl, icon = _a.icon, svgIcon = _a.svgIcon, iconClass = _a.iconClass;
     if (imageUrl) {
         return (React.createElement("img", { role: "presentation", className: 'k-panelbar-item-icon k-image', src: imageUrl }));
     }
-    else if (icon) {
-        var iconClasses = classNames('k-panelbar-item-icon', 'k-icon', 'k-i-' + icon);
-        return (React.createElement("span", { role: "presentation", className: iconClasses }));
+    else if (icon || svgIcon) {
+        return (React.createElement(IconWrap, { className: 'k-panelbar-item-icon', name: icon, icon: svgIcon }));
     }
     else if (iconClass) {
         return (React.createElement("span", { role: "presentation", className: 'k-panelbar-item-icon ' + iconClass }));
@@ -95,7 +95,7 @@ var PanelBarItem = /** @class */ (function (_super) {
         var animationStyle = { display: 'block' };
         var icon = iconElement(this.props);
         var arrow = (!disabled && children)
-            ? (React.createElement(Icon, { name: expanded ? 'chevron-up' : 'chevron-down', className: classNames('k-panelbar-toggle', expanded
+            ? (React.createElement(IconWrap, { name: expanded ? 'chevron-up' : 'chevron-down', icon: expanded ? chevronUpIcon : chevronDownIcon, className: classNames('k-panelbar-toggle', expanded
                     ? 'k-panelbar-collapse'
                     : 'k-panelbar-expand') }))
             : null;
@@ -122,6 +122,10 @@ var PanelBarItem = /** @class */ (function (_super) {
         animation: PropTypes.bool,
         children: PropTypes.any,
         className: PropTypes.string,
+        icon: PropTypes.string,
+        iconClass: PropTypes.string,
+        imageUrl: PropTypes.string,
+        svgIcon: svgIconPropType,
         expanded: PropTypes.bool,
         disabled: PropTypes.bool,
         onSelect: PropTypes.func,

package/dist/es/panelbar/interfaces/PanelBarItemProps.d.ts

@@ -39,6 +39,10 @@ export interface PanelBarItemProps {
      * Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */
     icon?: string;
+    /**
+     * Defines an SVG icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
+     */
+    svgIcon?: string;
     /**
      * Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
      */

package/dist/es/splitter/SplitterBar.js

@@ -14,7 +14,8 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { classNames, Draggable, Icon, Keys } from '@progress/kendo-react-common';
+import { classNames, Draggable, IconWrap, Keys } from '@progress/kendo-react-common';
+import { caretAltRightIcon, caretAltLeftIcon, caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -140,7 +141,7 @@ var SplitterBar = /** @class */ (function (_super) {
         return (React.createElement(Draggable, { onPress: function (event) { return _this.onDrag(event, true, false); }, onDrag: function (event) { return _this.onDrag(event, false, false); }, onRelease: function (event) { return _this.onDrag(event, false, true); }, ref: function (component) { _this.draggable = component; } },
             React.createElement("div", { tabIndex: isStatic ? -1 : 0, role: 'separator', className: barClasses, style: { touchAction: 'none' }, onFocus: this.onFocus, onBlur: this.onBlur, onDoubleClick: this.onToggle, onKeyDown: this.onKeyDown },
                 this.props.prev.collapsible && React.createElement("div", { className: 'k-collapse-prev', onClick: this.onPrevToggle },
-                    React.createElement(Icon, { name: this.props.prev.collapsible
+                    React.createElement(IconWrap, { name: this.props.prev.collapsible
                             ? isHorizontal
                                 ? this.props.prev.collapsed
                                     ? 'caret-alt-right'
@@ -148,10 +149,18 @@ var SplitterBar = /** @class */ (function (_super) {
                                 : this.props.prev.collapsed
                                     ? 'caret-alt-down'
                                     : 'caret-alt-up'
+                            : undefined, icon: this.props.prev.collapsible
+                            ? isHorizontal
+                                ? this.props.prev.collapsed
+                                    ? caretAltRightIcon
+                                    : caretAltLeftIcon
+                                : this.props.prev.collapsed
+                                    ? caretAltDownIcon
+                                    : caretAltUpIcon
                             : undefined })),
                 React.createElement("div", { className: 'k-resize-handle' }),
                 this.props.next.collapsible && React.createElement("div", { className: 'k-collapse-next', onClick: this.onNextToggle },
-                    React.createElement(Icon, { name: this.props.next.collapsible
+                    React.createElement(IconWrap, { name: this.props.next.collapsible
                             ? isHorizontal
                                 ? this.props.next.collapsed
                                     ? 'caret-alt-left'
@@ -159,6 +168,14 @@ var SplitterBar = /** @class */ (function (_super) {
                                 : this.props.next.collapsed
                                     ? 'caret-alt-up'
                                     : 'caret-alt-down'
+                            : undefined, icon: this.props.prev.collapsible
+                            ? isHorizontal
+                                ? this.props.prev.collapsed
+                                    ? caretAltLeftIcon
+                                    : caretAltRightIcon
+                                : this.props.prev.collapsed
+                                    ? caretAltUpIcon
+                                    : caretAltDownIcon
                             : undefined })))));
     };
     return SplitterBar;

package/dist/es/stepper/Step.js

@@ -23,8 +23,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { StepperContext } from './context/StepperContext';
-import { classNames, focusFirstFocusableChild, dispatchEvent } from '@progress/kendo-react-common';
+import { classNames, focusFirstFocusableChild, dispatchEvent, IconWrap, toIconName } from '@progress/kendo-react-common';
 import { useLocalization } from '@progress/kendo-react-intl';
+import { checkOutlineIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
 import { messages, optionalText } from './messages';
 /**
@@ -49,8 +50,8 @@ import { messages, optionalText } from './messages';
 export var Step = React.forwardRef(function (props, target) {
     var 
     // content
-    children = props.children, className = props.className, current = props.current, disabled = props.disabled, focused = props.focused, icon = props.icon, index = props.index, isValid = props.isValid, label = props.label, optional = props.optional, style = props.style, tabIndex = props.tabIndex, text = props.text, others = __rest(props, ["children", "className", "current", "disabled", "focused", "icon", "index", "isValid", "label", "optional", "style", "tabIndex", "text"]);
-    var _a = React.useContext(StepperContext), animationDuration = _a.animationDuration, isVertical = _a.isVertical, item = _a.item, linear = _a.linear, mode = _a.mode, numOfSteps = _a.numOfSteps, value = _a.value, successIcon = _a.successIcon, errorIcon = _a.errorIcon, onChange = _a.onChange, onFocus = _a.onFocus;
+    children = props.children, className = props.className, current = props.current, disabled = props.disabled, focused = props.focused, icon = props.icon, svgIcon = props.svgIcon, index = props.index, isValid = props.isValid, label = props.label, optional = props.optional, style = props.style, tabIndex = props.tabIndex, text = props.text, others = __rest(props, ["children", "className", "current", "disabled", "focused", "icon", "svgIcon", "index", "isValid", "label", "optional", "style", "tabIndex", "text"]);
+    var _a = React.useContext(StepperContext), animationDuration = _a.animationDuration, isVertical = _a.isVertical, item = _a.item, linear = _a.linear, mode = _a.mode, numOfSteps = _a.numOfSteps, value = _a.value, onChange = _a.onChange, onFocus = _a.onFocus, successIcon = _a.successIcon, errorIcon = _a.errorIcon, successSVGIcon = _a.successSVGIcon, errorSVGIcon = _a.errorSVGIcon;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -97,15 +98,13 @@ export var Step = React.forwardRef(function (props, target) {
         'k-focus': focused
     }, className); }, [index, numOfSteps, value, current, optional, disabled, focused, isValid, className]);
     var itemStyles = React.useMemo(function () { return (__assign({ maxWidth: !isVertical ? "calc(100% / ".concat(numOfSteps, ")") : undefined, maxHeight: isVertical ? "calc(100% / ".concat(numOfSteps, ")") : undefined, pointerEvents: !allowClick ? 'none' : undefined }, style)); }, [isVertical, numOfSteps, style, allowClick]);
-    var validationIconClasses = (isValid
-        ? successIcon ? "".concat(successIcon) : 'k-icon k-i-check-circle'
-        : errorIcon ? "".concat(errorIcon) : 'k-icon k-i-exclamation-circle');
-    var validationIcons = (React.createElement("span", { className: 'k-step-indicator-icon ' + validationIconClasses, "aria-hidden": "true" }));
+    var validationIconCustom = isValid ? successIcon : errorIcon;
+    var validationIcons = validationIconCustom ? (React.createElement("span", { className: 'k-step-indicator-icon ' + validationIconCustom, "aria-hidden": "true" })) : (React.createElement(IconWrap, { className: 'k-step-indicator-icon', name: isValid ? 'check-circle' : 'exclamation-circle', icon: isValid ? (successSVGIcon || checkOutlineIcon) : (errorSVGIcon || exclamationCircleIcon) }));
     var stepIndicator = (React.createElement(React.Fragment, null, mode !== 'labels' ?
-        React.createElement("span", { className: "k-step-indicator", "aria-hidden": true, style: { transitionDuration: progressAnimation + 'ms' } }, icon
+        React.createElement("span", { className: "k-step-indicator", "aria-hidden": true, style: { transitionDuration: progressAnimation + 'ms' } }, (icon || svgIcon)
             ? !isInLabel && isValid !== undefined
                 ? validationIcons
-                : React.createElement("span", { className: "k-step-indicator-icon k-icon ".concat(icon) })
+                : React.createElement(IconWrap, { className: 'k-step-indicator-icon', name: icon ? toIconName(icon) : icon, icon: svgIcon })
             : isValid !== undefined
                 ? validationIcons
                 : React.createElement("span", { className: "k-step-indicator-text" }, text ? text : index + 1)) :

package/dist/es/stepper/Stepper.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { StepperContext } from './context/StepperContext';
-import { classNames, focusFirstFocusableChild, useRtl, dispatchEvent, Keys } from '@progress/kendo-react-common';
+import { classNames, focusFirstFocusableChild, useRtl, dispatchEvent, Keys, svgIconPropType } from '@progress/kendo-react-common';
 import { Step } from './Step';
 import { ProgressBar } from '@progress/kendo-react-progressbars';
 import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
@@ -39,7 +39,7 @@ import { packageMetadata } from '../package-metadata';
  */
 export var Stepper = React.forwardRef(function (props, target) {
     validatePackage(packageMetadata);
-    var animationDuration = props.animationDuration, children = props.children, className = props.className, disabled = props.disabled, errorIcon = props.errorIcon, item = props.item, items = props.items, linear = props.linear, mode = props.mode, orientation = props.orientation, style = props.style, successIcon = props.successIcon, onChange = props.onChange, onFocus = props.onFocus;
+    var animationDuration = props.animationDuration, children = props.children, className = props.className, disabled = props.disabled, errorIcon = props.errorIcon, errorSVGIcon = props.errorSVGIcon, item = props.item, items = props.items, linear = props.linear, mode = props.mode, orientation = props.orientation, style = props.style, successIcon = props.successIcon, successSVGIcon = props.successSVGIcon, onChange = props.onChange, onFocus = props.onFocus;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
@@ -180,7 +180,9 @@ export var Stepper = React.forwardRef(function (props, target) {
             numOfSteps: numOfSteps,
             value: value,
             successIcon: successIcon,
+            successSVGIcon: successSVGIcon,
             errorIcon: errorIcon,
+            errorSVGIcon: errorSVGIcon,
             onChange: handleChange,
             onFocus: handleFocus
         } },
@@ -195,6 +197,7 @@ Stepper.propTypes = {
     dir: PropTypes.string,
     disabled: PropTypes.bool,
     errorIcon: PropTypes.string,
+    errorSVGIcon: svgIconPropType,
     item: PropTypes.any,
     items: PropTypes.any,
     linear: PropTypes.bool,
@@ -202,6 +205,7 @@ Stepper.propTypes = {
     orientation: PropTypes.oneOf(['horizontal', 'vertical']),
     style: PropTypes.object,
     successIcon: PropTypes.string,
+    successSVGIcon: svgIconPropType,
     value: PropTypes.number.isRequired,
     onChange: PropTypes.func,
     onFocus: PropTypes.func

package/dist/es/stepper/context/StepperContext.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StepProps } from '../interfaces/StepProps';
 import { StepChangeEvent } from '../interfaces/StepChangeEvent';
 import { StepFocusEvent } from '../interfaces/StepFocusEvent';
+import { SVGIcon } from '@progress/kendo-react-common';
 /** @hidden */
 export declare type StepperContextType = {
     animationDuration?: number | boolean;
@@ -13,6 +14,8 @@ export declare type StepperContextType = {
     value: number;
     successIcon?: string;
     errorIcon?: string;
+    successSVGIcon?: SVGIcon;
+    errorSVGIcon?: SVGIcon;
     onChange?: (event: StepChangeEvent) => void;
     onFocus?: (event: StepFocusEvent) => void;
 };

package/dist/es/stepper/interfaces/StepProps.d.ts

@@ -1,3 +1,4 @@
+import { SVGIcon } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represents the props of the [KendoReact Step component]({% slug overview_stepper %}).
@@ -36,6 +37,12 @@ export interface StepProps {
      * ([see example]({% slug display_modes_stepper %})).
      */
     icon?: string;
+    /**
+     * Defines the SVG icon.
+     * The icon is rendered inside the Step indicator
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets the index of the Step that is used to identify it.
      */

package/dist/es/stepper/interfaces/StepperProps.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StepProps } from './StepProps';
 import { StepperChangeEvent } from './StepperChangeEvent';
 import { StepperFocusEvent } from './StepperFocusEvent';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the props of the [KendoReact Stepper component]({% slug overview_stepper %}).
  */
@@ -30,6 +31,10 @@ export interface StepperProps {
      * Specifies a custom icon that will be rendered inside the step for invalid steps.
      */
     errorIcon?: string;
+    /**
+     * Specifies a custom SVG icon that will be rendered inside the step for invalid steps.
+     */
+    errorSVGIcon?: SVGIcon;
     /**
      * Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
      *
@@ -70,6 +75,10 @@ export interface StepperProps {
      * Specifies a custom icon that will be rendered inside the step for valid steps.
      */
     successIcon?: string;
+    /**
+     * Specifies a custom SVG icon that will be rendered inside the step for valid steps.
+     */
+    successSVGIcon?: SVGIcon;
     /**
      * Specifies the index of the selected Step.
      */

package/dist/npm/bottomnavigation/BottomNavigationItem.js

@@ -15,7 +15,7 @@ exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
     React.useImperativeHandle(ref, function () { return ({
         element: elementRef.current
     }); });
-    var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
+    var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, svgIcon = props.svgIcon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
     var itemClasses = React.useMemo(function () { return (0, kendo_react_common_2.classNames)('k-bottom-nav-item', {
         'k-selected': selected,
         'k-disabled': disabled
@@ -34,7 +34,7 @@ exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
     var ItemComp = item;
     var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-selected": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
         (React.createElement(React.Fragment, null,
-            icon && React.createElement("span", { className: "k-bottom-nav-item-icon k-icon k-i-".concat(icon) }),
+            (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
             text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
     return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
 });
@@ -48,6 +48,7 @@ exports.BottomNavigationItem.propTypes = {
     disabled: PropTypes.bool,
     selected: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: kendo_react_common_1.svgIconPropType,
     text: PropTypes.string,
     tabIndex: PropTypes.number
 };