@laser-ui/components 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.4.0](https://github.com/laser-ui/laser-ui/compare/v0.3.0...v0.4.0) (2023-12-06)
+
+### Features
+
+- update `vite-plugin-svgr` to **v4** ([5d05979](https://github.com/laser-ui/laser-ui/commit/5d0597973f3f41968bf70542e96eb9318f439328))
+
 # [0.3.0](https://github.com/laser-ui/laser-ui/compare/v0.2.2...v0.3.0) (2023-11-03)
 
 **Note:** Version bump only for package @laser-ui/components

package/accordion/Accordion.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
 import { isNull, isUndefined, nth } from 'lodash';
 import { useId } from 'react';
 import { CLASSES } from './vars';

package/alert/Alert.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useControlled, useStyled, useTranslation } from '../hooks';

package/cascader/Cascader.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CascaderPanel } from './internal/CascaderPanel';

package/cascader/internal/CascaderPanel.js

@@ -2,7 +2,7 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/date-picker/DatePicker.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CalendarTodayOutlined } from '@material-design-icons/svg/outlined/calendar_today.svg';
-import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CalendarTodayOutlined from '@material-design-icons/svg/outlined/calendar_today.svg?react';
+import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isArray, isBoolean, isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { DatePickerPanel } from './internal/DatePickerPanel';

package/date-picker/internal/DatePickerPanel.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
-import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
+import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import dayjs from '../../dayjs';
 import { useTranslation } from '../../hooks';

package/drawer/DrawerHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/dropdown/internal/DropdownSub.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import { useJSS, useTranslation } from '../../hooks';

package/fab/FabBacktop.js

@@ -2,7 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEvent, useIsomorphicLayoutEffect, useRefExtra, useResize } from '@laser-ui/hooks';
 import { scrollTo, toPx } from '@laser-ui/utils';
-import { ReactComponent as VerticalAlignTopOutlined } from '@material-design-icons/svg/outlined/vertical_align_top.svg';
+import VerticalAlignTopOutlined from '@material-design-icons/svg/outlined/vertical_align_top.svg?react';
 import { isString } from 'lodash';
 import { cloneElement, useRef, useState } from 'react';
 import { FabButton } from './FabButton';

package/fab/FabButton.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
 import { forwardRef } from 'react';
 import { BUTTON_CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';

package/form/FormItem.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
-import { ReactComponent as ErrorFilled } from '@material-design-icons/svg/filled/error.svg';
-import { ReactComponent as HelpOutlineOutlined } from '@material-design-icons/svg/outlined/help_outline.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
+import ErrorFilled from '@material-design-icons/svg/filled/error.svg?react';
+import HelpOutlineOutlined from '@material-design-icons/svg/outlined/help_outline.svg?react';
 import { isBoolean, isFunction, isNull, isNumber, isString } from 'lodash';
 import { useContext, useId, useRef } from 'react';
 import { FormError } from './internal/FormError';

package/image/ImagePreview.js

@@ -2,12 +2,12 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEvent, useImmer, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as Rotate90DegreesCwOutlined } from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg';
-import { ReactComponent as ZoomInOutlined } from '@material-design-icons/svg/outlined/zoom_in.svg';
-import { ReactComponent as ZoomOutOutlined } from '@material-design-icons/svg/outlined/zoom_out.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import Rotate90DegreesCwOutlined from '@material-design-icons/svg/outlined/rotate_90_degrees_cw.svg?react';
+import ZoomInOutlined from '@material-design-icons/svg/outlined/zoom_in.svg?react';
+import ZoomOutOutlined from '@material-design-icons/svg/outlined/zoom_out.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { useRef, useState } from 'react';
 import { PREVIEW_CLASSES } from './vars';

package/input/Input.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useForkRef } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as VisibilityOutlined } from '@material-design-icons/svg/outlined/visibility.svg';
-import { ReactComponent as VisibilityOffOutlined } from '@material-design-icons/svg/outlined/visibility_off.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import VisibilityOutlined from '@material-design-icons/svg/outlined/visibility.svg?react';
+import VisibilityOffOutlined from '@material-design-icons/svg/outlined/visibility_off.svg?react';
 import { useRef } from 'react';
 import { InputNumber } from './InputNumber';
 import { CLASSES } from './vars';

package/input/InputNumber.js

@@ -2,9 +2,9 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useForceUpdate, useForkRef, useRefExtra } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as KeyboardArrowUpOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import KeyboardArrowUpOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_up.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { useRef } from 'react';
 import { CLASSES } from './vars';

package/modal/ModalAlert.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';
 import { Icon } from '../icon';

package/modal/ModalHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/notification/Notification.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useMount } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laser-ui/components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React components.",
   "keywords": [
     "ui",
@@ -26,8 +26,8 @@
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {
-    "@laser-ui/hooks": "0.3.0",
-    "@laser-ui/utils": "0.3.0",
+    "@laser-ui/hooks": "0.4.0",
+    "@laser-ui/utils": "0.4.0",
     "@material-design-icons/svg": "^0.14.12",
     "jss": "^10.10.0",
     "jss-preset-default": "^10.10.0",
@@ -45,5 +45,5 @@
     "access": "public",
     "directory": "../../dist/libs/components"
   },
-  "gitHead": "4fe0b462c868d1b30b645af80d9e9690f3cefb5c"
+  "gitHead": "434cf3de2a91e6557cf77801eda230c46e137ec9"
 }

package/pagination/Pagination.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
-import { ReactComponent as KeyboardDoubleArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg';
-import { ReactComponent as KeyboardDoubleArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg';
-import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
+import KeyboardDoubleArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_left.svg?react';
+import KeyboardDoubleArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_double_arrow_right.svg?react';
+import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isNull, isNumber } from 'lodash';
 import { Fragment, cloneElement, useRef, useState } from 'react';
 import { buttonProps } from './utils';

package/popover/PopoverHeader.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { Children } from 'react';
 import { CLASSES } from './vars';
 import { Button } from '../button';

package/progress/Progress.js

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CheckCircleFilled } from '@material-design-icons/svg/filled/check_circle.svg';
-import { ReactComponent as WarningFilled } from '@material-design-icons/svg/filled/warning.svg';
-import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CheckCircleFilled from '@material-design-icons/svg/filled/check_circle.svg?react';
+import WarningFilled from '@material-design-icons/svg/filled/warning.svg?react';
+import CheckOutlined from '@material-design-icons/svg/outlined/check.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId } from 'react';
 import { CLASSES } from './vars';

package/rating/Rating.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as StarFilled } from '@material-design-icons/svg/filled/star.svg';
+import StarFilled from '@material-design-icons/svg/filled/star.svg?react';
 import { isFunction } from 'lodash';
 import { useId, useState } from 'react';
 import { RatingStar } from './internal/RatingStar';

package/select/Select.js

@@ -3,11 +3,11 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested, scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { CLASSES, IS_CREATED } from './vars';

package/slides/Slides.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useAsync, useEvent, useRefExtra } from '@laser-ui/hooks';
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isBoolean, isNumber, isUndefined, nth } from 'lodash';
 import { useEffect, useId, useRef, useState } from 'react';
 import { CLASSES } from './vars';

package/stepper/Stepper.js

@@ -2,8 +2,8 @@ import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckOutlined } from '@material-design-icons/svg/outlined/check.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
+import CheckOutlined from '@material-design-icons/svg/outlined/check.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { CLASSES } from './vars';
 import { useComponentProps, useStyled } from '../hooks';

package/table/TableFilter.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { CLASSES } from './vars';
 import { Button } from '../button';
 import { useComponentProps, useStyled, useTranslation } from '../hooks';

package/tabs/Tabs.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useEventCallback, useIsomorphicLayoutEffect, useResize } from '@laser-ui/hooks';
 import { checkScrollEnd, findNested } from '@laser-ui/utils';
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as MoreHorizOutlined } from '@material-design-icons/svg/outlined/more_horiz.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import MoreHorizOutlined from '@material-design-icons/svg/outlined/more_horiz.svg?react';
 import { isUndefined, nth } from 'lodash';
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { CLASSES } from './vars';

package/time-picker/TimePicker.js

@@ -1,9 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useEvent, useEventCallback, useForceUpdate, useForkRef, useImmer, useResize } from '@laser-ui/hooks';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as AccessTimeOutlined } from '@material-design-icons/svg/outlined/access_time.svg';
-import { ReactComponent as SwapHorizOutlined } from '@material-design-icons/svg/outlined/swap_horiz.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import AccessTimeOutlined from '@material-design-icons/svg/outlined/access_time.svg?react';
+import SwapHorizOutlined from '@material-design-icons/svg/outlined/swap_horiz.svg?react';
 import { isNull, isUndefined } from 'lodash';
 import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 import { TimePickerPanel } from './internal/TimePickerPanel';

package/toast/Toast.js

@@ -2,11 +2,11 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useAsync, useMount } from '@laser-ui/hooks';
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as CheckCircleOutlined } from '@material-design-icons/svg/outlined/check_circle.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as HighlightOffOutlined } from '@material-design-icons/svg/outlined/highlight_off.svg';
-import { ReactComponent as InfoOutlined } from '@material-design-icons/svg/outlined/info.svg';
-import { ReactComponent as WarningAmberOutlined } from '@material-design-icons/svg/outlined/warning_amber.svg';
+import CheckCircleOutlined from '@material-design-icons/svg/outlined/check_circle.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import HighlightOffOutlined from '@material-design-icons/svg/outlined/highlight_off.svg?react';
+import InfoOutlined from '@material-design-icons/svg/outlined/info.svg?react';
+import WarningAmberOutlined from '@material-design-icons/svg/outlined/warning_amber.svg?react';
 import { isUndefined } from 'lodash';
 import { useId, useRef } from 'react';
 import { CLASSES, TTANSITION_DURING } from './vars';

package/transfer/Transfer.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as KeyboardArrowLeftOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg';
-import { ReactComponent as KeyboardArrowRightOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg';
+import KeyboardArrowLeftOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_left.svg?react';
+import KeyboardArrowRightOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_right.svg?react';
 import { isUndefined } from 'lodash';
 import { useMemo } from 'react';
 import { TransferPanel } from './internal/TransferPanel';

package/transfer/internal/TransferPanel.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { checkNodeExist } from '@laser-ui/utils';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNumber } from 'lodash';
 import { useCallback, useId, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/tree/internal/TreePanel.js

@@ -3,9 +3,9 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEventCallback } from '@laser-ui/hooks';
 import { scrollIntoViewIfNeeded } from '@laser-ui/utils';
-import { ReactComponent as AddBoxOutlined } from '@material-design-icons/svg/outlined/add_box.svg';
-import { ReactComponent as ArrowRightOutlined } from '@material-design-icons/svg/outlined/arrow_right.svg';
-import { ReactComponent as IndeterminateCheckBoxOutlined } from '@material-design-icons/svg/outlined/indeterminate_check_box.svg';
+import AddBoxOutlined from '@material-design-icons/svg/outlined/add_box.svg?react';
+import ArrowRightOutlined from '@material-design-icons/svg/outlined/arrow_right.svg?react';
+import IndeterminateCheckBoxOutlined from '@material-design-icons/svg/outlined/indeterminate_check_box.svg?react';
 import { isUndefined } from 'lodash';
 import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
 import { Checkbox } from '../../checkbox';

package/tree-select/TreeSelect.js

@@ -2,10 +2,10 @@ import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEvent, useEventCallback, useForkRef, useResize } from '@laser-ui/hooks';
 import { findNested } from '@laser-ui/utils';
-import { ReactComponent as CancelFilled } from '@material-design-icons/svg/filled/cancel.svg';
-import { ReactComponent as CloseOutlined } from '@material-design-icons/svg/outlined/close.svg';
-import { ReactComponent as KeyboardArrowDownOutlined } from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg';
-import { ReactComponent as SearchOutlined } from '@material-design-icons/svg/outlined/search.svg';
+import CancelFilled from '@material-design-icons/svg/filled/cancel.svg?react';
+import CloseOutlined from '@material-design-icons/svg/outlined/close.svg?react';
+import KeyboardArrowDownOutlined from '@material-design-icons/svg/outlined/keyboard_arrow_down.svg?react';
+import SearchOutlined from '@material-design-icons/svg/outlined/search.svg?react';
 import { isNull, isNumber, isUndefined } from 'lodash';
 import { createElement, forwardRef, useId, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { TreeSelectSearchPanel } from './internal/TreeSelectSearchPanel';

package/upload/UploadAction.js

@@ -1,8 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { saveFile } from '@laser-ui/utils';
-import { ReactComponent as DeleteOutlineOutlined } from '@material-design-icons/svg/outlined/delete_outline.svg';
-import { ReactComponent as FileDownloadOutlined } from '@material-design-icons/svg/outlined/file_download.svg';
+import DeleteOutlineOutlined from '@material-design-icons/svg/outlined/delete_outline.svg?react';
+import FileDownloadOutlined from '@material-design-icons/svg/outlined/file_download.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef } from 'react';
 import { ACTION_CLASSES } from './vars';

package/upload/UploadButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ReactComponent as AddOutlined } from '@material-design-icons/svg/outlined/add.svg';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import AddOutlined from '@material-design-icons/svg/outlined/add.svg?react';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { Children, cloneElement, forwardRef } from 'react';
 import { UploadAction } from './UploadAction';
 import { UploadPreviewAction } from './UploadPreviewAction';

package/upload/UploadList.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as AttachFileOutlined } from '@material-design-icons/svg/outlined/attach_file.svg';
+import AttachFileOutlined from '@material-design-icons/svg/outlined/attach_file.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPicture.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { isNumber } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPictureList.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useImmer } from '@laser-ui/hooks';
-import { ReactComponent as InsertDriveFileTwoTone } from '@material-design-icons/svg/two-tone/insert_drive_file.svg';
+import InsertDriveFileTwoTone from '@material-design-icons/svg/two-tone/insert_drive_file.svg?react';
 import { isNumber, isUndefined } from 'lodash';
 import { Children, cloneElement, useContext } from 'react';
 import { UploadAction } from './UploadAction';

package/upload/UploadPreviewAction.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ReactComponent as VisibilityOutlinedIcon } from '@material-design-icons/svg/outlined/visibility.svg';
+import VisibilityOutlinedIcon from '@material-design-icons/svg/outlined/visibility.svg?react';
 import { isUndefined } from 'lodash';
 import { forwardRef } from 'react';
 import { ACTION_CLASSES } from './vars';