feat(ui): Add "Copy SVG" button to generated badge preview

[navyasree41]

Is your feature request related to a problem? Please describe.

Problem

Currently, users can preview the generated SVG badge, but there is no quick way to copy the SVG markup directly.

Proposed Solution

Add a "Copy SVG" button near the preview section.

Requirements

• Copy raw SVG to clipboard.
• Show a success toast/message after copying.
• Handle clipboard errors gracefully.
• Keep existing download functionality unchanged.

Acceptance Criteria

• Copy button is visible beside the SVG preview.
• SVG content is copied correctly.
• Success/error feedback is displayed.
• Responsive on desktop and mobile.

Difficulty

Good First Issue

Describe the solution you'd like

Implement a "Copy SVG" button using the Clipboard API (navigator.clipboard.writeText). When clicked, the button should copy the generated SVG markup to the clipboard and display a success notification. If copying fails due to browser restrictions or permissions, an appropriate error message should be shown.

The button should only be enabled after a badge has been successfully generated and should integrate seamlessly with the existing badge preview UI without affecting current functionality.

Describe alternatives you've considered

Some alternative approaches considered include:

• Allowing users to manually select and copy the SVG source from a text area.
• Providing a modal that displays the raw SVG code for copying.
• Downloading the SVG first and copying it manually.

However, a dedicated "Copy SVG" button provides the fastest and most user-friendly experience while requiring minimal changes to the existing interface.

[tri-pti]

Please assign this issue to me under GSSoC'26.

[github-actions]

👋 Hey @tri-pti! Looks like you want to work on this issue — awesome! 🎉

We don't assign issues through comments like this. Here's how our system works:

🤖 How to Claim an Issue

Comment /claim on this issue and our bot will automatically assign it to you (if you're eligible).

/claim

⚠️ Note: Only the issue author (@navyasree41) can /claim this issue. If you'd like to contribute, consider opening a new issue for a bug or feature you've found, then claim that one!

📋 A Few Things to Know

• You can hold a maximum of 5 open issues at a time.
• If there's no activity for 3 days, the assignment will automatically expire so others can pick it up.
• Make sure to read our CONTRIBUTING.md before you start — it covers code style, commit conventions, and the PR checklist.

💬 Join Our Discord

Get faster help, collaborate with other contributors, and stay updated with project news:

Happy contributing! 🚀

[tri-pti]

/claim

[github-actions]

❌ Only the author of this issue (@navyasree41) can claim it.

[navyasree41]

/claim

[github-actions]

🎉 Assigned! Welcome to the project, @navyasree41.

⏳ Reminder: You have 2 days to submit a Pull Request. After 2 days of inactivity, you will be automatically unassigned to give others a chance (as per our GSSoC anti-hoarding policy).

💡 Please read CONTRIBUTING.md if you haven't already.

Happy coding! 🚀

[github-actions]

⚠️ Assignment automatically removed due to inactivity.
Feel free to reclaim the issue if you want to continue working on it.