secundant / neodx

A collection of frontend-focused tools aimed at enhancing your development experience
MIT License
77 stars 6 forks source link

Some colored icons looks broken #126

Open 7iomka opened 11 months ago

7iomka commented 11 months ago

I used @neodx/svg and created a group for colored svg I don't want any transformations and optimisations for this group So I used

resetColors: {
  replaceUnknown: 'currentColor',
  exclude: [/colored\/[^\/]+\.svg$/, /[\w-]*-colored\.svg$/],
},

This is my original svg

<svg width="50" height="25" viewBox="0 0 50 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="49" height="24" rx="2.5" stroke="#DDDDDD" class="icon-frame" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.9592 7H32.1266C32.4939 9.21429 34.698 11.2857 37.1225 11.2857H42.5592C42.6327 11.0714 42.6327 10.7857 42.6327 10.5714C42.6327 8.57143 41.0164 7 38.9592 7Z" fill="url(#paint0_linear_6875_4510)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7142 11.6428V17H36.0204V14.1428H38.9591C40.5755 14.1428 41.9714 13.0714 42.4122 11.6428H32.7142Z" fill="#4DB45F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.9592 7V17H23.898C23.898 17 24.6327 17 25 16.2857C26.9837 12.4286 27.5715 11.2857 27.5715 11.2857H27.9388V17H31.2449V7H28.3062C28.3062 7 27.5715 7.07143 27.2041 7.71429C25.5143 11 24.6327 12.7143 24.6327 12.7143H24.2654V7H20.9592Z" fill="#4DB45F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 17V7H10.3061C10.3061 7 11.2612 7 11.7755 8.42857C13.098 12.2143 13.2449 12.7143 13.2449 12.7143C13.2449 12.7143 13.5388 11.7857 14.7143 8.42857C15.2286 7 16.1837 7 16.1837 7H19.4898V17H16.1837V11.6429H15.8163L13.9796 17H12.5102L10.6735 11.6429H10.3061V17H7Z" fill="#4DB45F"/>
<defs>
<linearGradient id="paint0_linear_6875_4510" x1="32.1076" y1="9.14286" x2="42.6327" y2="9.14286" gradientUnits="userSpaceOnUse">
<stop stop-color="#00B4E6"/>
<stop offset="1" stop-color="#088CCB"/>
</linearGradient>
</defs>
</svg>
image

And this is final result in sprite

<svg xmlns="http://www.w3.org/2000/svg" id="mir-in-frame" fill="none" viewBox="0 0 50 25"><rect width="49" height="24" x=".5" y=".5" stroke="#DDD" rx="2.5"></rect><path fill="url(#a)" fill-rule="evenodd" d="M38.96 7h-6.833c.367 2.214 2.571 4.286 4.995 4.286h5.437c.074-.215.074-.5.074-.715 0-2-1.617-3.571-3.674-3.571Z" clip-rule="evenodd"></path><path fill="#4DB45F" fill-rule="evenodd" d="M32.714 11.643V17h3.306v-2.857h2.94c1.615 0 3.011-1.072 3.452-2.5h-9.698ZM20.96 7v10h2.938s.735 0 1.102-.714l2.572-5h.367V17h3.306V7h-2.939s-.735.071-1.102.714l-2.571 5h-.368V7H20.96ZM7 17V7h3.306s.955 0 1.47 1.429c1.322 3.785 1.469 4.285 1.469 4.285s.294-.928 1.47-4.285C15.228 7 16.183 7 16.183 7h3.306v10h-3.306v-5.357h-.368L13.98 17h-1.47l-1.836-5.357h-.368V17H7Z" clip-rule="evenodd"></path></svg>
image

My question is: what can I do with this weird behavior?

secundant commented 10 months ago

@7iomka The issue is not related to colors, but rather to the <linearGradient id=... element. I'll work on this problem in #97.