Skip to content

Commit 23652f9

Browse files
committed
refactor: replace clip-path with mask for improved SVG rendering in Git icon
1 parent a1d4c3f commit 23652f9

1 file changed

Lines changed: 16 additions & 26 deletions

File tree

packages/icon/icons/git.tsx

Lines changed: 16 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,24 @@ export const Git = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
1111
className={cn("", className)}
1212
{...props}
1313
>
14-
<g clip-path="url(#clip0_1970_2128)">
14+
<mask
15+
id="mask0_2019_2061"
16+
style={{
17+
maskType: "luminance",
18+
}}
19+
maskUnits="userSpaceOnUse"
20+
x="0"
21+
y="0"
22+
width="24"
23+
height="24"
24+
>
25+
<path d="M0 0H24V24H0V0Z" fill="white" />
26+
</mask>
27+
<g mask="url(#mask0_2019_2061)">
1528
<path
16-
d="M5.75 22C7.13071 22 8.25 20.8807 8.25 19.5C8.25 18.1193 7.13071 17 5.75 17C4.36929 17 3.25 18.1193 3.25 19.5C3.25 20.8807 4.36929 22 5.75 22Z"
17-
stroke="currentColor"
18-
stroke-width="1.5"
19-
/>
20-
<path
21-
d="M5.75 7C7.13071 7 8.25 5.88071 8.25 4.5C8.25 3.11929 7.13071 2 5.75 2C4.36929 2 3.25 3.11929 3.25 4.5C3.25 5.88071 4.36929 7 5.75 7Z"
22-
stroke="currentColor"
23-
stroke-width="1.5"
24-
/>
25-
<path
26-
d="M18.25 14.5C19.6307 14.5 20.75 13.3807 20.75 12C20.75 10.6193 19.6307 9.5 18.25 9.5C16.8693 9.5 15.75 10.6193 15.75 12C15.75 13.3807 16.8693 14.5 18.25 14.5Z"
27-
stroke="currentColor"
28-
stroke-width="1.5"
29-
/>
30-
<path
31-
d="M5.77694 7.34766V16.2577M15.0146 12.0044L9.52462 12.0045C8.15247 12.0045 5.57777 10.9053 5.77322 7.97354"
32-
stroke="currentColor"
33-
stroke-width="1.5"
34-
stroke-linecap="round"
35-
stroke-linejoin="round"
29+
d="M23.5472 10.9313L13.0683 0.453083C12.9247 0.309444 12.7543 0.195498 12.5667 0.117756C12.3791 0.0400142 12.178 0 11.9749 0C11.7719 0 11.5708 0.0400142 11.3832 0.117756C11.1956 0.195498 11.0251 0.309444 10.8816 0.453083L8.7064 2.62932L11.4661 5.38906C11.7906 5.27887 12.1394 5.26167 12.4731 5.3394C12.8069 5.41713 13.1122 5.58669 13.3545 5.8289C13.5983 6.07287 13.7684 6.38051 13.8455 6.71664C13.9226 7.05276 13.9035 7.40379 13.7905 7.72959L16.4512 10.3895C16.7771 10.2764 17.1283 10.2573 17.4645 10.3345C17.8007 10.4118 18.1084 10.5822 18.3522 10.8263C18.5229 10.997 18.6584 11.1997 18.7508 11.4228C18.8433 11.646 18.8909 11.8851 18.8909 12.1266C18.8909 12.3681 18.8433 12.6072 18.7508 12.8303C18.6584 13.0535 18.5229 13.2562 18.3522 13.4269C18.0069 13.7718 17.5388 13.9656 17.0508 13.9656C16.5627 13.9656 16.0947 13.7718 15.7494 13.4269C15.4929 13.17 15.3182 12.843 15.2471 12.487C15.1761 12.1309 15.212 11.7619 15.3503 11.4262L12.869 8.94569V15.4747C13.1309 15.604 13.3582 15.7939 13.5321 16.0287C13.706 16.2634 13.8215 16.5361 13.8689 16.8244C13.9164 17.1126 13.8946 17.408 13.8051 17.6861C13.7157 17.9642 13.5614 18.217 13.3548 18.4235C13.1841 18.5943 12.9813 18.7298 12.7582 18.8222C12.5351 18.9146 12.296 18.9622 12.0545 18.9622C11.813 18.9622 11.5738 18.9146 11.3507 18.8222C11.1276 18.7298 10.9249 18.5943 10.7541 18.4235C10.5833 18.2527 10.4478 18.05 10.3554 17.8269C10.2629 17.6037 10.2153 17.3646 10.2153 17.123C10.2153 16.8815 10.2629 16.6423 10.3554 16.4192C10.4478 16.1961 10.5833 15.9933 10.7541 15.8226C10.9262 15.6501 11.1307 15.5135 11.3559 15.4206V8.83155C11.1317 8.73918 10.9279 8.60341 10.7562 8.43205C10.5846 8.26068 10.4485 8.05709 10.3558 7.83298C10.2631 7.60887 10.2156 7.36865 10.216 7.12611C10.2164 6.88358 10.2647 6.64352 10.3582 6.41972L7.63709 3.69811L0.451219 10.8822C0.161653 11.1723 -0.000976562 11.5655 -0.000976562 11.9754C-0.000976563 12.3853 0.161653 12.7784 0.451219 13.0686L10.9307 23.5481C11.2208 23.8375 11.6139 24.0001 12.0238 24.0001C12.4336 24.0001 12.8267 23.8375 13.1169 23.5481L23.5472 13.1177C23.8368 12.8275 23.9994 12.4344 23.9994 12.0245C23.9994 11.6146 23.8368 11.2214 23.5472 10.9313Z"
30+
fill="currentColor"
3631
/>
3732
</g>
38-
<defs>
39-
<clipPath id="clip0_1970_2128">
40-
<rect width="24" height="24" fill="currentColor" />
41-
</clipPath>
42-
</defs>
4333
</svg>
4434
);

0 commit comments

Comments
 (0)