Skip to content

fix(kivex-react): support className and SVG props#4

Open
Joseph4sure wants to merge 2 commits into
MotionMind2007:mainfrom
Joseph4sure:fix/kivex-react-svg-props
Open

fix(kivex-react): support className and SVG props#4
Joseph4sure wants to merge 2 commits into
MotionMind2007:mainfrom
Joseph4sure:fix/kivex-react-svg-props

Conversation

@Joseph4sure

@Joseph4sure Joseph4sure commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

✅ Summary

This PR adds full support for className, style, onClick, and any other standard SVG/HTML props to all kivex-react icons.
It also updates the playground with a comprehensive demo to showcase the new capabilities.


What changed

Library (kivex-react)

  • Updated IconBase to spread all remaining props (...rest) onto the underlying <svg> element.
  • All generated icons now accept:
    • className – for custom CSS (including Tailwind)
    • style – inline styles
    • Event handlers like onClick, onMouseEnter, onMouseLeave
    • ARIA attributes (aria-label, role, etc.)
    • Data attributes (data-*)
    • Any other valid SVG or HTML attributes
  • Regenerated all icon components to include the updated template (npm run generate).
  • Type definitions now reflect the extended props.

Playground (react-playground)

  • Added a dark container background (#333333) with a title.
  • Rendered 6 icons (Home, Heart, Star, Settings, Users, Folder) in a responsive grid.
  • Each icon demonstrates different props:
    • className with custom CSS hover effects and animations
    • style for inline overrides
    • onClick / hover events
    • aria-label and data-* attributes
  • Included comprehensive CSS with transitions, animations, and focus styles.

Why

Before this change, icons were limited to size, color, and strokeWidth – they couldn't be styled with CSS classes, respond to click events, or be made accessible.
This PR makes kivex-react icons truly flexible and drop‑in replacements for raw <svg> elements, enabling:

  • Seamless integration with CSS frameworks (Tailwind, Bootstrap, custom CSS)
  • Full interactivity (clicks, hovers, focus)
  • Better accessibility (ARIA labels, roles, keyboard navigation)
  • Easier testing and debugging (data attributes)

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.

1 participant