search

CyCraft / pepicons

🥤 An awesome icon pack of retro icons for your apps and websites.
https://pepicons.com
Creative Commons Attribution 4.0 International
49 stars 3 forks source link

Invalid clip-path in icons #120

Closed cyberalien closed 1 year ago

cyberalien commented 1 year ago

After recent update many icons have invalid clip paths.

Example: pop/airplane.svg:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_2570)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7549 12.9963L12.6137 11.2918L14.0858 16.5607C14.2873 17.2817 15.1804 17.5338 15.7291 17.0246C17.3078 15.5597 18.1699 14.2058 18.2479 12.8948C18.3038 11.9539 17.8659 10.1553 16.9294 7.33446L17.1593 7.12366C19.4079 4.87645 20.0577 2.91564 18.5923 1.45023C17.1271 -0.0150314 15.1661 0.634362 12.9482 2.85086L12.7079 3.11245C9.88669 2.17579 8.08782 1.73782 7.14683 1.79379C5.83588 1.87176 4.48194 2.73388 3.01704 4.31253C2.50783 4.86128 2.75997 5.75441 3.48097 5.95585L8.75056 7.42815L7.0465 9.28692C5.32628 9.0514 4.24908 8.94907 3.72656 8.98019C2.78982 9.03596 1.86795 9.623 0.89294 10.6737C0.38371 11.2225 0.635886 12.1156 1.35692 12.317L6.01025 13.6169L6.42478 14.0314L7.72462 18.6847C7.92603 19.4058 8.81919 19.658 9.36796 19.1487C10.4187 18.1737 11.0057 17.2518 11.0615 16.3151C11.0926 15.7927 10.9903 14.7159 10.7549 12.9963ZM9.01615 11.8772C8.77322 12.0999 8.65566 12.4281 8.70187 12.7544C8.94065 14.4405 9.06247 15.5704 9.06757 16.0585L8.28047 13.2407C8.23421 13.0751 8.14603 12.9242 8.02445 12.8027L7.239 12.0172C7.11742 11.8956 6.96654 11.8075 6.80093 11.7612L3.98319 10.9741C4.47143 10.9792 5.60166 11.1011 7.28845 11.34C7.61484 11.3862 7.94304 11.2686 8.16579 11.0256L11.3255 7.57908C11.8296 7.02922 11.5759 6.14093 10.8574 5.9402L5.73365 4.50864C6.33268 4.04943 6.84845 3.81507 7.26558 3.79026C7.90809 3.75204 9.78145 4.2286 12.6835 5.21408C13.059 5.34156 13.4743 5.2352 13.7422 4.94295L14.3922 4.23396C15.8992 2.7292 16.7584 2.44469 17.1781 2.86445C17.5977 3.28405 17.3131 4.14277 15.7764 5.67951L15.0987 6.29966C14.8065 6.5676 14.7002 6.98285 14.8276 7.35825C15.8131 10.2603 16.2896 12.1336 16.2514 12.7761C16.2266 13.1932 15.9922 13.709 15.533 14.308L14.1016 9.18478C13.9009 8.46628 13.0125 8.21263 12.4627 8.71682L9.01615 11.8772Z" fill="currentColor"/>
</g>

</svg>

Path with id clip0_0_2570 doesn't exist.

Same issue in 78 icons:

packages/pepicons/svg/pop/airplane.svg
packages/pepicons/svg/pop/cart.svg
packages/pepicons/svg/pop/cellphone-loop.svg
packages/pepicons/svg/pop/clapperboard.svg
packages/pepicons/svg/pop/coctail.svg
packages/pepicons/svg/pop/color-picker.svg
packages/pepicons/svg/pop/dress.svg
packages/pepicons/svg/pop/file-loop.svg
packages/pepicons/svg/pop/flower.svg
packages/pepicons/svg/pop/hand-point-open.svg
packages/pepicons/svg/pop/handshake.svg
packages/pepicons/svg/pop/house.svg
packages/pepicons/svg/pop/label.svg
packages/pepicons/svg/pop/loop.svg
packages/pepicons/svg/pop/magnet.svg
packages/pepicons/svg/pop/microphone2.svg
packages/pepicons/svg/pop/monitor-loop.svg
packages/pepicons/svg/pop/paint-pallet.svg
packages/pepicons/svg/pop/pen.svg
packages/pepicons/svg/pop/persons.svg
packages/pepicons/svg/pop/pin.svg
packages/pepicons/svg/pop/rewind-time.svg
packages/pepicons/svg/pop/send.svg
packages/pepicons/svg/pop/smartphone-cutout.svg
packages/pepicons/svg/pop/smartphone2.svg
packages/pepicons/svg/pop/speaker-off.svg
packages/pepicons/svg/pop/stars.svg
packages/pepicons/svg/pop/sun-filled.svg
packages/pepicons/svg/pop/sun.svg
packages/pepicons/svg/pop/t-shirt.svg
packages/pepicons/svg/pop/train.svg
packages/pepicons/svg/pop/water-drop.svg
packages/pepicons/svg/print/arrow-down-left.svg
packages/pepicons/svg/print/arrow-down-right.svg
packages/pepicons/svg/print/arrow-up-left.svg
packages/pepicons/svg/print/arrow-up-right.svg
packages/pepicons/svg/print/bluetooth.svg
packages/pepicons/svg/print/briefcase.svg
packages/pepicons/svg/print/cellphone-eye.svg
packages/pepicons/svg/print/cellphone-loop.svg
packages/pepicons/svg/print/chain.svg
packages/pepicons/svg/print/clapperboard.svg
packages/pepicons/svg/print/coctail.svg
packages/pepicons/svg/print/electricity.svg
packages/pepicons/svg/print/eye-closed.svg
packages/pepicons/svg/print/eye-frame.svg
packages/pepicons/svg/print/eye-off.svg
packages/pepicons/svg/print/eye.svg
packages/pepicons/svg/print/file-loop.svg
packages/pepicons/svg/print/flower.svg
packages/pepicons/svg/print/folding-stool.svg
packages/pepicons/svg/print/gift.svg
packages/pepicons/svg/print/hamburger.svg
packages/pepicons/svg/print/handshake.svg
packages/pepicons/svg/print/house.svg
packages/pepicons/svg/print/label.svg
packages/pepicons/svg/print/magnet.svg
packages/pepicons/svg/print/microphone2.svg
packages/pepicons/svg/print/monitor-eye.svg
packages/pepicons/svg/print/monitor-loop.svg
packages/pepicons/svg/print/move-x.svg
packages/pepicons/svg/print/paint-pallet.svg
packages/pepicons/svg/print/person-checkmark.svg
packages/pepicons/svg/print/person-plus.svg
packages/pepicons/svg/print/persons.svg
packages/pepicons/svg/print/photo-studio.svg
packages/pepicons/svg/print/pill.svg
packages/pepicons/svg/print/pin.svg
packages/pepicons/svg/print/power.svg
packages/pepicons/svg/print/rewind-time.svg
packages/pepicons/svg/print/send.svg
packages/pepicons/svg/print/share-ios.svg
packages/pepicons/svg/print/stars.svg
packages/pepicons/svg/print/studio-light-side.svg
packages/pepicons/svg/print/syringe.svg
packages/pepicons/svg/print/thumbs-up.svg
packages/pepicons/svg/print/train.svg
packages/pepicons/svg/print/water-drop.svg
mesqueeb commented 1 year ago

@cyberalien thank you so much. I seem to have deleted something of the SVG code that I shouldn't have 😭

The clip path in other icons was causing issues for some icons for me, but I didn't expect it would break other icons by removing it.

Will fix today or tomorrow at latest.

cyberalien commented 1 year ago

Looks like clip path serves no purpose there, so it is safe to remove it completely. My guess is it was a solution to export bug in Figma, which generated wrong dimensions for icons?

mesqueeb commented 1 year ago

@cyberalien it all started with the fact that sometimes my icons they are bigger than my 20x20 limitations, but visually they still fit inside the 20x20.

So in figma enabling Clip Content for all my icons and then export, it will export like this:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_0_1876)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.68542 6.65868C0.758716 6.96758 0.779177 8.28543 1.71502 8.56541L9.20844 10.8072L11.6551 18.5165C11.948 19.4394 13.2507 19.4488 13.5569 18.5302L18.8602 2.62029C19.1208 1.83853 18.3771 1.09479 17.5953 1.35538L1.68542 6.65868ZM5.31842 7.55586L16.3304 3.8852L12.6316 14.9817L10.9548 9.69826C10.8547 9.38295 10.6052 9.13754 10.2883 9.04272L5.31842 7.55586Z" fill="#AB92F0"/>
<path d="M17.7674 1.43951L18.8105 2.51742L9.98262 11.0605L8.93948 9.98265L17.7674 1.43951Z" fill="#AB92F0"/>
</g>
<defs>
<clipPath id="clip0_0_1876">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>

and without it, it will export like this:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.68542 6.65868C0.758716 6.96758 0.779177 8.28543 1.71502 8.56541L9.20844 10.8072L11.6551 18.5165C11.948 19.4394 13.2507 19.4488 13.5569 18.5302L18.8602 2.62029C19.1208 1.83853 18.3771 1.09479 17.5953 1.35538L1.68542 6.65868ZM5.31842 7.55586L16.3304 3.8852L12.6316 14.9817L10.9548 9.69826C10.8547 9.38295 10.6052 9.13754 10.2883 9.04272L5.31842 7.55586Z" fill="#AB92F0"/>
<path d="M17.7674 1.43951L18.8105 2.51742L9.98262 11.0605L8.93948 9.98265L17.7674 1.43951Z" fill="#AB92F0"/>
</svg>

without is better, but in the past at some point, because my icons they do go too far outside because of how I would "rotate" parts, it would affect my 20 20 viewbox for whatever reason. : S

Anyway, tomorrow I'm gonna do a new export while disabling Clip Content and do a double check if no icon has a bigger viewbox than 20 20. If it does, then I'll keep Clip Content but have an optional prop for the TS function to "trim away" the ClipPath section of the SVG, because otherwise it causes some troubles for me when I try to use it in CSS.

mesqueeb commented 1 year ago

@cyberalien I have released v1.2.3 which resolves this issue. Let me know if it persists!