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

package/dist/npm/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/npm/breadcrumb/BreadcrumbDelimiter.js

@@ -5,6 +5,7 @@ var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var package_metadata_1 = require("../package-metadata");
 /**
  * Represents the BreadcrumbDelimiter component.
@@ -21,7 +22,7 @@ exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement(kendo_react_common_1.Icon, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", className: "k-breadcrumb-delimiter-icon" }));
+    return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: kendo_svg_icons_1.chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/npm/drawer/DrawerItem.js

@@ -56,7 +56,7 @@ var DrawerContext_1 = require("./context/DrawerContext");
  * ```
  */
 exports.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_1.DrawerContext), expanded = _a.expanded, mini = _a.mini, item = _a.item;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
@@ -84,7 +84,7 @@ exports.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(kendo_react_common_1.IconWrap, { name: icon ? (0, kendo_react_common_1.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" })
@@ -95,6 +95,7 @@ exports.DrawerItem.propTypes = {
     style: PropTypes.object,
     text: PropTypes.string,
     icon: PropTypes.string,
+    svgIcon: kendo_react_common_1.svgIconPropType,
     separator: PropTypes.bool,
     selected: PropTypes.bool,
     disabled: PropTypes.bool,

package/dist/npm/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/npm/expansionpanel/ExpansionPanel.js

@@ -5,6 +5,7 @@ var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
  */
@@ -15,7 +16,7 @@ exports.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) {
         (0, kendo_react_common_1.dispatchEvent)(onAction, event, getImperativeHandle(), { expanded: expanded });
     }, [onAction, expanded]);
@@ -48,9 +49,11 @@ exports.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(kendo_react_common_1.Icon, { name: !expanded
+                React.createElement(kendo_react_common_1.IconWrap, { name: !expanded
                         ? !expandIcon ? 'chevron-down' : undefined
-                        : !collapseIcon ? 'chevron-up' : undefined, className: (0, kendo_react_common_1.classNames)(expanded
+                        : !collapseIcon ? 'chevron-up' : undefined, icon: !expanded
+                        ? !expandSVGIcon ? kendo_svg_icons_1.chevronDownIcon : undefined
+                        : !collapseSVGIcon ? kendo_svg_icons_1.chevronUpIcon : undefined, className: (0, kendo_react_common_1.classNames)(expanded
                         ? (_a = {},
                             _a[String(collapseIcon)] = Boolean(collapseIcon),
                             _a) : (_b = {},

package/dist/npm/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/npm/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/npm/menu/components/MenuItemArrow.js

@@ -14,11 +14,23 @@ 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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItemArrow = exports.leftArrowName = exports.rightArrowName = exports.downArrowName = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var misc_1 = require("../utils/misc");
 /**
  * @hidden
@@ -41,19 +53,19 @@ var MenuItemArrow = /** @class */ (function (_super) {
      * @hidden
      */
     MenuItemArrow.prototype.render = function () {
-        return React.createElement(kendo_react_common_1.Icon, { className: 'k-menu-expand-arrow', name: this.getIconName() });
+        return React.createElement(kendo_react_common_1.IconWrap, __assign({ className: 'k-menu-expand-arrow' }, this.getIcon()));
     };
-    MenuItemArrow.prototype.getIconName = function () {
+    MenuItemArrow.prototype.getIcon = function () {
         var childrenPosition = (0, misc_1.getChildrenPosition)(this.props.itemId, this.props.verticalMenu === true, this.props.dir === 'rtl');
         switch (childrenPosition) {
             case 'downward':
-                return exports.downArrowName;
+                return { name: exports.downArrowName, icon: kendo_svg_icons_1.caretAltDownIcon };
             case 'rightward':
-                return exports.rightArrowName;
+                return { name: exports.rightArrowName, icon: kendo_svg_icons_1.caretAltRightIcon };
             case 'leftward':
-                return exports.leftArrowName;
+                return { name: exports.leftArrowName, icon: kendo_svg_icons_1.caretAltLeftIcon };
             default:
-                return undefined;
+                return {};
         }
     };
     /**

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

@@ -112,8 +112,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(kendo_react_common_1.IconWrap, { name: icon, icon: svgIcon, key: "0" }) : null;
     };
     MenuItemInternal.prototype.renderArrowIfApplicable = function () {
         return this.props.item.items.length > 0 ?

package/dist/npm/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/npm/menu/models/BaseMenuItem.js

@@ -1,3 +1,4 @@
 "use strict";
+/* eslint-disable max-len */
 Object.defineProperty(exports, "__esModule", { value: true });
 // tslint:enable:max-line-length

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

@@ -25,7 +25,7 @@ function prepareInputItemsForInternalWork(models, menuChildren) {
 exports.prepareInputItemsForInternalWork = prepareInputItemsForInternalWork;
 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;
     }
@@ -35,6 +35,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/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673300822,
+    publishDate: 1673462573,
     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/npm/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/npm/panelbar/PanelBarItem.js

@@ -30,18 +30,18 @@ exports.PanelBarItem = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_animation_1 = require("@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 = (0, kendo_react_common_1.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(kendo_react_common_1.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 }));
@@ -98,7 +98,7 @@ var PanelBarItem = /** @class */ (function (_super) {
         var animationStyle = { display: 'block' };
         var icon = iconElement(this.props);
         var arrow = (!disabled && children)
-            ? (React.createElement(kendo_react_common_1.Icon, { name: expanded ? 'chevron-up' : 'chevron-down', className: (0, kendo_react_common_1.classNames)('k-panelbar-toggle', expanded
+            ? (React.createElement(kendo_react_common_1.IconWrap, { name: expanded ? 'chevron-up' : 'chevron-down', icon: expanded ? kendo_svg_icons_1.chevronUpIcon : kendo_svg_icons_1.chevronDownIcon, className: (0, kendo_react_common_1.classNames)('k-panelbar-toggle', expanded
                     ? 'k-panelbar-collapse'
                     : 'k-panelbar-expand') }))
             : null;
@@ -125,6 +125,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: kendo_react_common_1.svgIconPropType,
         expanded: PropTypes.bool,
         disabled: PropTypes.bool,
         onSelect: PropTypes.func,

package/dist/npm/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/npm/splitter/SplitterBar.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitterBar = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -143,7 +144,7 @@ var SplitterBar = /** @class */ (function (_super) {
         return (React.createElement(kendo_react_common_1.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(kendo_react_common_1.Icon, { name: this.props.prev.collapsible
+                    React.createElement(kendo_react_common_1.IconWrap, { name: this.props.prev.collapsible
                             ? isHorizontal
                                 ? this.props.prev.collapsed
                                     ? 'caret-alt-right'
@@ -151,10 +152,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
+                                    ? kendo_svg_icons_1.caretAltRightIcon
+                                    : kendo_svg_icons_1.caretAltLeftIcon
+                                : this.props.prev.collapsed
+                                    ? kendo_svg_icons_1.caretAltDownIcon
+                                    : kendo_svg_icons_1.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(kendo_react_common_1.Icon, { name: this.props.next.collapsible
+                    React.createElement(kendo_react_common_1.IconWrap, { name: this.props.next.collapsible
                             ? isHorizontal
                                 ? this.props.next.collapsed
                                     ? 'caret-alt-left'
@@ -162,6 +171,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
+                                    ? kendo_svg_icons_1.caretAltLeftIcon
+                                    : kendo_svg_icons_1.caretAltRightIcon
+                                : this.props.prev.collapsed
+                                    ? kendo_svg_icons_1.caretAltUpIcon
+                                    : kendo_svg_icons_1.caretAltDownIcon
                             : undefined })))));
     };
     return SplitterBar;

package/dist/npm/stepper/Step.js

@@ -28,6 +28,7 @@ var PropTypes = require("prop-types");
 var StepperContext_1 = require("./context/StepperContext");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var contants_1 = require("./contants");
 var messages_1 = require("./messages");
 /**
@@ -52,8 +53,8 @@ var messages_1 = require("./messages");
 exports.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_1.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_1.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) {
@@ -100,15 +101,13 @@ exports.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(kendo_react_common_1.IconWrap, { className: 'k-step-indicator-icon', name: isValid ? 'check-circle' : 'exclamation-circle', icon: isValid ? (successSVGIcon || kendo_svg_icons_1.checkOutlineIcon) : (errorSVGIcon || kendo_svg_icons_1.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(kendo_react_common_1.IconWrap, { className: 'k-step-indicator-icon', name: icon ? (0, kendo_react_common_1.toIconName)(icon) : icon, icon: svgIcon })
             : isValid !== undefined
                 ? validationIcons
                 : React.createElement("span", { className: "k-step-indicator-text" }, text ? text : index + 1)) :

package/dist/npm/stepper/Stepper.js

@@ -42,7 +42,7 @@ var package_metadata_1 = require("../package-metadata");
  */
 exports.Stepper = React.forwardRef(function (props, target) {
     (0, kendo_react_common_2.validatePackage)(package_metadata_1.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) {
@@ -183,7 +183,9 @@ exports.Stepper = React.forwardRef(function (props, target) {
             numOfSteps: numOfSteps,
             value: value,
             successIcon: successIcon,
+            successSVGIcon: successSVGIcon,
             errorIcon: errorIcon,
+            errorSVGIcon: errorSVGIcon,
             onChange: handleChange,
             onFocus: handleFocus
         } },
@@ -198,6 +200,7 @@ exports.Stepper.propTypes = {
     dir: PropTypes.string,
     disabled: PropTypes.bool,
     errorIcon: PropTypes.string,
+    errorSVGIcon: kendo_react_common_1.svgIconPropType,
     item: PropTypes.any,
     items: PropTypes.any,
     linear: PropTypes.bool,
@@ -205,6 +208,7 @@ exports.Stepper.propTypes = {
     orientation: PropTypes.oneOf(['horizontal', 'vertical']),
     style: PropTypes.object,
     successIcon: PropTypes.string,
+    successSVGIcon: kendo_react_common_1.svgIconPropType,
     value: PropTypes.number.isRequired,
     onChange: PropTypes.func,
     onFocus: PropTypes.func

package/dist/npm/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/npm/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/npm/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.
      */