houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix source icon SVG ID collisions (#22177)

Browse Source 
## Summary

Fixes the Gmail and Google Calendar source icons by replacing
document-global generic SVG IDs (`a`, `b`, `c`, etc.) with icon-specific
IDs. This prevents inline SVG gradients, masks, and filters from
resolving against another icon instance when the icons render together
in the record table actor/source column.

## Root cause

The Gmail and Google Calendar SVG assets both used generic IDs. Browser
SVG fragment references are document-global for inline SVG, so whichever
icon appears first can hijack the other icon's `url(#...)` references.
That made the Calendar icon pick up Gmail gradients, and could also
affect Gmail depending on DOM order.

## Before

<img width="1280" height="720" alt="Before icon collision screenshot"
src="https://github.com/user-attachments/assets/82ce20a8-47c7-4b70-8af2-e134cf88c0b8"
/>

## After

<img width="1280" height="720" alt="After icon collision screenshot"
src="https://github.com/user-attachments/assets/240120a6-b84e-4682-a116-0ccb48192543"
/>

## Validation

- Rendered Gmail + Calendar in both DOM orders via a local browser
fixture.
- Verified the before fixture had 14 generic SVG IDs and the after
fixture had 0.
- Verified 4 SVGs rendered, no cross-icon URL reference problems, and no
browser console warnings/errors.
- Ran `xmllint --noout packages/twenty-ui/src/assets/icons/gmail.svg
packages/twenty-ui/src/assets/icons/google-calendar.svg`.
- Ran `rg -n
"id=\"[a-z]\"|url\(#[a-z]\)|mask=\"url\(#[a-z]\)\"|filter=\"url\(#[a-z]\)\""
packages/twenty-ui/src/assets/icons -S` and confirmed no matches.

`yarn nx build twenty-ui` could not run in this worktree because
`node_modules` is missing, and Yarn reports: `Couldn't find the
node_modules state file`.
This commit is contained in:
Thomas des Francs
2026-06-25 16:22:17 +02:00
committed by GitHub
parent f86bf637d1
commit 9870d1e6a9
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/assets/icons/gmail.svg
+4 -4
View File
@@ -1,9 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="636.363" fill="none" viewBox="0 0 800 636.363">
<path fill="url(#a)" d="M627.272 81.819h172.727v499.999c0 30.123-24.423 54.545-54.545 54.545h-90.909a27.273 27.273 0 0 1-27.273-27.273z"/>
<path fill="url(#gmail-side-gradient)" d="M627.272 81.819h172.727v499.999c0 30.123-24.423 54.545-54.545 54.545h-90.909a27.273 27.273 0 0 1-27.273-27.273z"/>
<path fill="#FC413D" d="M172.728 81.819H.001v499.999c0 30.123 24.422 54.545 54.545 54.545h90.909a27.273 27.273 0 0 0 27.273-27.273z"/>
<path fill="url(#b)" d="M141.937 20.256C105.423-10.435 50.946-5.717 20.255 30.797-10.435 67.306-5.717 121.783 30.796 152.478l345.808 290.677a36.364 36.364 0 0 0 46.796 0l345.808-290.681c36.509-30.691 41.227-85.168 10.536-121.682-30.691-36.509-85.168-41.227-121.677-10.536L400 237.182z"/>
<path fill="url(#gmail-fold-gradient)" d="M141.937 20.256C105.423-10.435 50.946-5.717 20.255 30.797-10.435 67.306-5.717 121.783 30.796 152.478l345.808 290.677a36.364 36.364 0 0 0 46.796 0l345.808-290.681c36.509-30.691 41.227-85.168 10.536-121.682-30.691-36.509-85.168-41.227-121.677-10.536L400 237.182z"/>
<defs>
<linearGradient id="a" x1="165" x2="165" y1="44" y2="166" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.54544 0 0 4.54544 -36.363 -118.18)">
<linearGradient id="gmail-side-gradient" x1="165" x2="165" y1="44" y2="166" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.54544 0 0 4.54544 -36.363 -118.18)">
<stop stop-color="#60D673"/>
<stop offset=".17" stop-color="#42C868"/>
<stop offset=".39" stop-color="#0EBC5F"/>
@@ -11,7 +11,7 @@
<stop offset=".86" stop-color="#3C90FF"/>
<stop offset="1" stop-color="#3186FF"/>
</linearGradient>
<linearGradient id="b" x1="8" x2="184" y1="46.13" y2="46.13" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.54544 0 0 4.54544 -36.363 -118.18)">
<linearGradient id="gmail-fold-gradient" x1="8" x2="184" y1="46.13" y2="46.13" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4.54544 0 0 4.54544 -36.363 -118.18)">
<stop offset=".08" stop-color="#FF63A0"/>
<stop offset=".3" stop-color="#FC413D"/>
<stop offset=".5" stop-color="#FC413D"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

packages/twenty-ui/src/assets/icons/google-calendar.svg
+9 -9
View File
@@ -1,29 +1,29 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="859.095" fill="none" viewBox="0 0 800 859.095">
<path fill="#BBE2FF" d="M64.743 150.866C64.743 67.544 132.287 0 215.609 0h368.782c83.322 0 150.866 67.544 150.866 150.866v159.246c0 83.322-67.544 150.866-150.866 150.866H215.609c-83.322 0-150.866-67.544-150.866-150.866z"/>
<path fill="#3C90FF" d="M1.186 216.827C-9.548 135.255 53.952 62.861 136.221 62.861h527.558c82.274 0 145.769 72.394 135.035 153.966l-32.127 244.151 32.127 244.151c10.733 81.572-52.761 153.966-135.035 153.966H136.221c-82.274 0-145.769-72.394-135.035-153.966l32.127-244.151z"/>
<mask id="a" width="154" height="152" x="19" y="20" maskUnits="userSpaceOnUse">
<mask id="google-calendar-bottom-mask" width="154" height="152" x="19" y="20" maskUnits="userSpaceOnUse">
<path fill="#3C90FF" d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z"/>
</mask>
<g mask="url(#a)" transform="matrix(5.23839 0 0 5.23839 -102.885 -41.907)">
<path fill="url(#b)" d="M0 0h166v76H0z" transform="matrix(1 0 0 -1 13 172)"/>
<g mask="url(#google-calendar-bottom-mask)" transform="matrix(5.23839 0 0 5.23839 -102.885 -41.907)">
<path fill="url(#google-calendar-bottom-gradient)" d="M0 0h166v76H0z" transform="matrix(1 0 0 -1 13 172)"/>
</g>
<mask id="c" width="154" height="152" x="19" y="20" maskUnits="userSpaceOnUse">
<mask id="google-calendar-top-mask" width="154" height="152" x="19" y="20" maskUnits="userSpaceOnUse">
<path fill="#3186FF" d="M19.867 49.392C17.818 33.82 29.94 20 45.645 20h100.71c15.706 0 27.827 13.82 25.778 29.392L166 96l6.133 46.608C174.182 158.18 162.061 172 146.355 172H45.645c-15.706 0-27.827-13.82-25.778-29.392L26 96z"/>
</mask>
<g mask="url(#c)" transform="matrix(5.23839 0 0 5.23839 -102.885 -41.907)">
<path fill="url(#d)" d="M32 27.2C32 16.596 40.596 8 51.2 8h89.6C151.404 8 160 16.596 160 27.2V96H32z" filter="url(#e)"/>
<g mask="url(#google-calendar-top-mask)" transform="matrix(5.23839 0 0 5.23839 -102.885 -41.907)">
<path fill="url(#google-calendar-top-gradient)" d="M32 27.2C32 16.596 40.596 8 51.2 8h89.6C151.404 8 160 16.596 160 27.2V96H32z" filter="url(#google-calendar-top-blur)"/>
</g>
<path fill="#FFF" d="M291.843 656.558q-32.908 0-56.454-10.702t-39.864-28.628q-16.056-18.198-22.745-35.584-6.689-17.386-5.348-21.137a10.843 10.843 0 0 1 5.348-5.888l29.702-11.771q3.74-1.87 7.491-.534 3.74 1.069 8.827 12.305 5.354 11.236 14.982 23.814a74.909 74.909 0 0 0 23.546 19.529q13.651 6.956 33.709 6.956 32.373 0 51.373-18.727 19.262-18.727 19.262-47.622 0-31.305-20.336-48.162-20.331-16.852-53.778-16.852H259.47a9.953 9.953 0 0 1-6.957-2.671q-2.672-2.944-2.677-6.689v-28.628q0-4.018 2.672-6.689a9.534 9.534 0 0 1 6.962-2.944h24.343q29.969 0 48.162-16.323 18.192-16.323 18.192-42.274 0-25.679-16.323-41.467-16.323-15.789-44.945-15.789-16.056 0-27.826 5.354a60.241 60.241 0 0 0-20.336 14.982 118.911 118.911 0 0 0-14.714 19.801q-6.15 10.168-9.901 11.237-3.74.801-7.224-1.336l-28.093-13.646q-3.478-1.875-4.547-5.888-1.068-4.012 6.422-18.727 7.759-14.982 23.542-30.503a110.006 110.006 0 0 1 36.925-24.081q21.137-8.565 49.23-8.56 52.174 0 82.672 27.554 30.503 27.292 30.503 72.243 0 31.037-14.982 53.777-14.719 22.735-41.739 32.111v1.069q32.64 9.628 51.368 35.312 19 25.422 18.994 60.734 0 50.571-35.317 82.945-35.307 32.373-92.038 32.373zm268.467-6.155q-4.547 0-8.03-3.478a11.786 11.786 0 0 1-3.206-8.292V341.113l-60.2 43.342q-3.216 2.41-7.496 1.608a10.267 10.267 0 0 1-6.417-4.012l-17.392-24.62a10.372 10.372 0 0 1-1.875-7.491q.801-4.275 4.28-6.684l106.753-76.255q1.341-1.069 2.944-1.603 1.608-.801 3.745-.801h22.478q4.547 0 7.224 3.211 2.944 2.934 2.944 7.491v363.334q0 4.819-3.478 8.292a10.477 10.477 0 0 1-8.03 3.478z"/>
<defs>
<linearGradient id="b" x1="83" x2="83" y1="76" gradientUnits="userSpaceOnUse">
<linearGradient id="google-calendar-bottom-gradient" x1="83" x2="83" y1="76" gradientUnits="userSpaceOnUse">
<stop stop-color="#4FA0FF"/>
<stop offset="1" stop-color="#3186FF"/>
</linearGradient>
<linearGradient id="d" x1="89.06" x2="89.06" y1="21.75" y2="96.39" gradientUnits="userSpaceOnUse">
<linearGradient id="google-calendar-top-gradient" x1="89.06" x2="89.06" y1="21.75" y2="96.39" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9A8FF"/>
<stop offset=".8" stop-color="#3C90FF"/>
</linearGradient>
<filter id="e" width="152" height="112" x="20" y="-4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<filter id="google-calendar-top-blur" width="152" height="112" x="20" y="-4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" mode="normal"/>
<feGaussianBlur result="effect1_foregroundBlur_37330_7673" stdDeviation="6"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB