chore(ExternalLinkSquareAltIcon): Replace all usages of ExternalLinkSquareAltIcon with RhUiExternalLinkFillIcon (#12366)

tlabaj · web-flow · commit aba1ac71778f · 2026-04-27T13:16:38.000-04:00
* chore(ExternalLinkSquareAltIcon): Replace all usages of ExternalLinkSquareAltIcon with RhUiExternalLinkFillIcon

* update pfToRhIcons
diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
@@ -9,7 +9,7 @@ ouia: true
 import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx
@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
@@ -32,7 +32,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
       <Button variant="link" icon={<PlusCircleIcon />}>
         Link
       </Button>
-      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+      <Button variant="link" icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
         Link
       </Button>
       <Button variant="link" isInline>
diff --git a/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx b/packages/react-core/src/components/SearchInput/__tests__/SearchInput.test.tsx
@@ -6,7 +6,7 @@ import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
 import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
@@ -128,7 +128,7 @@ describe('SearchInput', () => {
         advancedSearchDelimiter=":"
         formAdditionalItems={
           <FormGroup fieldId="test-form-group">
-            <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+            <Button variant="link" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition="right">
               Link
             </Button>
           </FormGroup>
diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap
@@ -496,11 +496,11 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                         fill="currentColor"
                         height="1em"
                         role="img"
-                        viewBox="0 0 448 512"
+                        viewBox="0 0 32 32"
                         width="1em"
                       >
                         <path
-                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                          d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5Zm-3.375 17a1.125 1.125 0 0 1-2.25 0v-8.284L11.796 21.795a1.122 1.122 0 0 1-1.592 0 1.127 1.127 0 0 1 0-1.591l11.08-11.08H13a1.125 1.125 0 0 1 0-2.25h10.5c.896 0 1.625.729 1.625 1.625v10.5Z"
                         />
                       </svg>
                     </span>
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInput.md b/packages/react-core/src/components/SearchInput/examples/SearchInput.md
@@ -6,7 +6,7 @@ propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpand
 ---
 
 import { useRef, useState } from 'react';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 
 ## Examples
 
diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 
 export const SearchInputAdvanced: React.FunctionComponent = () => {
   const [value, setValue] = useState('username:player firstname:john');
@@ -45,7 +45,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         formAdditionalItems={
           useCustomFooter ? (
             <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+              <Button variant="link" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
                 Link
               </Button>
             </FormGroup>
diff --git a/packages/react-icons/scripts/icons/pfToRhIcons.mjs b/packages/react-icons/scripts/icons/pfToRhIcons.mjs
@@ -63,7 +63,7 @@ export const pfToRhIcons = {
   ExpandArrowsAltIcon: { name: 'rh-ui-expand-arrows', icon: getIconData('rh-ui-expand-arrows') },
   ExpandIcon: { name: 'rh-ui-expand', icon: getIconData('rh-ui-expand') },
   ExportIcon: { name: 'rh-ui-export', icon: getIconData('rh-ui-export') },
-  ExternalLinkAltIcon: { name: 'rh-ui-external-link', icon: getIconData('rh-ui-external-link') },
+  ExternalLinkAltIcon: { name: 'rh-ui-external-link-fill', icon: getIconData('rh-ui-external-link-fill') },
   EyeIcon: { name: 'rh-ui-view', icon: getIconData('rh-ui-view') },
   EyeSlashIcon: { name: 'rh-ui-view-off', icon: getIconData('rh-ui-view-off') },
   FileIcon: { name: 'rh-ui-document', icon: getIconData('rh-ui-document') },
