search

elrumordelaluz / svgsprit.es

Public endpoint to generate SVG Sprites using svg-spreact
https://svgsprit.es
167 stars 21 forks source link

SVGO clean-up-ids plugin generate the same id #34

Closed dangeezz closed 3 years ago

dangeezz commented 3 years ago

svg children elements (e.g. mask) ids are been minified and renamed but it causes clash of ids in a sprite, hence awkward looking icons

elrumordelaluz commented 3 years ago

Hi @dangeezz, thanks for open the Issue. Could you please share some code example or Icons and result in order to examine what you are describing? Thanks in advance,

dangeezz commented 3 years ago

<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" fill="none" viewBox="0 0 21 20"><defs/><path stroke="#fff" stroke-width="2" d="M1 18V6.56619L10.0857 1.11474C10.2109 1.03966 10.3541 1 10.5 1C10.6459 1 10.7891 1.03966 10.9143 1.11474L14.2875 3.1387L19.5145 6.27489C19.8157 6.45561 20 6.78112 20 7.13238V18C20 18.5523 19.5523 19 19 19H2C1.44772 19 1 18.5523 1 18Z"/><mask id="b" fill="#fff"><path fill-rule="evenodd" d="M0 7.76639C0 7.91132 0.0760413 8.04562 0.200318 8.12019L9.57125 13.7428C9.8518 13.9111 10.1728 14 10.5 14C10.8272 14 11.1482 13.9111 11.4287 13.7428L14.802 11.7188L20.7631 8.14215C20.9101 8.05396 21 7.89512 21 7.72371C21 6.96511 20.1724 6.49655 19.5219 6.88684L11.4287 11.7428C11.1482 11.9111 10.8272 12 10.5 12C10.1728 12 9.8518 11.9111 9.57125 11.7428L1.47807 6.88684C0.827578 6.49655 0 6.96511 0 7.72371V7.76639Z" clip-rule="evenodd"/></mask><path fill="#fff" d="M14.802 11.7188L15.831 13.4338L14.802 11.7188ZM11.4287 11.7428L10.3998 10.0278L11.4287 11.7428ZM20.7631 8.14215L21.7921 9.85713L20.7631 8.14215ZM11.4287 13.7428L10.3998 12.0278L11.4287 13.7428ZM9.57125 13.7428L10.6002 12.0278L9.57125 13.7428ZM19.5219 6.88684L20.5509 8.60183L19.5219 6.88684ZM0.200318 8.12019L1.22931 6.4052L0.200318 8.12019ZM1.22931 6.4052L10.6002 12.0278L8.54226 15.4577L-0.828674 9.83518L1.22931 6.4052ZM10.3998 12.0278L13.773 10.0038L15.831 13.4338L12.4577 15.4577L10.3998 12.0278ZM13.773 10.0038L19.7341 6.42716L21.7921 9.85713L15.831 13.4338L13.773 10.0038ZM20.5509 8.60183L12.4577 13.4577L10.3998 10.0278L18.4929 5.17186L20.5509 8.60183ZM8.54226 13.4577L0.449081 8.60183L2.50706 5.17186L10.6002 10.0278L8.54226 13.4577ZM2 7.72371V7.76639H-2V7.72371H2ZM0.449081 8.60183C1.13163 9.01136 2 8.5197 2 7.72371H-2C-2 5.41052 0.523522 3.98173 2.50706 5.17186L0.449081 8.60183ZM10.5 14C9.81034 14 9.13364 13.8126 8.54226 13.4577L10.6002 10.0278C10.57 10.0096 10.5353 10 10.5 10V14ZM12.4577 13.4577C11.8664 13.8126 11.1897 14 10.5 14V10C10.4647 10 10.43 10.0096 10.3998 10.0278L12.4577 13.4577ZM19.7341 6.42716C19.2787 6.70042 19 7.1926 19 7.72371H23C23 8.59765 22.5415 9.4075 21.7921 9.85713L19.7341 6.42716ZM10.5 12C10.4647 12 10.43 12.0096 10.3998 12.0278L12.4577 15.4577C11.8664 15.8126 11.1897 16 10.5 16V12ZM10.6002 12.0278C10.57 12.0096 10.5353 12 10.5 12V16C9.81034 16 9.13364 15.8126 8.54226 15.4577L10.6002 12.0278ZM19 7.72371C19 8.5197 19.8684 9.01136 20.5509 8.60183L18.4929 5.17186C20.4765 3.98173 23 5.41052 23 7.72371H19ZM-0.828674 9.83518C-1.55536 9.39916 -2 8.61385 -2 7.76639H2C2 7.2088 1.70744 6.69209 1.22931 6.4052L-0.828674 9.83518Z" mask="url(#b)"/></svg>

`

`

dangeezz commented 3 years ago

This two icons when processed with any option the <mask /> id generated are the same and the conflict results in a broken icon

dangeezz commented 3 years ago

INDIVIDUAL FILES

Screen Shot 2021-06-21 at 09 39 50 Screen Shot 2021-06-21 at 09 40 02

RESULT

Screen Shot 2021-06-21 at 09 41 13
dangeezz commented 3 years ago

GENERATE SPRITE

<svg width="0" height="0" class="hidden"> <symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 20" id="integrations"> <mask id="a" fill="#fff"> <rect width="11.177" height="8.889" rx="1.111"></rect> </mask> <rect width="11.177" height="8.889" rx="1.111" fill="#D8D8D8" fill-opacity=".01" stroke="#fff" stroke-width="4" mask="url(#a)"></rect> <rect y="11.111" width="5.588" height="8.889" rx="1.111" fill="#fff"></rect> <mask id="b" fill="#fff"> <rect x="7.824" y="11.111" width="11.177" height="8.889" rx="1.111"></rect> </mask> <rect x="7.824" y="11.111" width="11.177" height="8.889" rx="1.111" fill="#D8D8D8" fill-opacity=".01" stroke="#fff" stroke-width="4" mask="url(#b)"></rect> <rect x="13.412" width="5.588" height="8.889" rx="1.111" fill="#fff"></rect> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 20" id="messaging"> <path stroke="#fff" stroke-width="2" d="M1 18V6.566l9.086-5.451a.806.806 0 01.828 0l3.373 2.024 5.228 3.136a1 1 0 01.485.857V18a1 1 0 01-1 1H2a1 1 0 01-1-1z"></path> <mask id="a" fill="#fff"> <path fill-rule="evenodd" d="M0 7.766c0 .145.076.28.2.354l9.371 5.623a1.805 1.805 0 001.858 0l3.373-2.024 5.961-3.577A.488.488 0 0021 7.724a.976.976 0 00-1.478-.837l-8.093 4.856a1.805 1.805 0 01-1.858 0L1.478 6.887A.976.976 0 000 7.724v.042z" clip-rule="evenodd"></path> </mask> <path fill="#fff" d="M14.802 11.719l1.029 1.715-1.029-1.715zm-3.373.024l-1.03-1.715 1.03 1.715zm9.334-3.6l1.03 1.714-1.03-1.715zm-9.334 5.6l-1.03-1.715 1.03 1.715zm-1.858 0l1.03-1.715-1.03 1.715zm9.95-6.856l1.03 1.715-1.03-1.715zM.202 8.12L1.23 6.405.2 8.12zM1.23 6.405l9.371 5.623-2.058 3.43-9.37-5.623 2.057-3.43zm9.17 5.623l3.374-2.024 2.058 3.43-3.373 2.024-2.058-3.43zm3.374-2.024l5.961-3.577 2.058 3.43-5.961 3.577-2.058-3.43zm6.778-1.402l-8.093 4.856-2.058-3.43 8.093-4.856 2.058 3.43zm-12.01 4.856L.45 8.602l2.058-3.43 8.093 4.856-2.058 3.43zM2 7.724v.042h-4v-.042h4zm-1.55.878C1.131 9.012 2 8.52 2 7.724h-4C-2 5.41.524 3.982 2.507 5.172L.45 8.602zM10.5 14c-.69 0-1.366-.187-1.958-.542l2.058-3.43a.194.194 0 00-.1-.028v4zm1.958-.542A3.804 3.804 0 0110.5 14v-4c-.035 0-.07.01-.1.028l2.058 3.43zm7.276-7.03A1.512 1.512 0 0019 7.723h4c0 .874-.459 1.684-1.208 2.133l-2.058-3.43zM10.5 12c-.035 0-.07.01-.1.028l2.058 3.43A3.804 3.804 0 0110.5 16v-4zm.1.028a.194.194 0 00-.1-.028v4c-.69 0-1.366-.187-1.958-.542l2.058-3.43zM19 7.724c0 .796.868 1.287 1.55.878l-2.057-3.43C20.477 3.982 23 5.41 23 7.724h-4zM-.829 9.835A2.413 2.413 0 01-2 7.766h4c0-.557-.293-1.074-.77-1.36L-.83 9.835z" mask="url(#a)"></path> </symbol> </svg><svg class="icon"> <use xlink:href="#integrations"></use> </svg><svg class="icon"> <use xlink:href="#messaging"></use> </svg>

elrumordelaluz commented 3 years ago

I am having the following result, copying the svgs you give here

svgsprites

Let me know if this isn't the expected behaviour.

Thanks,

elrumordelaluz commented 3 years ago

Closing but feel free to re-open in any case.