Change icon SVG imports to use a default import (#28709)

app/javascript/__mocks__/svg.js

@@ -1,3 +1,3 @@
-// eslint-disable-next-line import/no-anonymous-default-export
-export default 'SvgrURL';
-export const ReactComponent = 'div';
+const ReactComponent = 'div';
+
+export default ReactComponent;

app/javascript/mastodon/components/attachment_list.jsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import LinkIcon from '@material-symbols/svg-600/outlined/link.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/components/badge.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as GroupsIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg';
-import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/outlined/smart_toy.svg';
+import GroupsIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import PersonIcon from '@material-symbols/svg-600/outlined/person.svg?react';
+import SmartToyIcon from '@material-symbols/svg-600/outlined/smart_toy.svg?react';
 
 
 export const Badge = ({ icon, label, domain }) => (
@@ -31,4 +31,4 @@ export const GroupBadge = () => (
 
 export const AutomatedBadge = () => (
   <Badge icon={<SmartToyIcon />} label={<FormattedMessage id='account.badges.bot' defaultMessage='Automated' />} />
-);
+);

app/javascript/mastodon/components/column_back_button.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
+import ArrowBackIcon from '@material-symbols/svg-600/outlined/arrow_back.svg?react';
 
 import { Icon } from 'mastodon/components/icon';
 import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';

app/javascript/mastodon/components/column_header.jsx

@@ -6,12 +6,12 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 import { withRouter } from 'react-router-dom';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg';
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import ArrowBackIcon from '@material-symbols/svg-600/outlined/arrow_back.svg?react';
+import ChevronLeftIcon from '@material-symbols/svg-600/outlined/chevron_left.svg?react';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import TuneIcon from '@material-symbols/svg-600/outlined/tune.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 import { ButtonInTabsBar, useColumnsContext } from 'mastodon/features/ui/util/columns_context';

app/javascript/mastodon/components/copy_icon_button.jsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 
 import { useDispatch } from 'react-redux';
 
-import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
+import ContentCopyIcon from '@material-symbols/svg-600/outlined/content_copy.svg?react';
 
 import { showAlert } from 'mastodon/actions/alerts';
 import { IconButton } from 'mastodon/components/icon_button';

app/javascript/mastodon/components/dismissable_banner.tsx

@@ -8,7 +8,7 @@ import { useCallback, useState, useEffect } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { changeSetting } from 'mastodon/actions/settings';
 import { bannerSettings } from 'mastodon/settings';

app/javascript/mastodon/components/domain.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
+import LockOpenIcon from '@material-symbols/svg-600/outlined/lock_open.svg?react';
 
 import { IconButton } from './icon_button';
 

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 

app/javascript/mastodon/components/edited_timestamp/index.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as ArrowDropDownIcon } from '@material-symbols/svg-600/outlined/arrow_drop_down.svg';
+import ArrowDropDownIcon from '@material-symbols/svg-600/outlined/arrow_drop_down.svg?react';
 
 import { openModal } from 'mastodon/actions/modal';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/components/icon.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg';
+import CheckBoxOutlineBlankIcon from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg?react';
 
 import { isProduction } from 'mastodon/utils/environment';
 

app/javascript/mastodon/components/load_gap.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
 
 import { Icon } from 'mastodon/components/icon';
 

app/javascript/mastodon/components/media_gallery.jsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { is } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
 import { debounce } from 'lodash';
 
 import { Blurhash } from 'mastodon/components/blurhash';

app/javascript/mastodon/components/picture_in_picture_placeholder.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelPresentationIcon } from '@material-symbols/svg-600/outlined/cancel_presentation.svg';
+import CancelPresentationIcon from '@material-symbols/svg-600/outlined/cancel_presentation.svg?react';
 
 import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/components/poll.jsx

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
 import escapeTextContentForBrowser from 'escape-html';
 import spring from 'react-motion/lib/spring';
 

app/javascript/mastodon/components/status.jsx

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import PushPinIcon from '@material-symbols/svg-600/outlined/push_pin.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
 import { HotKeys } from 'react-hotkeys';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/components/status_action_bar.jsx

@@ -9,18 +9,18 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
-import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
-
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
+import BookmarkIcon from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
+import BookmarkBorderIcon from '@material-symbols/svg-600/outlined/bookmark.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
+import StarBorderIcon from '@material-symbols/svg-600/outlined/star.svg?react';
+import VisibilityIcon from '@material-symbols/svg-600/outlined/visibility.svg?react';
+
+import RepeatDisabledIcon from 'mastodon/../svg-icons/repeat_disabled.svg?react';
+import RepeatPrivateIcon from 'mastodon/../svg-icons/repeat_private.svg?react';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 

app/javascript/mastodon/components/status_content.jsx

@@ -9,7 +9,7 @@ import { Link, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 import PollContainer from 'mastodon/containers/poll_container';

app/javascript/mastodon/components/verified_badge.tsx

@@ -1,4 +1,4 @@
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
 
 import { Icon } from './icon';
 

app/javascript/mastodon/components/visibility_icon.tsx

@@ -1,9 +1,9 @@
 import { defineMessages, useIntl } from 'react-intl';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
+import LockOpenIcon from '@material-symbols/svg-600/outlined/lock_open.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
 
 import { Icon } from './icon';
 

app/javascript/mastodon/features/about/index.jsx

@@ -10,8 +10,8 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
-import { ReactComponent as ExpandMoreIcon } from '@material-symbols/svg-600/outlined/expand_more.svg';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
+import ExpandMoreIcon from '@material-symbols/svg-600/outlined/expand_more.svg?react';
 
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'mastodon/actions/server';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/account/components/follow_request_note.jsx

@@ -3,8 +3,8 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/features/account/components/header.jsx

@@ -9,12 +9,12 @@ import { NavLink, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.svg';
-import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active-fill.svg';
-import { ReactComponent as ShareIcon } from '@material-symbols/svg-600/outlined/share.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications.svg?react';
+import NotificationsActiveIcon from '@material-symbols/svg-600/outlined/notifications_active-fill.svg?react';
+import ShareIcon from '@material-symbols/svg-600/outlined/share.svg?react';
 
 import { Avatar } from 'mastodon/components/avatar';
 import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';

app/javascript/mastodon/features/account_gallery/components/media_item.jsx

@@ -5,9 +5,9 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AudiotrackIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import AudiotrackIcon from '@material-symbols/svg-600/outlined/music_note.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
 
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/audio/index.jsx

@@ -7,12 +7,12 @@ import classNames from 'classnames';
 
 import { is } from 'immutable';
 
-import { ReactComponent as DownloadIcon } from '@material-symbols/svg-600/outlined/download.svg';
-import { ReactComponent as PauseIcon } from '@material-symbols/svg-600/outlined/pause.svg';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off-fill.svg';
-import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up-fill.svg';
+import DownloadIcon from '@material-symbols/svg-600/outlined/download.svg?react';
+import PauseIcon from '@material-symbols/svg-600/outlined/pause.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow-fill.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
+import VolumeOffIcon from '@material-symbols/svg-600/outlined/volume_off-fill.svg?react';
+import VolumeUpIcon from '@material-symbols/svg-600/outlined/volume_up-fill.svg?react';
 import { throttle, debounce } from 'lodash';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/blocks/index.jsx

@@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block-fill.svg';
+import BlockIcon from '@material-symbols/svg-600/outlined/block-fill.svg?react';
 import { debounce } from 'lodash';
 
 import { fetchBlocks, expandBlocks } from '../../actions/blocks';

app/javascript/mastodon/features/bookmarked_statuses/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
+import BookmarksIcon from '@material-symbols/svg-600/outlined/bookmarks-fill.svg?react';
 import { debounce } from 'lodash';
 
 import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'mastodon/actions/bookmarks';

app/javascript/mastodon/features/community_timeline/index.jsx

@@ -7,7 +7,7 @@ import { Helmet } from 'react-helmet';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
 
 import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import { domain } from 'mastodon/initial_state';

app/javascript/mastodon/features/compose/components/action_bar.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
+import MenuIcon from '@material-symbols/svg-600/outlined/menu.svg?react';
 
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
 import { length } from 'stringz';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/compose/components/poll_button.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import InsertChartIcon from '@material-symbols/svg-600/outlined/insert_chart.svg?react';
 
 import { IconButton } from '../../../components/icon_button';
 

app/javascript/mastodon/features/compose/components/poll_form.jsx

@@ -8,8 +8,8 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import AutosuggestInput from 'mastodon/components/autosuggest_input';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx

@@ -6,10 +6,10 @@ import { injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
 
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg';
-import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import LockIcon from '@material-symbols/svg-600/outlined/lock.svg?react';
+import LockOpenIcon from '@material-symbols/svg-600/outlined/lock_open.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 

app/javascript/mastodon/features/compose/components/reply_indicator.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import AttachmentList from 'mastodon/components/attachment_list';
 import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';

app/javascript/mastodon/features/compose/components/search.jsx

@@ -8,9 +8,9 @@ import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import CancelIcon from '@material-symbols/svg-600/outlined/cancel-fill.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 import { domain, searchEnabled } from 'mastodon/initial_state';

app/javascript/mastodon/features/compose/components/search_results.jsx

@@ -5,10 +5,10 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import FindInPageIcon from '@material-symbols/svg-600/outlined/find_in_page.svg?react';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 import { LoadMore } from 'mastodon/components/load_more';

app/javascript/mastodon/features/compose/components/upload.jsx

@@ -5,9 +5,9 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
+import InfoIcon from '@material-symbols/svg-600/outlined/info.svg?react';
 import spring from 'react-motion/lib/spring';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/compose/components/upload_button.jsx

@@ -6,7 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
+import AddPhotoAlternateIcon from '@material-symbols/svg-600/outlined/add_photo_alternate.svg?react';
 
 import { IconButton } from '../../../components/icon_button';
 

app/javascript/mastodon/features/compose/components/upload_progress.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg';
+import UploadFileIcon from '@material-symbols/svg-600/outlined/upload_file.svg?react';
 import spring from 'react-motion/lib/spring';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/compose/index.jsx

@@ -9,13 +9,13 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as LogoutIcon } from '@material-symbols/svg-600/outlined/logout.svg';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import LogoutIcon from '@material-symbols/svg-600/outlined/logout.svg?react';
+import MenuIcon from '@material-symbols/svg-600/outlined/menu.svg?react';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications-fill.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
+import SettingsIcon from '@material-symbols/svg-600/outlined/settings-fill.svg?react';
 import spring from 'react-motion/lib/spring';
 
 import { openModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/direct_timeline/components/conversation.jsx

@@ -8,8 +8,8 @@ import { Link, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
 import { HotKeys } from 'react-hotkeys';
 
 import AttachmentList from 'mastodon/components/attachment_list';

app/javascript/mastodon/features/direct_timeline/index.jsx

@@ -7,7 +7,7 @@ import { Helmet } from 'react-helmet';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
 
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { mountConversations, unmountConversations, expandConversations } from 'mastodon/actions/conversations';

app/javascript/mastodon/features/directory/index.jsx

@@ -9,7 +9,7 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
 
 import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodon/actions/columns';
 import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';

app/javascript/mastodon/features/domain_blocks/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block-fill.svg';
+import BlockIcon from '@material-symbols/svg-600/outlined/block-fill.svg?react';
 import { debounce } from 'lodash';
 
 import { fetchDomainBlocks, expandDomainBlocks } from '../../actions/domain_blocks';

app/javascript/mastodon/features/explore/index.jsx

@@ -8,8 +8,8 @@ import { NavLink, Switch, Route } from 'react-router-dom';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

app/javascript/mastodon/features/explore/results.jsx

@@ -9,9 +9,9 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import FindInPageIcon from '@material-symbols/svg-600/outlined/find_in_page.svg?react';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 
 import { submitSearch, expandSearch } from 'mastodon/actions/search';
 import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';

app/javascript/mastodon/features/favourited_statuses/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
 import { debounce } from 'lodash';
 
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';

app/javascript/mastodon/features/favourites/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
+import RefreshIcon from '@material-symbols/svg-600/outlined/refresh.svg?react';
 import { debounce } from 'lodash';
 
 import { fetchFavourites, expandFavourites } from 'mastodon/actions/interactions';

app/javascript/mastodon/features/filters/select_filter.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
 import fuzzysort from 'fuzzysort';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/firehose/index.jsx

@@ -6,7 +6,7 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';
 
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
 
 import { addColumn } from 'mastodon/actions/columns';
 import { changeSetting } from 'mastodon/actions/settings';

app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx

@@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';

app/javascript/mastodon/features/follow_requests/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
 import { debounce } from 'lodash';
 
 import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';

app/javascript/mastodon/features/followed_tags/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 import { debounce } from 'lodash';
 
 import { expandFollowedHashtags, fetchFollowedHashtags } from 'mastodon/actions/tags';

app/javascript/mastodon/features/getting_started/components/announcements.jsx

@@ -9,9 +9,9 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import ChevronLeftIcon from '@material-symbols/svg-600/outlined/chevron_left.svg?react';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
 import ReactSwipeableViews from 'react-swipeable-views';

app/javascript/mastodon/features/getting_started/index.jsx

@@ -9,17 +9,17 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
-import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
-import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import BookmarksIcon from '@material-symbols/svg-600/outlined/bookmarks-fill.svg?react';
+import PeopleIcon from '@material-symbols/svg-600/outlined/group.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
+import MenuIcon from '@material-symbols/svg-600/outlined/menu.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
+import SettingsIcon from '@material-symbols/svg-600/outlined/settings-fill.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/hashtag_timeline/index.jsx

@@ -8,7 +8,7 @@ import { Helmet } from 'react-helmet';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 import { isEqual } from 'lodash';
 
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -10,8 +10,8 @@ import { createSelector } from '@reduxjs/toolkit';
 import { List as ImmutableList } from 'immutable';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CampaignIcon } from '@material-symbols/svg-600/outlined/campaign.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import CampaignIcon from '@material-symbols/svg-600/outlined/campaign.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
 
 import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
 import { IconWithBadge } from 'mastodon/components/icon_with_badge';

app/javascript/mastodon/features/interaction_modal/index.jsx

@@ -7,10 +7,10 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
 import { throttle, escapeRegExp } from 'lodash';
 
 import { openModal, closeModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/keyboard_shortcuts/index.jsx

@@ -6,7 +6,7 @@ import { Helmet } from 'react-helmet';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg';
+import InfoIcon from '@material-symbols/svg-600/outlined/info.svg?react';
 
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';

app/javascript/mastodon/features/list_adder/components/list.jsx

@@ -6,9 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/features/list_editor/components/account.jsx

@@ -6,8 +6,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import AddIcon from '@material-symbols/svg-600/outlined/add.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
 import { Avatar } from '../../../components/avatar';

app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
 
 import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
 import { IconButton } from '../../../components/icon_button';

app/javascript/mastodon/features/list_editor/components/search.jsx

@@ -7,8 +7,8 @@ import classNames from 'classnames';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import CancelIcon from '@material-symbols/svg-600/outlined/cancel.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -9,9 +9,9 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import DeleteIcon from '@material-symbols/svg-600/outlined/delete.svg?react';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
 import Toggle from 'react-toggle';
 
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';

app/javascript/mastodon/features/lists/index.jsx

@@ -9,7 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
 
 import { fetchLists } from 'mastodon/actions/lists';
 import Column from 'mastodon/components/column';

app/javascript/mastodon/features/mutes/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg';
+import VolumeOffIcon from '@material-symbols/svg-600/outlined/volume_off.svg?react';
 import { debounce } from 'lodash';
 
 import { fetchMutes, expandMutes } from '../../actions/mutes';

app/javascript/mastodon/features/notifications/components/clear_column_button.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
-import { ReactComponent as DeleteForeverIcon } from '@material-symbols/svg-600/outlined/delete_forever.svg';
+import DeleteForeverIcon from '@material-symbols/svg-600/outlined/delete_forever.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/features/notifications/components/filter_bar.jsx

@@ -3,12 +3,12 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import InsertChartIcon from '@material-symbols/svg-600/outlined/insert_chart.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/features/notifications/components/follow_request.jsx

@@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/check.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { Avatar } from 'mastodon/components/avatar';
 import { DisplayName } from 'mastodon/components/display_name';

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -8,14 +8,14 @@ import { Link, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
-import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/flag-fill.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
-import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person-fill.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
+import FlagIcon from '@material-symbols/svg-600/outlined/flag-fill.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import InsertChartIcon from '@material-symbols/svg-600/outlined/insert_chart.svg?react';
+import PersonIcon from '@material-symbols/svg-600/outlined/person-fill.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add-fill.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
 import { HotKeys } from 'react-hotkeys';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx

@@ -5,8 +5,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
-import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
+import TuneIcon from '@material-symbols/svg-600/outlined/tune.svg?react';
 
 import { requestBrowserPermission } from 'mastodon/actions/notifications';
 import { changeSetting } from 'mastodon/actions/settings';

app/javascript/mastodon/features/notifications/index.jsx

@@ -10,8 +10,8 @@ import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as DoneAllIcon } from '@material-symbols/svg-600/outlined/done_all.svg';
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
+import DoneAllIcon from '@material-symbols/svg-600/outlined/done_all.svg?react';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications-fill.svg?react';
 import { debounce } from 'lodash';
 
 import { compareId } from 'mastodon/compare_id';

app/javascript/mastodon/features/onboarding/components/step.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 
 import { Link } from 'react-router-dom';
 
-import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+import ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react';
+import CheckIcon from '@material-symbols/svg-600/outlined/done.svg?react';
 
 import { Icon } from 'mastodon/components/icon';
 

app/javascript/mastodon/features/onboarding/index.jsx

@@ -8,11 +8,11 @@ import { Link, Switch, Route, useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 
-import { ReactComponent as AccountCircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
-import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
-import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
-import { ReactComponent as EditNoteIcon } from '@material-symbols/svg-600/outlined/edit_note.svg';
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import AccountCircleIcon from '@material-symbols/svg-600/outlined/account_circle.svg?react';
+import ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react';
+import ContentCopyIcon from '@material-symbols/svg-600/outlined/content_copy.svg?react';
+import EditNoteIcon from '@material-symbols/svg-600/outlined/edit_note.svg?react';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
 
 import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
 import { focusCompose } from 'mastodon/actions/compose';

app/javascript/mastodon/features/onboarding/profile.jsx

@@ -8,8 +8,8 @@ import { useHistory } from 'react-router-dom';
 
 import { useDispatch } from 'react-redux';
 
-import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
-import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import AddPhotoAlternateIcon from '@material-symbols/svg-600/outlined/add_photo_alternate.svg?react';
+import EditIcon from '@material-symbols/svg-600/outlined/edit.svg?react';
 import Toggle from 'react-toggle';
 
 import { updateAccount } from 'mastodon/actions/accounts';

app/javascript/mastodon/features/onboarding/share.jsx

@@ -7,8 +7,8 @@ import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
 
-import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
-import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
+import ArrowRightAltIcon from '@material-symbols/svg-600/outlined/arrow_right_alt.svg?react';
+import ContentCopyIcon from '@material-symbols/svg-600/outlined/content_copy.svg?react';
 import SwipeableViews from 'react-swipeable-views';
 
 import { ColumnBackButton } from 'mastodon/components/column_back_button';

app/javascript/mastodon/features/picture_in_picture/components/footer.jsx

@@ -9,11 +9,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as OpenInNewIcon } from '@material-symbols/svg-600/outlined/open_in_new.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg';
+import OpenInNewIcon from '@material-symbols/svg-600/outlined/open_in_new.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star.svg?react';
 
 import { initBoostModal } from 'mastodon/actions/boosts';
 import { replyCompose } from 'mastodon/actions/compose';

app/javascript/mastodon/features/picture_in_picture/components/header.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { Avatar } from 'mastodon/components/avatar';
 import { DisplayName } from 'mastodon/components/display_name';

app/javascript/mastodon/features/pinned_statuses/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg';
+import PushPinIcon from '@material-symbols/svg-600/outlined/push_pin.svg?react';
 
 import { getStatusList } from 'mastodon/selectors';
 

app/javascript/mastodon/features/public_timeline/index.jsx

@@ -7,7 +7,7 @@ import { Helmet } from 'react-helmet';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
 
 import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import { domain } from 'mastodon/initial_state';

app/javascript/mastodon/features/reblogs/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
+import RefreshIcon from '@material-symbols/svg-600/outlined/refresh.svg?react';
 import { debounce } from 'lodash';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/report/components/option.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import classNames from 'classnames';
 
-import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+import CheckIcon from '@material-symbols/svg-600/outlined/done.svg?react';
 
 import { Icon }  from 'mastodon/components/icon';
 

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -9,17 +9,17 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg';
-import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg';
-import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
-import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg';
-
-import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg';
-import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg';
+import BookmarkIcon from '@material-symbols/svg-600/outlined/bookmark-fill.svg?react';
+import BookmarkBorderIcon from '@material-symbols/svg-600/outlined/bookmark.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import ReplyIcon from '@material-symbols/svg-600/outlined/reply.svg?react';
+import ReplyAllIcon from '@material-symbols/svg-600/outlined/reply_all.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
+import StarBorderIcon from '@material-symbols/svg-600/outlined/star.svg?react';
+
+import RepeatDisabledIcon from 'mastodon/../svg-icons/repeat_disabled.svg?react';
+import RepeatPrivateIcon from 'mastodon/../svg-icons/repeat_private.svg?react';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 

app/javascript/mastodon/features/status/components/card.jsx

@@ -10,9 +10,9 @@ import classNames from 'classnames';
 import Immutable from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
-import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description-fill.svg';
-import { ReactComponent as OpenInNewIcon } from '@material-symbols/svg-600/outlined/open_in_new.svg';
-import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow-fill.svg';
+import DescriptionIcon from '@material-symbols/svg-600/outlined/description-fill.svg?react';
+import OpenInNewIcon from '@material-symbols/svg-600/outlined/open_in_new.svg?react';
+import PlayArrowIcon from '@material-symbols/svg-600/outlined/play_arrow-fill.svg?react';
 
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -8,9 +8,9 @@ import { Link, withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
 
 import { AnimatedNumber } from 'mastodon/components/animated_number';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';

app/javascript/mastodon/features/status/index.jsx

@@ -12,8 +12,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg';
-import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg';
+import VisibilityIcon from '@material-symbols/svg-600/outlined/visibility.svg?react';
+import VisibilityOffIcon from '@material-symbols/svg-600/outlined/visibility_off.svg?react';
 import { HotKeys } from 'react-hotkeys';
 
 import { Icon }  from 'mastodon/components/icon';

app/javascript/mastodon/features/subscribed_languages_modal/index.jsx

@@ -8,7 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { followAccount } from 'mastodon/actions/accounts';
 import { Button } from 'mastodon/components/button';

app/javascript/mastodon/features/ui/components/boost_modal.jsx

@@ -9,7 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg';
+import RepeatIcon from '@material-symbols/svg-600/outlined/repeat.svg?react';
 
 import { changeBoostPrivacy } from 'mastodon/actions/boosts';
 import AttachmentList from 'mastodon/components/attachment_list';

app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx

@@ -3,7 +3,7 @@ import { PureComponent } from 'react';
 
 import { defineMessages, injectIntl } from 'react-intl';
 
-import { ReactComponent as RefreshIcon } from '@material-symbols/svg-600/outlined/refresh.svg';
+import RefreshIcon from '@material-symbols/svg-600/outlined/refresh.svg?react';
 
 import { IconButton } from '../../../components/icon_button';
 

app/javascript/mastodon/features/ui/components/compare_history_modal.jsx

@@ -6,7 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 import escapeTextContentForBrowser from 'escape-html';
 
 import { closeModal } from 'mastodon/actions/modal';

app/javascript/mastodon/features/ui/components/embed_modal.jsx

@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import api from 'mastodon/api';
 import { IconButton } from 'mastodon/components/icon_button';

app/javascript/mastodon/features/ui/components/filter_modal.jsx

@@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { fetchFilters, createFilter, createFilterStatus } from 'mastodon/actions/filters';
 import { fetchStatus } from 'mastodon/actions/statuses';

app/javascript/mastodon/features/ui/components/focal_point_modal.jsx

@@ -9,7 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 import Textarea from 'react-textarea-autosize';
 import { length } from 'stringz';
 // eslint-disable-next-line import/extensions

app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx

@@ -6,7 +6,7 @@ import { injectIntl, defineMessages } from 'react-intl';
 import { List as ImmutableList } from 'immutable';
 import { connect } from 'react-redux';
 
-import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
+import PersonAddIcon from '@material-symbols/svg-600/outlined/person_add.svg?react';
 
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import { IconWithBadge } from 'mastodon/components/icon_with_badge';

app/javascript/mastodon/features/ui/components/header.jsx

@@ -7,7 +7,7 @@ import { Link, withRouter } from 'react-router-dom';
 
 import { connect } from 'react-redux';
 
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
 
 import { openModal } from 'mastodon/actions/modal';
 import { fetchServer } from 'mastodon/actions/server';

app/javascript/mastodon/features/ui/components/image_modal.jsx

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import classNames from 'classnames';
 
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 
 import { IconButton } from 'mastodon/components/icon_button';
 

app/javascript/mastodon/features/ui/components/list_panel.jsx

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
 
 import { fetchLists } from 'mastodon/actions/lists';
 

app/javascript/mastodon/features/ui/components/media_modal.jsx

@@ -7,9 +7,9 @@ import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg';
-import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg';
-import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg';
+import ChevronLeftIcon from '@material-symbols/svg-600/outlined/chevron_left.svg?react';
+import ChevronRightIcon from '@material-symbols/svg-600/outlined/chevron_right.svg?react';
+import CloseIcon from '@material-symbols/svg-600/outlined/close.svg?react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import { getAverageFromBlurhash } from 'mastodon/blurhash';

app/javascript/mastodon/features/ui/components/navigation_panel.jsx

@@ -5,16 +5,16 @@ import { defineMessages, injectIntl } from 'react-intl';
 
 import { Link } from 'react-router-dom';
 
-import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg';
-import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg';
-import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
-import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg';
-import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
-import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
-import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
-import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg';
-import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg';
-import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg';
+import AlternateEmailIcon from '@material-symbols/svg-600/outlined/alternate_email.svg?react';
+import BookmarksIcon from '@material-symbols/svg-600/outlined/bookmarks-fill.svg?react';
+import HomeIcon from '@material-symbols/svg-600/outlined/home-fill.svg?react';
+import ListAltIcon from '@material-symbols/svg-600/outlined/list_alt.svg?react';
+import MoreHorizIcon from '@material-symbols/svg-600/outlined/more_horiz.svg?react';
+import PublicIcon from '@material-symbols/svg-600/outlined/public.svg?react';
+import SearchIcon from '@material-symbols/svg-600/outlined/search.svg?react';
+import SettingsIcon from '@material-symbols/svg-600/outlined/settings-fill.svg?react';
+import StarIcon from '@material-symbols/svg-600/outlined/star-fill.svg?react';
+import TagIcon from '@material-symbols/svg-600/outlined/tag.svg?react';
 
 import { WordmarkLogo } from 'mastodon/components/logo';
 import { NavigationPortal } from 'mastodon/components/navigation_portal';

app/javascript/mastodon/features/ui/components/notifications_counter_icon.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg';
+import NotificationsIcon from '@material-symbols/svg-600/outlined/notifications-fill.svg?react';
 
 import { IconWithBadge } from 'mastodon/components/icon_with_badge';