Skip to content

feat(tools): add SVG to React/CSS utility#65

Open
omkarhole wants to merge 1 commit intobetterbugs:developfrom
omkarhole:feat/svg-to-react-css-utility
Open

feat(tools): add SVG to React/CSS utility#65
omkarhole wants to merge 1 commit intobetterbugs:developfrom
omkarhole:feat/svg-to-react-css-utility

Conversation

@omkarhole
Copy link
Contributor

@omkarhole omkarhole commented Mar 3, 2026

Add SVG converter tool that transforms raw SVG code into optimized variants:

  • React Component: Clean, reusable functional component with dynamic sizing
  • CSS Data URI: Inline SVG for CSS background images
  • CSS Mask: SVG as CSS mask-image for flexible icon styling

Features:

  • Automatic metadata cleanup (removes XML declarations, comments, DOCTYPE)
  • viewBox preservation for responsive sizing
  • Optional currentColor replacement for theme support
  • Configurable default width/height
  • File upload support (.svg files)
  • Copy-to-clipboard functionality

video:
https://github.com/user-attachments/assets/1ae4ede8-404a-44a0-b6a3-c61821d3d083

@rishima17 plz review it

closes: #50

@SyedFahad7
Copy link
Collaborator

Please rebase your PR branch onto the latest develop (do not merge develop into your feature branch).

Try:

git fetch upstream
git rebase upstream/develop

Resolve conflicts and run local checks (npm run lint, npm run build)
git push --force-with-lease origin <your-branch>

Notes:
No need to fix unrelated pre-existing warnings.
Do fix errors introduced by your PR (especially in touched files).
This rebases only your PR branch; it does not rewrite our develop branch.

Also raise the PR against develop branch and not main @omkarhole

@omkarhole omkarhole changed the base branch from main to develop March 4, 2026 06:37
Add SVG converter tool that transforms raw SVG code into optimized variants:
- React Component: Clean, reusable functional component with dynamic sizing
- CSS Data URI: Inline SVG for CSS background images
- CSS Mask: SVG as CSS mask-image for flexible icon styling

Features:
- Automatic metadata cleanup (removes XML declarations, comments, DOCTYPE)
- viewBox preservation for responsive sizing
- Optional currentColor replacement for theme support
- Configurable default width/height
- File upload support (.svg files)
- Copy-to-clipboard functionality
@omkarhole omkarhole force-pushed the feat/svg-to-react-css-utility branch from 3744dd1 to d92e9e8 Compare March 4, 2026 06:45
@omkarhole
Copy link
Contributor Author

omkarhole commented Mar 4, 2026

@SyedFahad7 done. please review it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(tools): add SVG to React/CSS utility

2 participants