use-svg-maker

See a partial example

Install

1npm i use-svg-maker

Use in React projects, I would recommend pulling in leva to make it trivial to parameterize drawings.

Import:

1import { useSVG } from "use-svg-maker"

Use:

1const { ref, download, name, setName, props, meta } = useSVG({
2  height: 540,
3  width: 960,
4})

1<svg className=" bg-white" {...props} ref={ref}>
2  {/* draw things here with code */}
3</svg>

Add something like this to allow local saving of files:

1<div className="flex flex-row gap-4 items-center mt-8 print:hidden">
2    <input
3    type="text"
4    value={name}
5    onChange={(e) => setName(e.target.value)}
6    className="p-4 rounded bg-slate-100 text-slate-700"
7    />
8    <p className="text-white text-lg">.svg</p>
9</div>
10
11<button
12    className="bg-emerald-500 text-white p-4 rounded-lg mt-8 print:hidden"
13    onClick={download}
14>
15    Download
16</button>

Releases

• 0.0.1 - Initial release