feat: add SVG Spritesheet Merger to Dev Utilities

[erikurt9]

Add SVG Spritesheet Merger to Dev Utilities

Closes #418

Summary

Adds a client-side utility that merges multiple standalone SVGs into a single, optimized <symbol>-based spritesheet — no external libraries, fully offline.

What's included

• Upload & Collection

  • Drag-and-drop zone for multiple .svg files, plus a manual file picker.
  • Textarea to paste raw SVG markup directly (no file needed).
  • Editable list of imported icons: rename the symbol ID inline, or delete any entry.
  • IDs are auto-slugified from the filename and de-duplicated automatically (icon, icon-2, icon-3...).

• Spritesheet compiler

  • Parses each SVG with DOMParser, extracting its viewBox (falling back to width/height, then 0 0 24 24) and inner markup.
  • Wraps every icon in a <symbol id="..." viewBox="..."> node.
  • Packages everything into a single <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> wrapper.

• Live preview grid

  • The compiled spritesheet is injected hidden into the DOM so <use href="#id"> references resolve for real.
  • Grid renders every symbol via <svg><use href="#id" /></svg>.
  • Clicking any icon copies its HTML usage snippet to the clipboard.

• Code outputs

  • Full formatted spritesheet XML with a "Copy Spritesheet" button.
  • "Download .svg" button (via Blob + URL.createObjectURL).
  • Dedicated HTML usage snippet box.

• Integration

  • Route registered at /devutilities/svg-spritesheet-merger in src/App.jsx.
  • New entry added to src/config/sidebarSections.js under Dev Utilities.
  • New card added to src/pages/DevUtilities/DevUtilities.jsx so it's searchable and shows on the overview page.
  • Follows the existing monochrome theme (light/dark) used across the other Dev Utilities.

Screenshots

Testing

• npm run lint passes
• npm run build passes
• Manually tested: drag-and-drop of multiple .svg files
• Manually tested: pasting raw SVG markup
• Manually tested: renaming/de-duplicating symbol IDs

[vercel]

@erikurt9 is attempting to deploy a commit to the shamilahmdt's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Hello, @erikurt9!

Thank you for your contribution to DevTasks.

The maintainer has been notified and will review your pull request shortly. If any changes are needed, we will let you know in the comments below.