Skip to content

Commit 90e6e2b

Browse files
Update icons
1 parent b8e3088 commit 90e6e2b

File tree

4 files changed

+137
-20
lines changed

4 files changed

+137
-20
lines changed

packages/react-core/src/components/Compass/CompassNavHome.tsx

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,40 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass';
22
import { css } from '@patternfly/react-styles';
33
import { Button } from '../Button';
44
import { Tooltip } from '../Tooltip';
5-
import HomeIcon from '@patternfly/react-icons/dist/esm/icons/home-icon';
5+
6+
const CompassHomeIcon = () => (
7+
<svg
8+
width="1em"
9+
height="1em"
10+
className="pf-v6-svg"
11+
viewBox="0 0 20 20"
12+
fill="none"
13+
xmlns="http://www.w3.org/2000/svg"
14+
aria-hidden="true"
15+
>
16+
<path
17+
d="M8.33268 13.334H11.666"
18+
stroke="currentcolor"
19+
strokeWidth="1.5"
20+
strokeLinecap="round"
21+
strokeLinejoin="round"
22+
/>
23+
<path
24+
d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
25+
stroke="currentcolor"
26+
strokeWidth="1.5"
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
/>
30+
<path
31+
d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
32+
stroke="currentcolor"
33+
strokeWidth="1.5"
34+
strokeLinecap="round"
35+
strokeLinejoin="round"
36+
/>
37+
</svg>
38+
);
639

740
export interface CompassNavHomeProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
841
/** Content to display in the tooltip. Defaults to "Home". */
@@ -20,7 +53,7 @@ export const CompassNavHome: React.FunctionComponent<CompassNavHomeProps> = ({
2053
}) => (
2154
<div className={css(styles.compassNav + '-home', className)} {...props}>
2255
<Tooltip content={tooltipContent}>
23-
<Button isCircle variant="plain" icon={<HomeIcon />} aria-label={ariaLabel} onClick={onClick} />
56+
<Button isCircle variant="plain" icon={<CompassHomeIcon />} aria-label={ariaLabel} onClick={onClick} />
2457
</Tooltip>
2558
</div>
2659
);

packages/react-core/src/components/Compass/CompassNavSearch.tsx

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,33 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass';
22
import { css } from '@patternfly/react-styles';
33
import { Button } from '../Button';
44
import { Tooltip } from '../Tooltip';
5-
import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
5+
6+
const CompassSearchIcon = () => (
7+
<svg
8+
width="1em"
9+
height="1em"
10+
className="pf-v6-svg"
11+
viewBox="0 0 20 20"
12+
fill="none"
13+
xmlns="http://www.w3.org/2000/svg"
14+
aria-hidden="true"
15+
>
16+
<path
17+
d="M14.166 14.166L17.4993 17.4993"
18+
stroke="currentcolor"
19+
strokeWidth="1.5"
20+
strokeLinecap="round"
21+
strokeLinejoin="round"
22+
/>
23+
<path
24+
d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
25+
stroke="currentcolor"
26+
strokeWidth="1.5"
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
/>
30+
</svg>
31+
);
632

733
export interface CompassNavSearchProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
834
/** Content to display in the tooltip. Defaults to "Search". */
@@ -20,7 +46,7 @@ export const CompassNavSearch: React.FunctionComponent<CompassNavSearchProps> =
2046
}) => (
2147
<div className={css(styles.compassNav + '-search', className)} {...props}>
2248
<Tooltip content={tooltipContent}>
23-
<Button isCircle variant="plain" icon={<SearchIcon />} aria-label={ariaLabel} onClick={onClick} />
49+
<Button isCircle variant="plain" icon={<CompassSearchIcon />} aria-label={ariaLabel} onClick={onClick} />
2450
</Tooltip>
2551
</div>
2652
);

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavHome.test.tsx.snap

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,32 @@ exports[`Matches the snapshot 1`] = `
2222
<svg
2323
aria-hidden="true"
2424
class="pf-v6-svg"
25-
fill="currentColor"
25+
fill="none"
2626
height="1em"
27-
role="img"
28-
viewBox="0 0 576 512"
27+
viewBox="0 0 20 20"
2928
width="1em"
29+
xmlns="http://www.w3.org/2000/svg"
3030
>
3131
<path
32-
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
32+
d="M8.33268 13.334H11.666"
33+
stroke="currentcolor"
34+
stroke-linecap="round"
35+
stroke-linejoin="round"
36+
stroke-width="1.5"
37+
/>
38+
<path
39+
d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
40+
stroke="currentcolor"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
stroke-width="1.5"
44+
/>
45+
<path
46+
d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
47+
stroke="currentcolor"
48+
stroke-linecap="round"
49+
stroke-linejoin="round"
50+
stroke-width="1.5"
3351
/>
3452
</svg>
3553
</span>
@@ -61,14 +79,32 @@ exports[`Matches the snapshot with custom props 1`] = `
6179
<svg
6280
aria-hidden="true"
6381
class="pf-v6-svg"
64-
fill="currentColor"
82+
fill="none"
6583
height="1em"
66-
role="img"
67-
viewBox="0 0 576 512"
84+
viewBox="0 0 20 20"
6885
width="1em"
86+
xmlns="http://www.w3.org/2000/svg"
6987
>
7088
<path
71-
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
89+
d="M8.33268 13.334H11.666"
90+
stroke="currentcolor"
91+
stroke-linecap="round"
92+
stroke-linejoin="round"
93+
stroke-width="1.5"
94+
/>
95+
<path
96+
d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
97+
stroke="currentcolor"
98+
stroke-linecap="round"
99+
stroke-linejoin="round"
100+
stroke-width="1.5"
101+
/>
102+
<path
103+
d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
104+
stroke="currentcolor"
105+
stroke-linecap="round"
106+
stroke-linejoin="round"
107+
stroke-width="1.5"
72108
/>
73109
</svg>
74110
</span>

packages/react-core/src/components/Compass/__tests__/__snapshots__/CompassNavSearch.test.tsx.snap

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,25 @@ exports[`Matches the snapshot 1`] = `
2222
<svg
2323
aria-hidden="true"
2424
class="pf-v6-svg"
25-
fill="currentColor"
25+
fill="none"
2626
height="1em"
27-
role="img"
28-
viewBox="0 0 512 512"
27+
viewBox="0 0 20 20"
2928
width="1em"
29+
xmlns="http://www.w3.org/2000/svg"
3030
>
3131
<path
32-
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
32+
d="M14.166 14.166L17.4993 17.4993"
33+
stroke="currentcolor"
34+
stroke-linecap="round"
35+
stroke-linejoin="round"
36+
stroke-width="1.5"
37+
/>
38+
<path
39+
d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
40+
stroke="currentcolor"
41+
stroke-linecap="round"
42+
stroke-linejoin="round"
43+
stroke-width="1.5"
3344
/>
3445
</svg>
3546
</span>
@@ -61,14 +72,25 @@ exports[`Matches the snapshot with custom props 1`] = `
6172
<svg
6273
aria-hidden="true"
6374
class="pf-v6-svg"
64-
fill="currentColor"
75+
fill="none"
6576
height="1em"
66-
role="img"
67-
viewBox="0 0 512 512"
77+
viewBox="0 0 20 20"
6878
width="1em"
79+
xmlns="http://www.w3.org/2000/svg"
6980
>
7081
<path
71-
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
82+
d="M14.166 14.166L17.4993 17.4993"
83+
stroke="currentcolor"
84+
stroke-linecap="round"
85+
stroke-linejoin="round"
86+
stroke-width="1.5"
87+
/>
88+
<path
89+
d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
90+
stroke="currentcolor"
91+
stroke-linecap="round"
92+
stroke-linejoin="round"
93+
stroke-width="1.5"
7294
/>
7395
</svg>
7496
</span>

0 commit comments

Comments
 (0)