How to edit svg

Previous

In Next.js, you can import a svg file and show it by using an <Image /> tag without other package

已複製！
import exampleSvg from 'example.svg'
<Image src={exampleSvg} {...props} />

Component

First, you install @svgr/webpack package

已複製！
npm install @svgr/webpack

And then, you can import a svg and use it as a component

已複製！
import ExampleSvg from 'example.svg'
<ExampleSvg />

Now

While import the svg file, you can execute it as a function, and it will return dom message

已複製！
import ExampleSvg from 'example.svg'
const svgChildren = ExampleSvg()

And then, you can edit it with React function.

已複製！
React.cloneElement(svgChildren, {...props}, null)

In this way, you can edit the dom of svg.