search

pqoqubbw / icons

beautifully crafted animated icons
https://icons.pqoqubbw.dev
MIT License
2.36k stars 68 forks source link

wip: clap icon #59

Closed killian-dv closed 1 week ago

killian-dv commented 1 week ago

I have read the CONTRIBUTING.md file.

YES

What kind of change does this PR introduce?

Add icon

What is the new behavior?

Add clap icon

Demo

https://github.com/user-attachments/assets/403c0f4b-9fc9-4174-b87f-5dd8cfd4998d

Additional context

I tried to rotate the entire svg with an origin at x = 4px and y = 20px but it doesn't work. For some reason, the origin is not taken into account and the rotation is done from the center (because of the flex in the parent div??). So I tried to make a motion.g inside the svg with the path in it. It works, but when I rotate, my paths are hidden by the svg. I've seen that the rocking-chair.tsx icon has the same problem, the origin on the motion.svg is not taken into account. Can you help me fix this to get the animation without being hidden?

I show you a video if I put my animation on the motion.svg, the origin not taken into account.

https://github.com/user-attachments/assets/dfe70c9b-4177-4aa6-88a3-6f78901a83f7

vercel[bot] commented 1 week ago

@killian-dv is attempting to deploy a commit to the pqoqubbw Team on Vercel.

A member of the Team first needs to authorize it.

pqoqubbw commented 1 week ago

hey, @killian-dv, try to add this style for svg tag

<svg style={{ overflow: 'visible' }}>
killian-dv commented 1 week ago

Thanks, it works. I hadn't thought of using overflow.