What if you used React to draw SVGs, rather than clicking a mouse a lot in Figma? React has components too.
Recommended: Introduction and Tutorial, where you will learn to draw the below image:
Or explore a basic Code Sandbox Now
See source code for a partial example or read the source code (it is pretty simple).
See use-svg-maker npm page. Install with:
npm i use-svg-maker
Use in React projects, I would recommend something like Vite for a server (choosing React and TypeScript) and pulling in leva
to make it trivial to parameterize drawings.
Import:
import { useSVG } from "use-svg-maker"
Use:
const { ref, download, name, setName, props, meta } = useSVG({
height: 540,
width: 960,
})
<svg className=" bg-white" {...props} ref={ref}>
{/* draw things here with code */}
</svg>
Add something like this to allow local saving of files:
<div className="flex flex-row gap-4 items-center mt-8 print:hidden">
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="p-4 rounded bg-slate-100 text-slate-700"
/>
<p className="text-white text-lg">.svg</p>
</div>
<button
className="bg-emerald-500 text-white p-4 rounded-lg mt-8 print:hidden"
onClick={download}
>
Download
</button>
- 0.0.1 - Initial release