Skip to content

Commit

Permalink
Merge pull request #328 from grommet/icon-id-collision
Browse files Browse the repository at this point in the history 
Fix icon id collision
  • Loading branch information
@taysea
taysea authored Dec 13, 2023
2 parents 2c16c9d + 94c8fa9 commit d28d9b1
Show file tree
Hide file tree
Showing 13 changed files with 356 additions and 302 deletions.
64 changes: 32 additions & 32 deletions src/js/__tests__/__snapshots__/Icon-test.js.snap
View file

Large diffs are not rendered by default.

60 changes: 32 additions & 28 deletions src/js/icons/AppleMusic.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
import React, { forwardRef } from 'react';

import { StyledIcon } from '../StyledIcon';
import { generatePrefix } from '../utils';

const AppleMusic = forwardRef((props, ref) => (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="AppleMusic" {...props}>
<g clipPath="url(#a)">
<path
fill="url(#b)"
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</g>
<defs>
<linearGradient
id="b"
x1="12"
x2="12"
y1="23.907"
y2=".517"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FA233B" />
<stop offset="1" stopColor="#FB5C74" />
</linearGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
));
const AppleMusic = forwardRef((props, ref) => {
const prefix = generatePrefix('AppleMusic');
return (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="AppleMusic" {...props}>
<g clipPath={`url(#${prefix}-a)`}>
<path
fill={`url(#${prefix}-b)`}
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</g>
<defs>
<linearGradient
id={`${prefix}-b`}
x1="12"
x2="12"
y1="23.907"
y2=".517"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#FA233B" />
<stop offset="1" stopColor="#FB5C74" />
</linearGradient>
<clipPath id={`${prefix}-a`}>
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
);
});

AppleMusic.displayName = 'AppleMusic';

Expand Down
70 changes: 37 additions & 33 deletions src/js/icons/ApplePodcasts.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
import React, { forwardRef } from 'react';

import { StyledIcon } from '../StyledIcon';
import { generatePrefix } from '../utils';

const ApplePodcasts = forwardRef((props, ref) => (
<StyledIcon
ref={ref}
viewBox="0 0 24 24"
a11yTitle="ApplePodcasts"
{...props}
>
<g clipPath="url(#a)">
<path
fill="url(#b)"
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</g>
<defs>
<linearGradient
id="b"
x1="12"
x2="12"
y1="0"
y2="24"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F452FF" />
<stop offset="1" stopColor="#832BC1" />
</linearGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
));
const ApplePodcasts = forwardRef((props, ref) => {
const prefix = generatePrefix('ApplePodcasts');
return (
<StyledIcon
ref={ref}
viewBox="0 0 24 24"
a11yTitle="ApplePodcasts"
{...props}
>
<g clipPath={`url(#${prefix}-a)`}>
<path
fill={`url(#${prefix}-b)`}
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</g>
<defs>
<linearGradient
id={`${prefix}-b`}
x1="12"
x2="12"
y1="0"
y2="24"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#F452FF" />
<stop offset="1" stopColor="#832BC1" />
</linearGradient>
<clipPath id={`${prefix}-a`}>
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
);
});

ApplePodcasts.displayName = 'ApplePodcasts';

Expand Down
128 changes: 66 additions & 62 deletions src/js/icons/Edge.js
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,73 @@
import React, { forwardRef } from 'react';

import { StyledIcon } from '../StyledIcon';
import { generatePrefix } from '../utils';

const Edge = forwardRef((props, ref) => (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Edge" {...props}>
<g clipPath="url(#a)">
<path
fill="url(#b)"
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"
/>
<path
fill="url(#c)"
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"
/>
<path
fill="url(#d)"
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"
/>
</g>
<defs>
<linearGradient
id="b"
x1="5.501"
x2="22.225"
y1="16.605"
y2="16.605"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C59A4" />
<stop offset="1" stopColor="#114A8B" />
</linearGradient>
<linearGradient
id="c"
x1="14.318"
x2="3.868"
y1="9.347"
y2="20.726"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1B9DE2" />
<stop offset=".162" stopColor="#1595DF" />
<stop offset=".667" stopColor="#0680D7" />
<stop offset="1" stopColor="#0078D4" />
</linearGradient>
<radialGradient
id="d"
cx="0"
cy="0"
r="1"
gradientTransform="rotate(92.128 -.93 3.333) scale(18.9898 40.4341)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#35C1F1" />
<stop offset=".111" stopColor="#34C1ED" />
<stop offset=".232" stopColor="#2FC2DF" />
<stop offset=".315" stopColor="#2BC3D2" />
<stop offset=".673" stopColor="#36C752" />
<stop offset="1" stopColor="#36C752" />
</radialGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
));
const Edge = forwardRef((props, ref) => {
const prefix = generatePrefix('Edge');
return (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Edge" {...props}>
<g clipPath={`url(#${prefix}-a)`}>
<path
fill={`url(#${prefix}-b)`}
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"
/>
<path
fill={`url(#${prefix}-c)`}
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"
/>
<path
fill={`url(#${prefix}-d)`}
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"
/>
</g>
<defs>
<linearGradient
id={`${prefix}-b`}
x1="5.501"
x2="22.225"
y1="16.605"
y2="16.605"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#0C59A4" />
<stop offset="1" stopColor="#114A8B" />
</linearGradient>
<linearGradient
id={`${prefix}-c`}
x1="14.318"
x2="3.868"
y1="9.347"
y2="20.726"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#1B9DE2" />
<stop offset=".162" stopColor="#1595DF" />
<stop offset=".667" stopColor="#0680D7" />
<stop offset="1" stopColor="#0078D4" />
</linearGradient>
<radialGradient
id={`${prefix}-d`}
cx="0"
cy="0"
r="1"
gradientTransform="rotate(92.128 -.93 3.333) scale(18.9898 40.4341)"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#35C1F1" />
<stop offset=".111" stopColor="#34C1ED" />
<stop offset=".232" stopColor="#2FC2DF" />
<stop offset=".315" stopColor="#2BC3D2" />
<stop offset=".673" stopColor="#36C752" />
<stop offset="1" stopColor="#36C752" />
</radialGradient>
<clipPath id={`${prefix}-a`}>
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
);
});

Edge.displayName = 'Edge';

Expand Down
34 changes: 19 additions & 15 deletions src/js/icons/Facebook.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import React, { forwardRef } from 'react';

import { StyledIcon } from '../StyledIcon';
import { generatePrefix } from '../utils';

const Facebook = forwardRef((props, ref) => (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Facebook" {...props}>
<g clipPath="url(#a)">
<path
fill="#1089FB"
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"
/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
));
const Facebook = forwardRef((props, ref) => {
const prefix = generatePrefix('Facebook');
return (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="Facebook" {...props}>
<g clipPath={`url(#${prefix}-a)`}>
<path
fill="#1089FB"
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"
/>
</g>
<defs>
<clipPath id={`${prefix}-a`}>
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
);
});

Facebook.displayName = 'Facebook';

Expand Down
58 changes: 31 additions & 27 deletions src/js/icons/GooglePay.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,38 @@
import React, { forwardRef } from 'react';

import { StyledIcon } from '../StyledIcon';
import { generatePrefix } from '../utils';

const GooglePay = forwardRef((props, ref) => (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="GooglePay" {...props}>
<g clipPath="url(#a)">
<path
fill="#EB4434"
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"
/>
<path
fill="#FDBD00"
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"
/>
<path
fill="#2DA94F"
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"
/>
<path
fill="#2B7AF0"
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"
/>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
));
const GooglePay = forwardRef((props, ref) => {
const prefix = generatePrefix('GooglePay');
return (
<StyledIcon ref={ref} viewBox="0 0 24 24" a11yTitle="GooglePay" {...props}>
<g clipPath={`url(#${prefix}-a)`}>
<path
fill="#EB4434"
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"
/>
<path
fill="#FDBD00"
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"
/>
<path
fill="#2DA94F"
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"
/>
<path
fill="#2B7AF0"
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"
/>
</g>
<defs>
<clipPath id={`${prefix}-a`}>
<path fill="#fff" d="M0 0h24v24H0z" />
</clipPath>
</defs>
</StyledIcon>
);
});

GooglePay.displayName = 'GooglePay';

Expand Down
Loading

0 comments on commit d28d9b1

Please sign in to comment.