Merge pull request #59 from sahil143/optimize

fix: reduce vendor build size from 3.6mb to 2.02mb

.eslintrc.cjs

@@ -111,7 +111,7 @@ module.exports = {
       {
         name: '@patternfly/react-icons',
         message:
-          "Don't use group imports. Use @patternfly/react-icons/dist/js/icons/(kebab-case-name) instead.",
+          "Don't use group imports. Use @patternfly/react-icons/dist/esm/icons/(kebab-case-name) instead.",
       },
       {
         name: 'lodash',

package.json

@@ -15,7 +15,9 @@
     "lint": "yarn lint:ts && yarn lint:sass",
     "lint:ts": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:sass": "stylelint 'src/**/*.scss' --config .stylelintrc.json",
-    "prepare": "husky"
+    "prepare": "husky",
+    "analyze": "source-map-explorer 'dist/*.js'",
+    "analyze:webpack": "webpack --analyze -c ./webpack.prod.config.js"
   },
   "dependencies": {
     "@patternfly/patternfly": "^5.3.1",
@@ -86,6 +88,7 @@
     "react-refresh": "^0.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
+    "source-map-explorer": "^2.5.3",
     "style-loader": "^4.0.0",
     "stylelint": "^16.6.1",
     "stylelint-config-recommended-scss": "^14.1.0",
@@ -94,7 +97,9 @@
     "swc-loader": "^0.2.6",
     "type-fest": "^4.22.0",
     "typescript": "^5.2.2",
+    "web-vitals": "^4.2.4",
     "webpack": "^5.93.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
     "webpack-merge": "^6.0.1",

src/AppRoot/AppHeader.tsx

@@ -8,7 +8,7 @@ import {
   MastheadToggle,
   PageToggleButton,
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import konfluxLogo from '../assets/konflux.svg';
 import { Header } from '../components/Header/Header';
 

src/components/ApplicationDetails/tabs/overview/visualization/utils/node-icon-utils.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GithubIcon } from '@patternfly/react-icons/dist/js/icons/github-icon';
-import { ServerIcon } from '@patternfly/react-icons/dist/js/icons/server-icon';
+import { GithubIcon } from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import { ServerIcon } from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import PipelineIcon from '../../../../../../assets/pipelineIcon.svg';
 import { WorkflowNodeType } from '../types';
 

src/components/Commits/CommitDetails/sidepanels/CommitSidePanel.tsx

@@ -10,7 +10,7 @@ import {
   DrawerHead,
   DrawerPanelBody,
 } from '@patternfly/react-core';
-import { GithubIcon } from '@patternfly/react-icons/dist/js/icons/github-icon';
+import { GithubIcon } from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import { ElementModel, GraphElement } from '@patternfly/react-topology';
 import ExternalLink from '../../../../shared/components/links/ExternalLink';
 import { Timestamp } from '../../../../shared/components/timestamp/Timestamp';

src/components/Commits/CommitDetails/visualization/commit-visualization-utils.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { GithubIcon } from '@patternfly/react-icons/dist/js/icons/github-icon';
-import { ServerIcon } from '@patternfly/react-icons/dist/js/icons/server-icon';
+import { GithubIcon } from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import { ServerIcon } from '@patternfly/react-icons/dist/esm/icons/server-icon';
 import { EdgeModel, getEdgesFromNodes, getSpacerNodes } from '@patternfly/react-topology';
 import PipelineIcon from '../../../../assets/pipelineIcon.svg';
 import {

src/components/Commits/commit-label/CommitLabel.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Label, Tooltip } from '@patternfly/react-core';
-import { BitbucketIcon } from '@patternfly/react-icons/dist/js/icons/bitbucket-icon';
-import { GithubIcon } from '@patternfly/react-icons/dist/js/icons/github-icon';
-import { GitlabIcon } from '@patternfly/react-icons/dist/js/icons/gitlab-icon';
+import { BitbucketIcon } from '@patternfly/react-icons/dist/esm/icons/bitbucket-icon';
+import { GithubIcon } from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import { GitlabIcon } from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 import { css } from '@patternfly/react-styles';
 import { GitProvider } from '../../../shared/utils/git-utils';
 import { getCommitShortName } from '../../../utils/commits-utils';

src/components/ComponentRelation/cr-modals.tsx

@@ -19,7 +19,7 @@ import {
   ModalVariant,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { FieldArray, useFormikContext } from 'formik';
 import { isEmpty } from 'lodash-es';
 import { FormFooter } from '../../shared';

src/components/ComponentRelation/details-page/ComponentNudgesDependencies.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ExpandableSection, Radio, Tooltip } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import { ComponentKind, NudgeStats } from '../../../types';
 import ComponentNudgesSVG, { NudgeRadios } from './ComponentNudges';
 

src/components/ContextSwitcher/ContextSwitcher.tsx

@@ -12,7 +12,7 @@ import {
   MenuSearchInput,
 } from '@patternfly/react-core';
 import { Dropdown, DropdownToggle } from '@patternfly/react-core/deprecated';
-import EllipsisHIcon from '@patternfly/react-icons/dist/js/icons/ellipsis-h-icon';
+import { EllipsisHIcon } from '@patternfly/react-icons/dist/esm/icons/ellipsis-h-icon';
 import '././ContextSwitcher.scss';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { ContextMenuListItem, filteredItems, findItemByKey } from './context-switcher-utils';

src/components/EnterpriseContract/utils.tsx

@@ -1,7 +1,7 @@
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import DotCircleIcon from '@patternfly/react-icons/dist/js/icons/dot-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import { CheckCircleIcon } from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import { DotCircleIcon } from '@patternfly/react-icons/dist/esm/icons/dot-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import { global_danger_color_100 as redColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
 import { global_success_color_100 as greenColor } from '@patternfly/react-tokens/dist/js/global_success_color_100';
 import { global_warning_color_100 as yellowColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';

src/components/Filter/FilterToolbar.tsx

@@ -13,7 +13,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons/dist/js/icons';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons';
 
 type Props = {
   value: string;

src/components/GettingStartedCard/GettingStartedCard.tsx

@@ -9,7 +9,7 @@ import {
   Split,
   SplitItem,
 } from '@patternfly/react-core';
-import CloseIcon from '@patternfly/react-icons/dist/js/icons/close-icon';
+import { CloseIcon } from '@patternfly/react-icons/dist/esm/icons/close-icon';
 import classnames from 'classnames';
 import { useLocalStorage } from '../../hooks/useLocalStorage';
 import './GettingStartedCard.scss';

src/components/GitLink/GitRepoLink.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
-import { CodeBranchIcon } from '@patternfly/react-icons/dist/js/icons/code-branch-icon';
+import { CodeBranchIcon } from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import gitUrlParse from 'git-url-parse';
 import ExternalLink from '../../shared/components/links/ExternalLink';
 import { getGitIcon, getGitPath } from '../../utils/git-utils';

src/components/HelpPopover.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Popover, PopoverProps } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 
 const HelpPopover: React.FC<React.PropsWithChildren<Omit<PopoverProps, 'children'>>> = (props) => (
   <Popover {...props}>

src/components/ImportForm/SecretSection/SecretSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextInputTypes, GridItem, Grid, FormSection } from '@patternfly/react-core';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { useFormikContext } from 'formik';
 import { InputField } from 'formik-pf';
 import { useSecrets } from '../../../hooks/useSecrets';

src/components/IntegrationTests/FormikParamsField.tsx

@@ -20,8 +20,8 @@ import {
   CardExpandableContent,
   CardBody,
 } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { FieldArray, useField } from 'formik';
 import { InputField } from 'formik-pf';
 import { Param } from '../../types/coreBuildService';

src/components/IntegrationTests/IntegrationTestDetails/tabs/IntegrationTestOverviewTab.tsx

@@ -13,7 +13,7 @@ import {
   Tooltip,
   pluralize,
 } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 import { useIntegrationTestScenario } from '../../../../hooks/useIntegrationTestScenarios';
 import { RouterParams } from '../../../../routes/utils';
 import { Timestamp } from '../../../../shared';

src/components/PipelineRun/ScanDetailStatus.tsx

@@ -4,7 +4,7 @@ import {
   AngleDoubleDownIcon,
   AngleDoubleUpIcon,
   EqualsIcon,
-} from '@patternfly/react-icons/dist/js/icons';
+} from '@patternfly/react-icons/dist/esm/icons';
 import { global_palette_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 import { global_palette_gold_400 as goldColor } from '@patternfly/react-tokens/dist/js/global_palette_gold_400';
 import { global_palette_orange_300 as orangeColor } from '@patternfly/react-tokens/dist/js/global_palette_orange_300';

src/components/ReleaseService/ReleasePlan/ReleasePlanListView.tsx

@@ -12,7 +12,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons/dist/js/icons';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { FULL_APPLICATION_TITLE } from '../../../consts/labels';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
 import { useReleasePlans } from '../../../hooks/useReleasePlans';

src/components/ReleaseService/ReleasePlan/TriggerRelease/AddIssueSection/ComponentField.tsx

@@ -10,8 +10,8 @@ import {
   TextContent,
   TextVariants,
 } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { FieldArray, useField } from 'formik';
 import { InputField } from 'formik-pf';
 import { CVEComponentDropDown } from './CVEComponentDropDown';

src/components/ReleaseService/ReleasePlanAdmission/ReleasePlanAdmissionListView.tsx

@@ -12,7 +12,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons/dist/js/icons';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { FULL_APPLICATION_TITLE } from '../../../consts/labels';
 import { useDocumentTitle } from '../../../hooks/useDocumentTitle';
 import { useReleasePlanAdmissions } from '../../../hooks/useReleasePlanAdmissions';

src/components/Secrets/SecretsForm/EncodedKeyValueUploadField.tsx

@@ -5,8 +5,8 @@ import {
   FormFieldGroupExpandable,
   FormFieldGroupHeader,
 } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { FieldArray, useField } from 'formik';
 import { InputField } from 'formik-pf';
 import { uniqueId } from 'lodash-es';

src/components/Secrets/SecretsForm/MultiImageCredentialForm.tsx

@@ -5,8 +5,8 @@ import {
   FormFieldGroupHeader,
   TextInputTypes,
 } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { FieldArray, useField } from 'formik';
 import { InputField } from 'formik-pf';
 import { uniqueId } from 'lodash-es';

src/components/StatusIcon/StatusIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Label } from '@patternfly/react-core';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { css } from '@patternfly/react-styles';
 import {
   getRunStatusModifier,

src/components/UserAccess/UserAccessListView.tsx

@@ -15,7 +15,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { FilterIcon } from '@patternfly/react-icons/dist/js/icons';
+import { FilterIcon } from '@patternfly/react-icons/dist/esm/icons';
 import emptyStateImgUrl from '../../assets/Integration-test.svg';
 import { useSearchParam } from '../../hooks/useSearchParam';
 import { SpaceBindingRequestModel } from '../../models';

src/components/topology/StatusIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Label } from '@patternfly/react-core';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { css } from '@patternfly/react-styles';
 import {
   getRunStatusModifier,

src/shared/components/action-menu/ActionMenuToggle.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
-import { EllipsisVIcon } from '@patternfly/react-icons/dist/js/icons';
+import { EllipsisVIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { ActionMenuVariant } from './types';
 
 type ActionMenuToggleProps = {

src/shared/components/close-button/CloseButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@patternfly/react-core';
-import { CloseIcon } from '@patternfly/react-icons/dist/js/icons/close-icon';
+import { CloseIcon } from '@patternfly/react-icons/dist/esm/icons/close-icon';
 import classNames from 'classnames';
 import './CloseButton.scss';
 

src/shared/components/form-components/ActionGroupWithIcons.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActionGroup, Button, ButtonVariant } from '@patternfly/react-core';
-import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
+import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import classnames from 'classnames';
 import { CloseButton } from '../close-button';
 import { ActionGroupWithIconsProps } from './form-component-types';

src/shared/components/form-components/FormFooter.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActionGroup, Alert, Button, ButtonVariant } from '@patternfly/react-core';
-import { DownloadIcon } from '@patternfly/react-icons/dist/js/icons/download-icon';
+import { DownloadIcon } from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import classNames from 'classnames';
 import { Shadows, useScrollShadows, useScrollContainer } from '../../hooks';
 import ButtonBar from '../button-bar/ButtonBar';

src/shared/components/formik-fields/FieldHelperText.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
-import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 import './RadioGroupField.scss';
 

src/shared/components/formik-fields/key-value-file-input-field/KeyValueFileInputField.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Flex, FlexItem, Button, FormGroup, TextInputTypes } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { FieldArray, FormikValues, useField, useFormikContext } from 'formik';
 import { FileUploadField, InputField } from 'formik-pf';
 import { get, uniqueId } from 'lodash-es';

src/shared/components/formik-fields/multi-column-field/MultiColumnFieldFooter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from '@patternfly/react-core';
-import { PlusCircleIcon } from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export interface MultiColumnFieldHeader {
   addLabel?: string;

src/shared/components/formik-fields/multi-column-field/MultiColumnFieldRow.tsx

@@ -9,7 +9,7 @@ import {
   Grid,
   gridItemSpanValueShape,
 } from '@patternfly/react-core';
-import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
 import './MultiColumnField.scss';
 
 export interface RowRendererProps {

src/shared/components/formik-fields/text-column-field/TextColumnItemContent.tsx

@@ -8,7 +8,7 @@ import {
   ButtonType,
   Tooltip,
 } from '@patternfly/react-core';
-import { MinusCircleIcon, GripVerticalIcon } from '@patternfly/react-icons/dist/js/icons';
+import { MinusCircleIcon, GripVerticalIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { InputField } from 'formik-pf';
 import {
   TextColumnItemProps,

src/shared/components/help-tooltip/HelpTooltipIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '@patternfly/react-core';
-import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/js/icons/outlined-question-circle-icon';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
 
 type HelpTooltipProps = {
   content: React.ReactNode;

src/shared/components/name-value-editor/BasicNameValueEditor.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Flex, FlexItem, TextInput, Tooltip } from '@patternfly/react-core';
-import MinusCircleIcon from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/minus-circle-icon';
+import { PlusCircleIcon } from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import cloneDeep from 'lodash/cloneDeep';
 import { NameValueEditorPair } from './types';
 

src/shared/components/pipeline-run-logs/logs/LogsWrapperComponent.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
-import { CompressIcon, DownloadIcon, ExpandIcon } from '@patternfly/react-icons/dist/js/icons';
+import { CompressIcon, DownloadIcon, ExpandIcon } from '@patternfly/react-icons/dist/esm/icons';
 import classNames from 'classnames';
 import { saveAs } from 'file-saver';
 import { useK8sWatchResource } from '../../../../k8s';

src/shared/components/pipeline-run-logs/logs/MultiStreamLogs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '@patternfly/react-core';
-import { OutlinedPlayCircleIcon } from '@patternfly/react-icons/dist/js/icons';
+import { OutlinedPlayCircleIcon } from '@patternfly/react-icons/dist/esm/icons';
 import { TaskRunKind } from '../../../../types';
 import { useScrollDirection, ScrollDirection } from '../../../hooks/scroll';
 import { LoadingInline } from '../../status-box/StatusBox';

src/shared/components/status/icons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PencilAltIcon } from '@patternfly/react-icons/dist/js/icons/pencil-alt-icon';
+import { PencilAltIcon } from '@patternfly/react-icons/dist/esm/icons/pencil-alt-icon';
 import { global_palette_black_600 as grayColor } from '@patternfly/react-tokens/dist/js/global_palette_black_600';
 
 export type ColoredIconProps = {