@progress/kendo-react-inputs 5.10.0-dev.202301091032 → 5.10.0-dev.202301111405

package/dist/es/colors/ColorContrastLabels.js

@@ -17,6 +17,8 @@ import * as React from 'react';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages';
 import { getContrastFromTwoRGBAs } from './utils/color-parser';
+import { IconWrap } from '@progress/kendo-react-common';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -41,18 +43,18 @@ var ColorContrastLabels = /** @class */ (function (_super) {
         var success = (React.createElement("span", { className: "k-contrast-validation k-text-success" },
             passMessage,
             " ",
-            React.createElement("span", { className: "k-icon k-i-check" })));
+            React.createElement(IconWrap, { name: "check", icon: checkIcon })));
         var error = (React.createElement("span", { className: "k-contrast-validation k-text-error" },
             failMessage,
             " ",
-            React.createElement("span", { className: "k-icon k-i-close" })));
+            React.createElement(IconWrap, { name: "x", icon: xIcon })));
         return (React.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" },
             React.createElement("div", { className: "k-contrast-ratio" },
                 React.createElement("span", { className: "k-contrast-ratio-text" }, contrastText),
                 contrast >= 4.5 ? (React.createElement("span", { className: "k-contrast-validation k-text-success" },
-                    React.createElement("span", { className: "k-icon k-i-check" }),
-                    contrast >= 7 && React.createElement("span", { className: "k-icon k-i-check" }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
-                    React.createElement("span", { className: "k-icon k-i-close" })))),
+                    React.createElement(IconWrap, { name: "check", icon: checkIcon }),
+                    contrast >= 7 && React.createElement(IconWrap, { name: "check", icon: checkIcon }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
+                    React.createElement(IconWrap, { name: "x", icon: xIcon })))),
             React.createElement("div", null,
                 React.createElement("span", null, aaText),
                 contrast >= 4.5 ? success : error),

package/dist/es/colors/ColorInput.js

@@ -29,6 +29,7 @@ import { NumericTextBox } from '../main';
 import HexInput from './HexInput';
 import { Button } from '@progress/kendo-react-buttons';
 import { Label } from '@progress/kendo-react-labels';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 import { registerForIntl, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientToggleInputsButton } from '../messages';
 /**
@@ -69,7 +70,7 @@ var ColorInput = /** @class */ (function (_super) {
         var toggleButtonMessage = localizationService.toLanguageString(colorGradientToggleInputsButton, messages[colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', svgIcon: caretAltExpandIcon, className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
                     React.createElement("span", { className: "k-hex-value k-textbox k-input" },

package/dist/es/colors/ColorPicker.js

@@ -11,13 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps, svgIconPropType, IconWrap } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { ColorGradient } from './ColorGradient';
 import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
 import { Button } from '@progress/kendo-react-buttons';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { messages, colorPickerDropdownButtonAriaLabel } from '../messages';
 import { useLocalization } from '@progress/kendo-react-intl';
 /**
@@ -60,11 +61,11 @@ export var ColorPickerPropsContext = createPropsContext();
  * ```
  */
 export var ColorPicker = React.forwardRef(function (directProps, target) {
-    var _a, _b;
+    var _a;
     validatePackage(packageMetadata);
     var props = usePropsContext(ColorPickerPropsContext, directProps);
     var localization = useLocalization();
-    var _c = props.size, size = _c === void 0 ? defaultProps.size : _c, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.fillMode, fillMode = _e === void 0 ? defaultProps.fillMode : _e, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
+    var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);
     var paletteRef = React.useRef(null);
@@ -81,9 +82,9 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
         actionElement: buttonRef.current,
         focus: focusElement
     }); });
-    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = React.useState(props.defaultValue), stateValue = _g[0], setStateValue = _g[1];
-    var _h = React.useState(false), stateOpen = _h[0], setStateOpen = _h[1];
+    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _f = React.useState(props.defaultValue), stateValue = _f[0], setStateValue = _f[1];
+    var _g = React.useState(false), stateOpen = _g[0], setStateOpen = _g[1];
     var isValueControlled = isControlled(props.value);
     var isOpenControlled = isControlled(props.open);
     var value = isValueControlled ? props.value : stateValue;
@@ -207,12 +208,11 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
         React.createElement(Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-input-inner' },
                 React.createElement("span", { className: classNames('k-value-icon', 'k-color-preview', {
                         'k-no-color': !value,
-                        'k-icon-color-preview': (icon || iconClassName)
+                        'k-icon-color-preview': (icon || svgIcon || iconClassName)
                     }) },
-                    (iconClassName || icon) && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName, (_b = {},
-                            _b["k-icon k-i-".concat(icon)] = (icon && !iconClassName),
-                            _b)) }),
-                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
+                    iconClassName && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName) }),
+                    !iconClassName && (icon || svgIcon) && React.createElement(IconWrap, { name: icon, icon: svgIcon }),
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: caretAltDownIcon, "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
                 (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });
@@ -223,6 +223,8 @@ ColorPicker.propTypes = {
     view: PropTypes.oneOf(['gradient', 'palette', 'combo']),
     dir: PropTypes.string,
     id: PropTypes.string,
+    icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     ariaLabelledBy: PropTypes.string,
     ariaDescribedBy: PropTypes.string,
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),

package/dist/es/colors/FlatColorPicker.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames, validatePackage, getTabIndex } from '@progress/kendo-react-common';
 import { ButtonGroup, Button } from '@progress/kendo-react-buttons';
+import { paletteIcon, dropletSlashIcon, dropletSliderIcon } from '@progress/kendo-svg-icons';
 import { ColorPalette, ColorGradient } from '../main';
 import { packageMetadata } from '../package-metadata';
 import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
@@ -65,15 +66,12 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
                 React.createElement("div", { className: "k-coloreditor-header k-hstack" },
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         React.createElement(ButtonGroup, null,
-                            React.createElement(Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
-                                React.createElement("span", { className: "k-icon k-i-color-canvas" })),
-                            React.createElement(Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
-                                React.createElement("span", { className: "k-icon k-i-palette" })))),
+                            React.createElement(Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: dropletSliderIcon }),
+                            React.createElement(Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
-                            React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
-                                React.createElement("span", { className: "k-icon k-i-droplet-slash" })),
+                            React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, icon: "droplet-slash", svgIcon: dropletSlashIcon }),
                         (props.showPreview && defaultProps.showPreview) &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),

package/dist/es/colors/interfaces/ColorPickerProps.d.ts

@@ -6,6 +6,7 @@ import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerGradientSettings } from './ColorPickerGradientSettings';
 import { ColorPickerView } from './ColorPickerView';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the props of the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -56,6 +57,10 @@ export interface ColorPickerProps {
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
      */
     icon?: string;
+    /**
+     * Defines the SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The class name which displays an icon in the ColorPicker button
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).

package/dist/es/input/InputValidationIcon.d.ts

@@ -1,14 +1,14 @@
-import { IconHandle, IconProps } from '@progress/kendo-react-common';
+import { IconHandle, SvgIconHandle, IconProps, SvgIconProps } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represent the `ref` of the `InputValidationIcon` component.
  */
-export declare type InputValidationIconHandle = IconHandle;
+export declare type InputValidationIconHandle = IconHandle & SvgIconHandle;
 /**
  * Represents the `props` of the `InputValidationIcon` component.
  */
-export declare type InputValidationIconProps = IconProps;
+export declare type InputValidationIconProps = IconProps & SvgIconProps;
 /**
  * Represents the KendoReact InputValidationIcon component.
  */
-export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconHandle>>;
+export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & SvgIconProps & React.RefAttributes<InputValidationIconHandle>>;

package/dist/es/input/InputValidationIcon.js

@@ -9,12 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { classNames, Icon } from '@progress/kendo-react-common';
+import { classNames, IconWrap } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represents the KendoReact InputValidationIcon component.
  */
 export var InputValidationIcon = React.forwardRef(function (props, ref) {
-    return React.createElement(Icon, __assign({ ref: ref }, props, { className: classNames('k-input-validation-icon', props.className) }));
+    return React.createElement(IconWrap, __assign({ ref: ref }, props, { className: classNames('k-input-validation-icon', props.className) }));
 });
 InputValidationIcon.displayName = 'KendoReactInputValidationIcon';

package/dist/es/numerictextbox/NumericTextBox.js

@@ -13,6 +13,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { useInternationalization, useLocalization } from '@progress/kendo-react-intl';
 import { classNames, guid, getTabIndex, dispatchEvent, createPropsContext, usePropsContext, kendoThemeMaps, useCustomComponent } from '@progress/kendo-react-common';
+import { caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -278,8 +279,8 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
         props.children,
         props.spinners &&
             (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
-                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-up', rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
-                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-down', rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
+                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-up', svgIcon: caretAltUpIcon, rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
+                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-down', svgIcon: caretAltDownIcon, rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
     return props.label
         ? (React.createElement(FloatingLabel, { label: props.label, editorId: inputId, editorValue: looseValue === null ? '' : looseValue, editorValid: isValid, editorDisabled: props.disabled, editorPlaceholder: props.placeholder, children: numerictextbox, style: { width: props.width }, dir: props.dir }))
         : numerictextbox;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673259165,
+    publishDate: 1673444752,
     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/rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 import { RatingItemProps } from './RatingItem';
 import { RatingKeyboardEvent, RatingItemMouseEvent, RatingItemFocusEvent } from './models';
 /**
@@ -70,6 +70,14 @@ export interface RatingProps extends FormComponentProps {
      * Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %})
      */
     icon?: string;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIconOutline?: SVGIcon;
     /**
      * Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %})
      */

package/dist/es/rating/Rating.js

@@ -11,7 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, useDir, Keys, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, useDir, Keys, getTabIndex, createPropsContext, usePropsContext, IconWrap, toIconName, svgIconPropType } from '@progress/kendo-react-common';
+import { starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
 import { RatingItem } from './RatingItem';
 import { ratingReducer, RATING_ACTION } from './rating-reducer';
 import { isSelected, isHalf, calcIsFirstHalf, isCorrectValue, toRound, getRemainder } from './utils';
@@ -45,7 +46,7 @@ export var RatingPropsContext = createPropsContext();
  * Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
  */
 export var Rating = React.forwardRef(function (directProps, ref) {
-    var _a, _b, _c, _d;
+    var _a;
     var props = usePropsContext(RatingPropsContext, directProps);
     var localization = useLocalization();
     var target = React.useRef(null);
@@ -72,19 +73,19 @@ export var Rating = React.forwardRef(function (directProps, ref) {
     var readonly = React.useMemo(function () { return props.readonly || defaultProps.readonly; }, [props.readonly]);
     var disabled = React.useMemo(function () { return props.disabled || defaultProps.disabled; }, [props.disabled]);
     var Item = React.useMemo(function () { return props.item || defaultProps.item; }, [props.item]);
-    var _e = useRating(props.defaultValue || defaultProps.defaultValue, {
+    var _b = useRating(props.defaultValue || defaultProps.defaultValue, {
         state: props.value,
         min: min,
         max: max,
         step: precision === 'half' ? step / 2 : step
-    }, handleChange), stateValue = _e[0], dispatchStateValue = _e[1];
-    var _f = useRating(null, {
+    }, handleChange), stateValue = _b[0], dispatchStateValue = _b[1];
+    var _c = useRating(null, {
         state: props.value,
         min: min,
         max: max,
         step: precision === 'half' ? step / 2 : step,
         precision: precision
-    }), stateHover = _f[0], dispatchStateHover = _f[1];
+    }), stateHover = _c[0], dispatchStateHover = _c[1];
     var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
     var hoveredValue = React.useMemo(function () { return stateHover; }, [stateHover]);
     var selection = React.useMemo(function () { return props.selection || defaultProps.selection; }, [props.selection]);
@@ -202,27 +203,19 @@ export var Rating = React.forwardRef(function (directProps, ref) {
         var selectedValue = isSelected(itemValue, value, step, selection);
         var selected = isSelected(itemValue, hoveredValue !== null ? hoveredValue : value, step, selection);
         var hovered = isSelected(itemValue, hoveredValue, step, selection);
-        items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? toRound(itemValue - (step / 2), base) : itemValue), icon: props.icon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
+        items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? toRound(itemValue - (step / 2), base) : itemValue), icon: props.icon, svgIcon: props.svgIcon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
             half && (React.createElement("span", { className: 'k-rating-precision-complement', style: (_a = { width: '12px' }, _a[dir === 'rtl' ? 'right' : 'left'] = '50%', _a) },
-                React.createElement("span", { className: classNames('k-icon', (_b = {
-                            'k-i-star-outline': !props.icon
-                        },
-                        _b["".concat(props.icon, "-outline")] = props.icon,
-                        _b)) }))),
+                !(props.icon || props.svgIconOutline) && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon }),
+                (props.icon || props.svgIconOutline) && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))),
             half && (React.createElement("span", { className: 'k-rating-precision-part', style: { width: '12px' } },
-                React.createElement("span", { className: classNames('k-icon', (_c = {
-                            'k-i-star': !props.icon
-                        },
-                        _c["".concat(props.icon)] = props.icon,
-                        _c)) }))),
+                !(props.icon || props.svgIcon) && React.createElement(IconWrap, { name: 'star', icon: starIcon }),
+                (props.icon || props.svgIcon) && React.createElement(IconWrap, { name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon }))),
             half && (React.createElement("span", { style: { width: '24px', height: '24px', display: 'block' } })),
-            !half && (React.createElement("span", { className: classNames('k-icon', (_d = {
-                        'k-i-star': !props.icon && (hovered || (selected && !hovered)),
-                        'k-i-star-outline': !props.icon && (!hovered)
-                    },
-                    _d["".concat(props.icon)] = props.icon && (hovered || (selected && !hovered)),
-                    _d["".concat(props.icon, "-outline")] = props.icon && (!hovered),
-                    _d)) }))));
+            !half &&
+                (!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: 'star', icon: starIcon })) ||
+                (!(props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon })) ||
+                ((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: props.icon, icon: props.svgIcon })) ||
+                ((props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))));
     }
     return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-rating k-widget', {
             'k-rtl': dir === 'rtl',
@@ -265,6 +258,8 @@ var propTypes = {
     disabled: PropTypes.bool,
     half: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
+    svgIconOutline: svgIconPropType,
     ariaDescribedBy: PropTypes.string
 };
 var defaultProps = {

package/dist/es/signature/Signature.js

@@ -56,6 +56,7 @@ import * as React from 'react';
 import { messages, signatureClear, signatureMaximize, signatureMinimize } from '../messages';
 import { packageMetadata } from '../package-metadata';
 import { hasParent } from './utils';
+import { hyperlinkOpenIcon, xIcon } from '@progress/kendo-svg-icons';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
 var DEFAULT_POPUP_SCALE = 3;
@@ -335,10 +336,10 @@ export var Signature = React.forwardRef(function (directProps, target) {
             _a), props.className), onFocus: onFocus, onBlur: onBlur },
         React.createElement("div", { className: 'k-signature-canvas', ref: canvasRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), role: "img", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-disabled": props.disabled ? 'true' : undefined }),
         React.createElement("div", { className: 'k-signature-actions k-signature-actions-top' },
-            showMaximize && (React.createElement(Button, { className: 'k-signature-action k-signature-maximize', ref: maximizeButtonRef, icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
-            showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize k-rotate-180', ref: minimizeButtonRef, icon: 'hyperlink-open', shape: null, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
+            showMaximize && (React.createElement(Button, { className: 'k-signature-action k-signature-maximize', ref: maximizeButtonRef, icon: 'hyperlink-open', svgIcon: hyperlinkOpenIcon, fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
+            showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize k-rotate-180', ref: minimizeButtonRef, icon: 'hyperlink-open', svgIcon: hyperlinkOpenIcon, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
         !props.hideLine && (React.createElement("div", { className: 'k-signature-line', style: { zIndex: 2, pointerEvents: 'none' } })),
-        React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(Button, { className: 'k-signature-action k-signature-clear', icon: 'close', shape: null, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
+        React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(Button, { className: 'k-signature-action k-signature-clear', icon: 'x', svgIcon: xIcon, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
         open && (React.createElement(Dialog, { ref: dialogRef },
             React.createElement(Signature, __assign({}, props, popupSize(), { value: popupValue, maximized: true, exportScale: (1 / popupScale) * exportScale, open: false, onChange: onDialogChange, onClose: onDialogClose }))))));
 });

package/dist/es/slider/Slider.js

@@ -33,6 +33,7 @@ import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Button } from '@progress/kendo-react-buttons';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltUpIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 /** @hidden */
 var SliderWithoutContext = /** @class */ (function (_super) {
     __extends(SliderWithoutContext, _super);
@@ -56,9 +57,9 @@ var SliderWithoutContext = /** @class */ (function (_super) {
                 return props.children;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', title: props.decrementTitle, onClick: props.decrement }),
+                React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', svgIcon: _this.props.vertical ? caretAltDownIcon : caretAltLeftIcon, title: props.decrementTitle, onClick: props.decrement }),
                 props.children,
-                React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', title: props.incrementTitle, onClick: props.increment })));
+                React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', svgIcon: _this.props.vertical ? caretAltUpIcon : caretAltRightIcon, title: props.incrementTitle, onClick: props.increment })));
         };
         /**
          * @hidden

package/dist/npm/colors/ColorContrastLabels.js

@@ -20,6 +20,8 @@ var React = require("react");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 var color_parser_1 = require("./utils/color-parser");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -44,18 +46,18 @@ var ColorContrastLabels = /** @class */ (function (_super) {
         var success = (React.createElement("span", { className: "k-contrast-validation k-text-success" },
             passMessage,
             " ",
-            React.createElement("span", { className: "k-icon k-i-check" })));
+            React.createElement(kendo_react_common_1.IconWrap, { name: "check", icon: kendo_svg_icons_1.checkIcon })));
         var error = (React.createElement("span", { className: "k-contrast-validation k-text-error" },
             failMessage,
             " ",
-            React.createElement("span", { className: "k-icon k-i-close" })));
+            React.createElement(kendo_react_common_1.IconWrap, { name: "x", icon: kendo_svg_icons_1.xIcon })));
         return (React.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" },
             React.createElement("div", { className: "k-contrast-ratio" },
                 React.createElement("span", { className: "k-contrast-ratio-text" }, contrastText),
                 contrast >= 4.5 ? (React.createElement("span", { className: "k-contrast-validation k-text-success" },
-                    React.createElement("span", { className: "k-icon k-i-check" }),
-                    contrast >= 7 && React.createElement("span", { className: "k-icon k-i-check" }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
-                    React.createElement("span", { className: "k-icon k-i-close" })))),
+                    React.createElement(kendo_react_common_1.IconWrap, { name: "check", icon: kendo_svg_icons_1.checkIcon }),
+                    contrast >= 7 && React.createElement(kendo_react_common_1.IconWrap, { name: "check", icon: kendo_svg_icons_1.checkIcon }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
+                    React.createElement(kendo_react_common_1.IconWrap, { name: "x", icon: kendo_svg_icons_1.xIcon })))),
             React.createElement("div", null,
                 React.createElement("span", null, aaText),
                 contrast >= 4.5 ? success : error),

package/dist/npm/colors/ColorInput.js

@@ -31,6 +31,7 @@ var main_1 = require("../main");
 var HexInput_1 = require("./HexInput");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 /**
@@ -71,7 +72,7 @@ var ColorInput = /** @class */ (function (_super) {
         var toggleButtonMessage = localizationService.toLanguageString(messages_1.colorGradientToggleInputsButton, messages_1.messages[messages_1.colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', svgIcon: kendo_svg_icons_1.caretAltExpandIcon, className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
                     React.createElement("span", { className: "k-hex-value k-textbox k-input" },

package/dist/npm/colors/ColorPicker.js

@@ -21,6 +21,7 @@ var Picker_1 = require("./Picker");
 var ColorGradient_1 = require("./ColorGradient");
 var ColorPalette_1 = require("./ColorPalette");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var messages_1 = require("../messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 /**
@@ -63,11 +64,11 @@ exports.ColorPickerPropsContext = (0, kendo_react_common_1.createPropsContext)()
  * ```
  */
 exports.ColorPicker = React.forwardRef(function (directProps, target) {
-    var _a, _b;
+    var _a;
     (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var props = (0, kendo_react_common_1.usePropsContext)(exports.ColorPickerPropsContext, directProps);
     var localization = (0, kendo_react_intl_1.useLocalization)();
-    var _c = props.size, size = _c === void 0 ? defaultProps.size : _c, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.fillMode, fillMode = _e === void 0 ? defaultProps.fillMode : _e, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
+    var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);
     var paletteRef = React.useRef(null);
@@ -84,9 +85,9 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
         actionElement: buttonRef.current,
         focus: focusElement
     }); });
-    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = React.useState(props.defaultValue), stateValue = _g[0], setStateValue = _g[1];
-    var _h = React.useState(false), stateOpen = _h[0], setStateOpen = _h[1];
+    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _f = React.useState(props.defaultValue), stateValue = _f[0], setStateValue = _f[1];
+    var _g = React.useState(false), stateOpen = _g[0], setStateOpen = _g[1];
     var isValueControlled = isControlled(props.value);
     var isOpenControlled = isControlled(props.open);
     var value = isValueControlled ? props.value : stateValue;
@@ -210,12 +211,11 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
         React.createElement(Picker_1.Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-input-inner' },
                 React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-value-icon', 'k-color-preview', {
                         'k-no-color': !value,
-                        'k-icon-color-preview': (icon || iconClassName)
+                        'k-icon-color-preview': (icon || svgIcon || iconClassName)
                     }) },
-                    (iconClassName || icon) && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-color-preview-icon', iconClassName, (_b = {},
-                            _b["k-icon k-i-".concat(icon)] = (icon && !iconClassName),
-                            _b)) }),
-                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', "aria-label": localization.toLanguageString(messages_1.colorPickerDropdownButtonAriaLabel, messages_1.messages[messages_1.colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
+                    iconClassName && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-color-preview-icon', iconClassName) }),
+                    !iconClassName && (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: icon, icon: svgIcon }),
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: kendo_svg_icons_1.caretAltDownIcon, "aria-label": localization.toLanguageString(messages_1.colorPickerDropdownButtonAriaLabel, messages_1.messages[messages_1.colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient_1.ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
                 (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette_1.ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });
@@ -226,6 +226,8 @@ exports.ColorPicker.propTypes = {
     view: PropTypes.oneOf(['gradient', 'palette', 'combo']),
     dir: PropTypes.string,
     id: PropTypes.string,
+    icon: PropTypes.string,
+    svgIcon: kendo_react_common_1.svgIconPropType,
     ariaLabelledBy: PropTypes.string,
     ariaDescribedBy: PropTypes.string,
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),

package/dist/npm/colors/FlatColorPicker.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 kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var main_1 = require("../main");
 var package_metadata_1 = require("../package-metadata");
 var messages_1 = require("../messages");
@@ -68,15 +69,12 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
                 React.createElement("div", { className: "k-coloreditor-header k-hstack" },
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
-                                React.createElement("span", { className: "k-icon k-i-color-canvas" })),
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
-                                React.createElement("span", { className: "k-icon k-i-palette" })))),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: kendo_svg_icons_1.dropletSliderIcon }),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: kendo_svg_icons_1.paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
-                                React.createElement("span", { className: "k-icon k-i-droplet-slash" })),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, icon: "droplet-slash", svgIcon: kendo_svg_icons_1.dropletSlashIcon }),
                         (props.showPreview && defaultProps.showPreview) &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),

package/dist/npm/colors/interfaces/ColorPickerProps.d.ts

@@ -6,6 +6,7 @@ import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerGradientSettings } from './ColorPickerGradientSettings';
 import { ColorPickerView } from './ColorPickerView';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the props of the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -56,6 +57,10 @@ export interface ColorPickerProps {
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
      */
     icon?: string;
+    /**
+     * Defines the SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The class name which displays an icon in the ColorPicker button
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).

package/dist/npm/input/InputValidationIcon.d.ts

@@ -1,14 +1,14 @@
-import { IconHandle, IconProps } from '@progress/kendo-react-common';
+import { IconHandle, SvgIconHandle, IconProps, SvgIconProps } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represent the `ref` of the `InputValidationIcon` component.
  */
-export declare type InputValidationIconHandle = IconHandle;
+export declare type InputValidationIconHandle = IconHandle & SvgIconHandle;
 /**
  * Represents the `props` of the `InputValidationIcon` component.
  */
-export declare type InputValidationIconProps = IconProps;
+export declare type InputValidationIconProps = IconProps & SvgIconProps;
 /**
  * Represents the KendoReact InputValidationIcon component.
  */
-export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconHandle>>;
+export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & SvgIconProps & React.RefAttributes<InputValidationIconHandle>>;

package/dist/npm/input/InputValidationIcon.js

@@ -18,6 +18,6 @@ var React = require("react");
  * Represents the KendoReact InputValidationIcon component.
  */
 exports.InputValidationIcon = React.forwardRef(function (props, ref) {
-    return React.createElement(kendo_react_common_1.Icon, __assign({ ref: ref }, props, { className: (0, kendo_react_common_1.classNames)('k-input-validation-icon', props.className) }));
+    return React.createElement(kendo_react_common_1.IconWrap, __assign({ ref: ref }, props, { className: (0, kendo_react_common_1.classNames)('k-input-validation-icon', props.className) }));
 });
 exports.InputValidationIcon.displayName = 'KendoReactInputValidationIcon';