gambitph
Uploaded SVG icon from Icon block causes the Icon List icons to be invisible
Describe the bug
- Issue only happens with this SVG icon
- Issue both in editor and frontend
- More details here: https://www.notion.so/Torsten-Wagner-f5946c334e754fbebc891c936d3fc026
- Sample page: https://gambitsandbox.instawp.xyz/andrea/icon-list-svg-icon-issue/
To Reproduce Steps to reproduce the behavior:
-
Add a new page
-
Add these blocks: icon list issue.txt
-
Add an Icon block
-
Use the SVG icon in the description above
-
See that the Icon List icons are not visible
-
Save page and view frontend
-
Repeat Step 5
Expected behavior When uploading an SVG icon to Icon block, it should not cause the icons from Icon List block to be invisible
Screenshots
https://github.com/user-attachments/assets/95add11d-ad28-4a1e-9fa0-6305dee623a6
By investigating the two SVGs involved, we can see that there is a conflict in the <clipPath> elements.
SVG 1:
<svg class="ugb-custom-icon" id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 90.55 90.36" aria-hidden="true" width="32" height="32">
<defs>
<clipPath id="clippath">
<rect width="90.55" height="90.36"></rect>
</clipPath>
</defs>
<g id="Ebene_1-2" data-name="Ebene 1">
<path d="M57.66,76.24c0,1.95-1.58,3.53-3.54,3.53h-17.69c-1.95,0-3.54-1.57-3.54-3.53v-21.18c0-1.95,1.58-3.53,3.54-3.53h17.69c1.95,0,3.54,1.57,3.54,3.53v21.18ZM88.48,40.19L50.28,2.06c-2.76-2.76-7.24-2.76-10,0L2.07,40.19c-2.76,2.75-2.76,7.23,0,9.98,2.12,2.11,5.25,2.6,7.84,1.48v28.12c0,5.85,4.75,10.59,10.61,10.59h49.52c5.86,0,10.61-4.74,10.61-10.59v-28.12c2.59,1.13,5.72.63,7.83-1.48,2.76-2.76,2.76-7.23,0-9.98Z"></path>
</g>
</svg>
SVG 2:
<svg class="ugb-custom-icon" id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 318.53 301.57">
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-1, .cls-2 {
stroke-width: 0px;
}
.cls-3 {
clip-path: url(#clippath);
}
.cls-2 {
fill: #75b829;
}
</style>
<clipPath id="clippath">
<rect class="cls-1" x="0" width="318.53" height="301.57"></rect>
</clipPath>
</defs>
<g id="Ebene_1-2" data-name="Ebene 1">
<g class="cls-3">
<path class="cls-2" d="M137.51,147.09l-25.29,25.29c-7.86,7.86-7.84,20.61,0,28.46l5.45,5.45c7.84,7.86,20.61,7.84,28.46,0l25.29-25.29-33.9-33.9Z"></path>
<path class="cls-2" d="M146.44,137.61l34.48,34.48,125.99-111.74c7.19-6.39,11.32-15.18,11.6-24.8.29-9.62-3.29-18.64-10.09-25.44-6.78-6.8-15.84-10.37-25.44-10.09-9.6.29-18.4,4.41-24.78,11.6l-111.76,125.99Z"></path>
<path class="cls-2" d="M67.98,261.96c.08-2.28,1.03-4.41,2.62-6.01l39.18-39.18c-.44-.41-.88-.82-1.3-1.24l-5.45-5.45c-.85-.85-1.62-1.7-2.35-2.61l-39.29,39.24c-3.94,3.94-6.23,9.18-6.43,14.74l-.68,18.43c-.11,2.82-1.47,5.37-3.78,7.01-2.31,1.62-5.17,2.08-7.86,1.24l-34.2-10.65c-3.44-1.06-7.08.86-8.15,4.29-1.08,3.44.85,7.08,4.28,8.15l34.22,10.63c6.58,2.06,13.61.94,19.23-3.06,5.63-3.99,9.01-10.22,9.27-17.14l.68-18.4Z"></path>
</g>
</g>
</svg>
Notice how the id of the <clipPath> tag in both SVGs are the same, resulting to a conflict (i.e., the first one overriding the second one).
One solution is to edit the SVGs and ensure uniqueness of id. We can use SVG cleaner tool to do this, which the user already did based on exchanges in the Notion page.
@Arukuen during the uploading of the custom SVG, can we simply strip out the id attribute in the svg tag to fix things?
@Arukuen Revert the fix on removing the <defs> of SVGs.
Possible fix: During uploading of custom icons, regenerate any IDs present in the SVG into unique ones.