npm

use-svg-maker
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

use-svg-maker

See a partial example

Install

npm i use-svg-maker

Use in React projects, I would recommend 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>

Releases

  • 0.0.1 - Initial release

Readme

Keywords

none

Package Sidebar

Install

npm i use-svg-maker

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

25 kB

Total Files

22

Last publish

Collaborators

  • jamesporter