@ssvg/react

React component for compiling SSVG markup to SVG synchronously on the fly.

Usage

import { SSVG } from '@ssvg/react';

export default function Demo({ count }) {
  return (
    <SSVG>
      <loop from="1" to={count}>
        <circle cx="calc(loop() * 30)" cy="50" r="10" fill="blue" />
      </loop>
    </SSVG>
  );
}

Features

• Write SSVG markup as JSX in React
• Synchronous compilation to SVG
• Supports dynamic props, state, and reactivity
• No async logic or useEffect required
• Forwards additional props to wrapper div
• Optionally accepts options prop for compileSSVG

API

<SSVG options={...} {...otherProps}>...</SSVG>

• options: Optional options for compileSSVG
• Other props are forwarded to the wrapper <div>

More Info & Full Documentation

For guides, advanced usage, and full API docs: SimpleSVG.dev

License

MIT