Fix invalid DOM property warnings (kebab-case to camelCase in SVG)

[vivek-bandi]

---

name: Bug Fix Pull Request about: Submit a pull request to fix a bug in the project title: 'Fix Invalid DOM Property Warnings for SVG Elements' labels: 'bug' assignees: ' '

---

Issue Number Closes #13

Bug Description
There were warnings in the console related to invalid DOM properties where kebab-case attributes (e.g., stop-color, stroke-width) were used instead of camelCase (stopColor, strokeWidth). The PR fixes these warnings by converting the attributes to camelCase.

Video and Screenshot References

• Before (Bug):

  

• After (Fix):

  

Testing Steps

1. Clone the repository and switch to this fix-invalid-dom-properties branch.
2. Run npm run dev.
3. Open the browser and ensure that there are no warnings in the console for SVG DOM properties.
4. Verify that the UI works as expected and the SVG icons (such as Logo.tsx) are rendered correctly.

Checklist

• [x] I have thoroughly tested the fix.
• [x] I have attached video and picture references.
• [x] The related issue number is attached.
• [x] The bug is resolved, and no new errors are introduced.
• [x] I have checked for potential regressions.

Additional Context

This issue impacted components such as Logo.tsx and others where SVG elements were used. The proposed changes resolve the invalid DOM warnings without affecting the design.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
leadlly-in	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 7, 2024 4:39pm