Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some colored icons looks broken #126

Open
7iomka opened this issue Oct 21, 2023 · 1 comment
Open

Some colored icons looks broken #126

7iomka opened this issue Oct 21, 2023 · 1 comment

Comments

@7iomka
Copy link

7iomka commented Oct 21, 2023

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants