Skip to content

Commit d28d9b1

Browse files
tayseataysea
authored
Merge pull request #328 from grommet/icon-id-collision
Fix icon id collision
2 parents 2c16c9d + 94c8fa9 commit d28d9b1

File tree

13 files changed

+356
-302
lines changed

13 files changed

+356
-302
lines changed

‎src/js/__tests__/__snapshots__/Icon-test.js.snap

Lines changed: 32 additions & 32 deletions
Large diffs are not rendered by default.

‎src/js/icons/AppleMusic.js

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
import React, { forwardRef } from 'react';
22

33
import { StyledIcon } from '../StyledIcon';
4+
import { generatePrefix } from '../utils';
45

5-
const AppleMusic = forwardRef((props, ref) => (
6-
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="AppleMusic" {...props}>
7-
<g clipPath="url(#a)">
8-
<path
9-
fill="url(#b)"
10-
fillRule="evenodd"
11-
d="M21.992 22.816c.768-.592 1.304-1.424 1.536-2.016.464-1.192.472-2.544.472-3.4V6.6c0-.848 0-2.208-.472-3.4-.232-.592-.776-1.432-1.536-2.016a4.99 4.99 0 0 0-1.688-.88C19.528.08 18.584 0 17.4 0H6.6C5.416 0 4.472.08 3.696.304a5.137 5.137 0 0 0-1.688.88C1.24 1.776.704 2.608.472 3.2.008 4.392 0 5.744 0 6.6v10.8c0 .856.008 2.208.472 3.4.232.592.776 1.432 1.536 2.016.44.344.968.664 1.688.88.776.224 1.72.304 2.904.304h10.8c1.184 0 2.136-.072 2.904-.304a5.137 5.137 0 0 0 1.688-.88Zm-5.706-19.05c.062-.013.576-.104.634-.11.385-.033.6.22.6.63v11.289c0 .303-.003.577-.067.881a2.212 2.212 0 0 1-.348.821 2.087 2.087 0 0 1-.655.606 2.605 2.605 0 0 1-.831.303c-.552.11-.93.136-1.284.065a1.791 1.791 0 0 1-.864-.44 1.88 1.88 0 0 1-.604-1.184 1.886 1.886 0 0 1 .51-1.488c.197-.207.445-.37.776-.499.347-.134.729-.215 1.317-.333l.464-.094c.205-.041.379-.093.52-.265.142-.173.144-.384.144-.593V8.084c0-.404-.182-.514-.566-.44-.276.054-6.19 1.247-6.19 1.247-.333.08-.45.19-.45.603v7.722c0 .303-.015.578-.08.882a2.213 2.213 0 0 1-.348.82 2.088 2.088 0 0 1-.654.606 2.613 2.613 0 0 1-.831.307c-.552.112-.93.136-1.284.065a1.792 1.792 0 0 1-.864-.443 1.863 1.863 0 0 1-.59-1.184 1.874 1.874 0 0 1 .496-1.488c.197-.208.445-.371.776-.5.347-.134.729-.214 1.317-.333l.464-.093c.204-.042.379-.094.52-.266.14-.172.157-.374.157-.582V6.104c0-.12.01-.201.016-.241a.724.724 0 0 1 .24-.462.992.992 0 0 1 .443-.2h.003l7.113-1.435Z"
12-
clipRule="evenodd"
13-
/>
14-
</g>
15-
<defs>
16-
<linearGradient
17-
id="b"
18-
x1="12"
19-
x2="12"
20-
y1="23.907"
21-
y2=".517"
22-
gradientUnits="userSpaceOnUse"
23-
>
24-
<stop stopColor="#FA233B" />
25-
<stop offset="1" stopColor="#FB5C74" />
26-
</linearGradient>
27-
<clipPath id="a">
28-
<path fill="#fff" d="M0 0h24v24H0z" />
29-
</clipPath>
30-
</defs>
31-
</StyledIcon>
32-
));
6+
const AppleMusic = forwardRef((props, ref) => {
7+
const prefix = generatePrefix('AppleMusic');
8+
return (
9+
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="AppleMusic" {...props}>
10+
<g clipPath={`url(#${prefix}-a)`}>
11+
<path
12+
fill={`url(#${prefix}-b)`}
13+
fillRule="evenodd"
14+
d="M21.992 22.816c.768-.592 1.304-1.424 1.536-2.016.464-1.192.472-2.544.472-3.4V6.6c0-.848 0-2.208-.472-3.4-.232-.592-.776-1.432-1.536-2.016a4.99 4.99 0 0 0-1.688-.88C19.528.08 18.584 0 17.4 0H6.6C5.416 0 4.472.08 3.696.304a5.137 5.137 0 0 0-1.688.88C1.24 1.776.704 2.608.472 3.2.008 4.392 0 5.744 0 6.6v10.8c0 .856.008 2.208.472 3.4.232.592.776 1.432 1.536 2.016.44.344.968.664 1.688.88.776.224 1.72.304 2.904.304h10.8c1.184 0 2.136-.072 2.904-.304a5.137 5.137 0 0 0 1.688-.88Zm-5.706-19.05c.062-.013.576-.104.634-.11.385-.033.6.22.6.63v11.289c0 .303-.003.577-.067.881a2.212 2.212 0 0 1-.348.821 2.087 2.087 0 0 1-.655.606 2.605 2.605 0 0 1-.831.303c-.552.11-.93.136-1.284.065a1.791 1.791 0 0 1-.864-.44 1.88 1.88 0 0 1-.604-1.184 1.886 1.886 0 0 1 .51-1.488c.197-.207.445-.37.776-.499.347-.134.729-.215 1.317-.333l.464-.094c.205-.041.379-.093.52-.265.142-.173.144-.384.144-.593V8.084c0-.404-.182-.514-.566-.44-.276.054-6.19 1.247-6.19 1.247-.333.08-.45.19-.45.603v7.722c0 .303-.015.578-.08.882a2.213 2.213 0 0 1-.348.82 2.088 2.088 0 0 1-.654.606 2.613 2.613 0 0 1-.831.307c-.552.112-.93.136-1.284.065a1.792 1.792 0 0 1-.864-.443 1.863 1.863 0 0 1-.59-1.184 1.874 1.874 0 0 1 .496-1.488c.197-.208.445-.371.776-.5.347-.134.729-.214 1.317-.333l.464-.093c.204-.042.379-.094.52-.266.14-.172.157-.374.157-.582V6.104c0-.12.01-.201.016-.241a.724.724 0 0 1 .24-.462.992.992 0 0 1 .443-.2h.003l7.113-1.435Z"
15+
clipRule="evenodd"
16+
/>
17+
</g>
18+
<defs>
19+
<linearGradient
20+
id={`${prefix}-b`}
21+
x1="12"
22+
x2="12"
23+
y1="23.907"
24+
y2=".517"
25+
gradientUnits="userSpaceOnUse"
26+
>
27+
<stop stopColor="#FA233B" />
28+
<stop offset="1" stopColor="#FB5C74" />
29+
</linearGradient>
30+
<clipPath id={`${prefix}-a`}>
31+
<path fill="#fff" d="M0 0h24v24H0z" />
32+
</clipPath>
33+
</defs>
34+
</StyledIcon>
35+
);
36+
});
3337

3438
AppleMusic.displayName = 'AppleMusic';
3539

‎src/js/icons/ApplePodcasts.js

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
11
import React, { forwardRef } from 'react';
22

33
import { StyledIcon } from '../StyledIcon';
4+
import { generatePrefix } from '../utils';
45

5-
const ApplePodcasts = forwardRef((props, ref) => (
6-
<StyledIcon
7-
ref={ref}
8-
viewBox="0 0 24 24"
9-
a11yTitle="ApplePodcasts"
10-
{...props}
11-
>
12-
<g clipPath="url(#a)">
13-
<path
14-
fill="url(#b)"
15-
fillRule="evenodd"
16-
d="M21.992 22.816c.768-.592 1.304-1.424 1.536-2.016.464-1.192.472-2.544.472-3.4V6.6c0-.848 0-2.208-.472-3.4-.232-.592-.776-1.432-1.536-2.016a4.99 4.99 0 0 0-1.688-.88C19.528.08 18.584 0 17.4 0H6.6C5.416 0 4.472.08 3.696.304a5.137 5.137 0 0 0-1.688.88C1.24 1.776.704 2.608.472 3.2.008 4.392 0 5.744 0 6.6v10.8c0 .856.008 2.208.472 3.4.232.592.776 1.432 1.536 2.016.44.344.968.664 1.688.88.776.224 1.72.304 2.904.304h10.8c1.184 0 2.136-.072 2.904-.304a5.137 5.137 0 0 0 1.688-.88ZM3.56 10.992c.064-4.592 3.824-8.32 8.416-8.336 4.664-.008 8.464 3.784 8.48 8.44 0 3.68-2.36 6.816-5.648 7.968-.08.032-.168-.032-.152-.12l.12-.864a.272.272 0 0 1 .168-.232c2.6-1.144 4.424-3.736 4.424-6.752 0-4.08-3.336-7.392-7.424-7.36-3.992.032-7.256 3.288-7.296 7.288a7.365 7.365 0 0 0 4.424 6.824.317.317 0 0 1 .168.232c.021.192.05.384.078.576l.042.288c.008.08-.072.152-.152.12-3.32-1.168-5.696-4.352-5.648-8.072Zm10.408-.584c0 1.088-.88 1.968-1.968 1.968a1.967 1.967 0 0 1-1.968-1.968c0-1.088.88-1.968 1.968-1.968s1.968.888 1.968 1.968Zm.088 4.08a1.069 1.069 0 0 0-.32-.688c-.36-.376-.992-.624-1.736-.624s-1.376.24-1.736.624c-.184.2-.288.4-.32.688-.064.558-.024 1.037.04 1.807v.009c.064.736.184 1.72.336 2.712.112.712.2 1.096.28 1.368.136.448.624.832 1.4.832.776 0 1.272-.392 1.4-.832.08-.272.168-.656.28-1.368.152-1 .272-1.976.336-2.712.072-.776.104-1.256.04-1.816Zm-2.272-9.032c-2.992.112-5.392 2.584-5.432 5.576a5.65 5.65 0 0 0 2.472 4.744c.072.048.176-.008.176-.096a7.853 7.853 0 0 1-.008-.968.326.326 0 0 0-.112-.272 4.574 4.574 0 0 1-1.448-3.456 4.585 4.585 0 0 1 4.392-4.448 4.574 4.574 0 0 1 4.752 4.568c0 1.312-.56 2.496-1.448 3.336a.381.381 0 0 0-.112.272c.016.312.008.616-.008.96-.008.088.096.152.176.096a5.661 5.661 0 0 0 2.472-4.672c.008-3.184-2.656-5.768-5.872-5.64Z"
17-
clipRule="evenodd"
18-
/>
19-
</g>
20-
<defs>
21-
<linearGradient
22-
id="b"
23-
x1="12"
24-
x2="12"
25-
y1="0"
26-
y2="24"
27-
gradientUnits="userSpaceOnUse"
28-
>
29-
<stop stopColor="#F452FF" />
30-
<stop offset="1" stopColor="#832BC1" />
31-
</linearGradient>
32-
<clipPath id="a">
33-
<path fill="#fff" d="M0 0h24v24H0z" />
34-
</clipPath>
35-
</defs>
36-
</StyledIcon>
37-
));
6+
const ApplePodcasts = forwardRef((props, ref) => {
7+
const prefix = generatePrefix('ApplePodcasts');
8+
return (
9+
<StyledIcon
10+
ref={ref}
11+
viewBox="0 0 24 24"
12+
a11yTitle="ApplePodcasts"
13+
{...props}
14+
>
15+
<g clipPath={`url(#${prefix}-a)`}>
16+
<path
17+
fill={`url(#${prefix}-b)`}
18+
fillRule="evenodd"
19+
d="M21.992 22.816c.768-.592 1.304-1.424 1.536-2.016.464-1.192.472-2.544.472-3.4V6.6c0-.848 0-2.208-.472-3.4-.232-.592-.776-1.432-1.536-2.016a4.99 4.99 0 0 0-1.688-.88C19.528.08 18.584 0 17.4 0H6.6C5.416 0 4.472.08 3.696.304a5.137 5.137 0 0 0-1.688.88C1.24 1.776.704 2.608.472 3.2.008 4.392 0 5.744 0 6.6v10.8c0 .856.008 2.208.472 3.4.232.592.776 1.432 1.536 2.016.44.344.968.664 1.688.88.776.224 1.72.304 2.904.304h10.8c1.184 0 2.136-.072 2.904-.304a5.137 5.137 0 0 0 1.688-.88ZM3.56 10.992c.064-4.592 3.824-8.32 8.416-8.336 4.664-.008 8.464 3.784 8.48 8.44 0 3.68-2.36 6.816-5.648 7.968-.08.032-.168-.032-.152-.12l.12-.864a.272.272 0 0 1 .168-.232c2.6-1.144 4.424-3.736 4.424-6.752 0-4.08-3.336-7.392-7.424-7.36-3.992.032-7.256 3.288-7.296 7.288a7.365 7.365 0 0 0 4.424 6.824.317.317 0 0 1 .168.232c.021.192.05.384.078.576l.042.288c.008.08-.072.152-.152.12-3.32-1.168-5.696-4.352-5.648-8.072Zm10.408-.584c0 1.088-.88 1.968-1.968 1.968a1.967 1.967 0 0 1-1.968-1.968c0-1.088.88-1.968 1.968-1.968s1.968.888 1.968 1.968Zm.088 4.08a1.069 1.069 0 0 0-.32-.688c-.36-.376-.992-.624-1.736-.624s-1.376.24-1.736.624c-.184.2-.288.4-.32.688-.064.558-.024 1.037.04 1.807v.009c.064.736.184 1.72.336 2.712.112.712.2 1.096.28 1.368.136.448.624.832 1.4.832.776 0 1.272-.392 1.4-.832.08-.272.168-.656.28-1.368.152-1 .272-1.976.336-2.712.072-.776.104-1.256.04-1.816Zm-2.272-9.032c-2.992.112-5.392 2.584-5.432 5.576a5.65 5.65 0 0 0 2.472 4.744c.072.048.176-.008.176-.096a7.853 7.853 0 0 1-.008-.968.326.326 0 0 0-.112-.272 4.574 4.574 0 0 1-1.448-3.456 4.585 4.585 0 0 1 4.392-4.448 4.574 4.574 0 0 1 4.752 4.568c0 1.312-.56 2.496-1.448 3.336a.381.381 0 0 0-.112.272c.016.312.008.616-.008.96-.008.088.096.152.176.096a5.661 5.661 0 0 0 2.472-4.672c.008-3.184-2.656-5.768-5.872-5.64Z"
20+
clipRule="evenodd"
21+
/>
22+
</g>
23+
<defs>
24+
<linearGradient
25+
id={`${prefix}-b`}
26+
x1="12"
27+
x2="12"
28+
y1="0"
29+
y2="24"
30+
gradientUnits="userSpaceOnUse"
31+
>
32+
<stop stopColor="#F452FF" />
33+
<stop offset="1" stopColor="#832BC1" />
34+
</linearGradient>
35+
<clipPath id={`${prefix}-a`}>
36+
<path fill="#fff" d="M0 0h24v24H0z" />
37+
</clipPath>
38+
</defs>
39+
</StyledIcon>
40+
);
41+
});
3842

3943
ApplePodcasts.displayName = 'ApplePodcasts';
4044

‎src/js/icons/Edge.js

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,73 @@
11
import React, { forwardRef } from 'react';
22

33
import { StyledIcon } from '../StyledIcon';
4+
import { generatePrefix } from '../utils';
45

5-
const Edge = forwardRef((props, ref) => (
6-
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Edge" {...props}>
7-
<g clipPath="url(#a)">
8-
<path
9-
fill="url(#b)"
10-
d="M21.666 17.873c-.32.165-.65.308-.991.44a9.628 9.628 0 0 1-3.369.606c-4.437 0-8.3-3.05-8.3-6.97 0-1.102.638-2.06 1.54-2.556-4.018.166-5.042 4.35-5.042 6.795 0 6.927 6.386 7.632 7.762 7.632.737 0 1.86-.22 2.532-.43a.539.539 0 0 0 .12-.044 12.066 12.066 0 0 0 6.243-4.956c.21-.319-.154-.704-.495-.517Z"
11-
/>
12-
<path
13-
fill="url(#c)"
14-
d="M9.908 22.641a7.411 7.411 0 0 1-2.136-2.004 7.623 7.623 0 0 1-1.42-4.449 7.616 7.616 0 0 1 2.896-6.002 7.658 7.658 0 0 1 1.288-.804c.297-.143.792-.385 1.453-.374 1.1.011 1.937.573 2.41 1.211a3.02 3.02 0 0 1 .595 1.751c0-.022 2.29-7.466-7.508-7.466C3.391 4.504 0 8.414 0 11.849c0 2.17.506 3.91 1.134 5.253a12.065 12.065 0 0 0 7.21 6.343 11.88 11.88 0 0 0 3.667.573c1.32 0 2.598-.22 3.798-.617a7.14 7.14 0 0 1-2.136.33 7.2 7.2 0 0 1-3.765-1.09Z"
15-
/>
16-
<path
17-
fill="url(#d)"
18-
d="M14.279 13.964c-.077.099-.309.23-.309.528 0 .242.154.485.44.683 1.355.936 3.887.815 3.898.815 1.046 0 1.992-.297 2.84-.782.386-.22.738-.496 1.057-.793 1.101-1.046 1.773-2.522 1.795-4.163.022-2.103-.75-3.502-1.068-4.118C20.95 2.235 16.668 0 12 0 5.427 0 .088 5.286 0 11.838c.044-3.425 3.446-6.2 7.497-6.2.33 0 2.202.033 3.941.947 1.53.804 2.334 1.773 2.896 2.742.583 1.002.682 2.269.682 2.764 0 .496-.264 1.256-.737 1.873Z"
19-
/>
20-
</g>
21-
<defs>
22-
<linearGradient
23-
id="b"
24-
x1="5.501"
25-
x2="22.225"
26-
y1="16.605"
27-
y2="16.605"
28-
gradientUnits="userSpaceOnUse"
29-
>
30-
<stop stopColor="#0C59A4" />
31-
<stop offset="1" stopColor="#114A8B" />
32-
</linearGradient>
33-
<linearGradient
34-
id="c"
35-
x1="14.318"
36-
x2="3.868"
37-
y1="9.347"
38-
y2="20.726"
39-
gradientUnits="userSpaceOnUse"
40-
>
41-
<stop stopColor="#1B9DE2" />
42-
<stop offset=".162" stopColor="#1595DF" />
43-
<stop offset=".667" stopColor="#0680D7" />
44-
<stop offset="1" stopColor="#0078D4" />
45-
</linearGradient>
46-
<radialGradient
47-
id="d"
48-
cx="0"
49-
cy="0"
50-
r="1"
51-
gradientTransform="rotate(92.128 -.93 3.333) scale(18.9898 40.4341)"
52-
gradientUnits="userSpaceOnUse"
53-
>
54-
<stop stopColor="#35C1F1" />
55-
<stop offset=".111" stopColor="#34C1ED" />
56-
<stop offset=".232" stopColor="#2FC2DF" />
57-
<stop offset=".315" stopColor="#2BC3D2" />
58-
<stop offset=".673" stopColor="#36C752" />
59-
<stop offset="1" stopColor="#36C752" />
60-
</radialGradient>
61-
<clipPath id="a">
62-
<path fill="#fff" d="M0 0h24v24H0z" />
63-
</clipPath>
64-
</defs>
65-
</StyledIcon>
66-
));
6+
const Edge = forwardRef((props, ref) => {
7+
const prefix = generatePrefix('Edge');
8+
return (
9+
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Edge" {...props}>
10+
<g clipPath={`url(#${prefix}-a)`}>
11+
<path
12+
fill={`url(#${prefix}-b)`}
13+
d="M21.666 17.873c-.32.165-.65.308-.991.44a9.628 9.628 0 0 1-3.369.606c-4.437 0-8.3-3.05-8.3-6.97 0-1.102.638-2.06 1.54-2.556-4.018.166-5.042 4.35-5.042 6.795 0 6.927 6.386 7.632 7.762 7.632.737 0 1.86-.22 2.532-.43a.539.539 0 0 0 .12-.044 12.066 12.066 0 0 0 6.243-4.956c.21-.319-.154-.704-.495-.517Z"
14+
/>
15+
<path
16+
fill={`url(#${prefix}-c)`}
17+
d="M9.908 22.641a7.411 7.411 0 0 1-2.136-2.004 7.623 7.623 0 0 1-1.42-4.449 7.616 7.616 0 0 1 2.896-6.002 7.658 7.658 0 0 1 1.288-.804c.297-.143.792-.385 1.453-.374 1.1.011 1.937.573 2.41 1.211a3.02 3.02 0 0 1 .595 1.751c0-.022 2.29-7.466-7.508-7.466C3.391 4.504 0 8.414 0 11.849c0 2.17.506 3.91 1.134 5.253a12.065 12.065 0 0 0 7.21 6.343 11.88 11.88 0 0 0 3.667.573c1.32 0 2.598-.22 3.798-.617a7.14 7.14 0 0 1-2.136.33 7.2 7.2 0 0 1-3.765-1.09Z"
18+
/>
19+
<path
20+
fill={`url(#${prefix}-d)`}
21+
d="M14.279 13.964c-.077.099-.309.23-.309.528 0 .242.154.485.44.683 1.355.936 3.887.815 3.898.815 1.046 0 1.992-.297 2.84-.782.386-.22.738-.496 1.057-.793 1.101-1.046 1.773-2.522 1.795-4.163.022-2.103-.75-3.502-1.068-4.118C20.95 2.235 16.668 0 12 0 5.427 0 .088 5.286 0 11.838c.044-3.425 3.446-6.2 7.497-6.2.33 0 2.202.033 3.941.947 1.53.804 2.334 1.773 2.896 2.742.583 1.002.682 2.269.682 2.764 0 .496-.264 1.256-.737 1.873Z"
22+
/>
23+
</g>
24+
<defs>
25+
<linearGradient
26+
id={`${prefix}-b`}
27+
x1="5.501"
28+
x2="22.225"
29+
y1="16.605"
30+
y2="16.605"
31+
gradientUnits="userSpaceOnUse"
32+
>
33+
<stop stopColor="#0C59A4" />
34+
<stop offset="1" stopColor="#114A8B" />
35+
</linearGradient>
36+
<linearGradient
37+
id={`${prefix}-c`}
38+
x1="14.318"
39+
x2="3.868"
40+
y1="9.347"
41+
y2="20.726"
42+
gradientUnits="userSpaceOnUse"
43+
>
44+
<stop stopColor="#1B9DE2" />
45+
<stop offset=".162" stopColor="#1595DF" />
46+
<stop offset=".667" stopColor="#0680D7" />
47+
<stop offset="1" stopColor="#0078D4" />
48+
</linearGradient>
49+
<radialGradient
50+
id={`${prefix}-d`}
51+
cx="0"
52+
cy="0"
53+
r="1"
54+
gradientTransform="rotate(92.128 -.93 3.333) scale(18.9898 40.4341)"
55+
gradientUnits="userSpaceOnUse"
56+
>
57+
<stop stopColor="#35C1F1" />
58+
<stop offset=".111" stopColor="#34C1ED" />
59+
<stop offset=".232" stopColor="#2FC2DF" />
60+
<stop offset=".315" stopColor="#2BC3D2" />
61+
<stop offset=".673" stopColor="#36C752" />
62+
<stop offset="1" stopColor="#36C752" />
63+
</radialGradient>
64+
<clipPath id={`${prefix}-a`}>
65+
<path fill="#fff" d="M0 0h24v24H0z" />
66+
</clipPath>
67+
</defs>
68+
</StyledIcon>
69+
);
70+
});
6771

6872
Edge.displayName = 'Edge';
6973

‎src/js/icons/Facebook.js

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
import React, { forwardRef } from 'react';
22

33
import { StyledIcon } from '../StyledIcon';
4+
import { generatePrefix } from '../utils';
45

5-
const Facebook = forwardRef((props, ref) => (
6-
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Facebook" {...props}>
7-
<g clipPath="url(#a)">
8-
<path
9-
fill="#1089FB"
10-
d="M12 0C5.373 0 0 5.373 0 12c0 6.016 4.432 10.984 10.207 11.852V15.18h-2.97v-3.155h2.97V9.927c0-3.475 1.693-5 4.58-5 1.384 0 2.115.102 2.462.149v2.753h-1.97c-1.226 0-1.655 1.163-1.655 2.473v1.724h3.594l-.488 3.155h-3.106v8.696C19.481 23.083 24 18.075 24 12c0-6.627-5.373-12-12-12Z"
11-
/>
12-
</g>
13-
<defs>
14-
<clipPath id="a">
15-
<path fill="#fff" d="M0 0h24v24H0z" />
16-
</clipPath>
17-
</defs>
18-
</StyledIcon>
19-
));
6+
const Facebook = forwardRef((props, ref) => {
7+
const prefix = generatePrefix('Facebook');
8+
return (
9+
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Facebook" {...props}>
10+
<g clipPath={`url(#${prefix}-a)`}>
11+
<path
12+
fill="#1089FB"
13+
d="M12 0C5.373 0 0 5.373 0 12c0 6.016 4.432 10.984 10.207 11.852V15.18h-2.97v-3.155h2.97V9.927c0-3.475 1.693-5 4.58-5 1.384 0 2.115.102 2.462.149v2.753h-1.97c-1.226 0-1.655 1.163-1.655 2.473v1.724h3.594l-.488 3.155h-3.106v8.696C19.481 23.083 24 18.075 24 12c0-6.627-5.373-12-12-12Z"
14+
/>
15+
</g>
16+
<defs>
17+
<clipPath id={`${prefix}-a`}>
18+
<path fill="#fff" d="M0 0h24v24H0z" />
19+
</clipPath>
20+
</defs>
21+
</StyledIcon>
22+
);
23+
});
2024

2125
Facebook.displayName = 'Facebook';
2226

‎src/js/icons/GooglePay.js

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
import React, { forwardRef } from 'react';
22

33
import { StyledIcon } from '../StyledIcon';
4+
import { generatePrefix } from '../utils';
45

5-
const GooglePay = forwardRef((props, ref) => (
6-
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="GooglePay" {...props}>
7-
<g clipPath="url(#a)">
8-
<path
9-
fill="#EB4434"
10-
d="m12.645 14.34 5.937-10.285 3.234 1.867a4.366 4.366 0 0 1 1.598 5.964l-3.344 5.791a2.732 2.732 0 0 1-3.728 1l-3.002-1.732a1.909 1.909 0 0 1-.695-2.606Z"
11-
/>
12-
<path
13-
fill="#FDBD00"
14-
d="M12.012 7.2 4.625 19.991l3.235 1.867a4.367 4.367 0 0 0 5.964-1.598l4.791-8.298a2.729 2.729 0 0 0-1-3.729l-3.002-1.732a1.903 1.903 0 0 0-2.601.697Z"
15-
/>
16-
<path
17-
fill="#2DA94F"
18-
d="m18.582 4.053-2.29-1.32A5.456 5.456 0 0 0 8.839 4.73l-4.246 7.352a2.729 2.729 0 0 0 1 3.728l2.289 1.32a2.729 2.729 0 0 0 3.728-1l5.069-8.779a3.81 3.81 0 0 1 5.206-1.394l-3.302-1.904Z"
19-
/>
20-
<path
21-
fill="#2B7AF0"
22-
d="M9.496 6.885 6.971 5.43a2.357 2.357 0 0 0-3.215.86L.725 11.524a5.383 5.383 0 0 0 1.977 7.363l1.923 1.108 2.332 1.343 1.012.582a4.138 4.138 0 0 1-1.27-5.51l.786-1.355 2.872-4.964a2.343 2.343 0 0 0-.86-3.207Z"
23-
/>
24-
</g>
25-
<defs>
26-
<clipPath id="a">
27-
<path fill="#fff" d="M0 0h24v24H0z" />
28-
</clipPath>
29-
</defs>
30-
</StyledIcon>
31-
));
6+
const GooglePay = forwardRef((props, ref) => {
7+
const prefix = generatePrefix('GooglePay');
8+
return (
9+
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="GooglePay" {...props}>
10+
<g clipPath={`url(#${prefix}-a)`}>
11+
<path
12+
fill="#EB4434"
13+
d="m12.645 14.34 5.937-10.285 3.234 1.867a4.366 4.366 0 0 1 1.598 5.964l-3.344 5.791a2.732 2.732 0 0 1-3.728 1l-3.002-1.732a1.909 1.909 0 0 1-.695-2.606Z"
14+
/>
15+
<path
16+
fill="#FDBD00"
17+
d="M12.012 7.2 4.625 19.991l3.235 1.867a4.367 4.367 0 0 0 5.964-1.598l4.791-8.298a2.729 2.729 0 0 0-1-3.729l-3.002-1.732a1.903 1.903 0 0 0-2.601.697Z"
18+
/>
19+
<path
20+
fill="#2DA94F"
21+
d="m18.582 4.053-2.29-1.32A5.456 5.456 0 0 0 8.839 4.73l-4.246 7.352a2.729 2.729 0 0 0 1 3.728l2.289 1.32a2.729 2.729 0 0 0 3.728-1l5.069-8.779a3.81 3.81 0 0 1 5.206-1.394l-3.302-1.904Z"
22+
/>
23+
<path
24+
fill="#2B7AF0"
25+
d="M9.496 6.885 6.971 5.43a2.357 2.357 0 0 0-3.215.86L.725 11.524a5.383 5.383 0 0 0 1.977 7.363l1.923 1.108 2.332 1.343 1.012.582a4.138 4.138 0 0 1-1.27-5.51l.786-1.355 2.872-4.964a2.343 2.343 0 0 0-.86-3.207Z"
26+
/>
27+
</g>
28+
<defs>
29+
<clipPath id={`${prefix}-a`}>
30+
<path fill="#fff" d="M0 0h24v24H0z" />
31+
</clipPath>
32+
</defs>
33+
</StyledIcon>
34+
);
35+
});
3236

3337
GooglePay.displayName = 'GooglePay';
3438

0 commit comments

Comments
 (0)