Importing SVG files as raw HTML
Unanswered
Short mackerel posted this in #help-forum
Short mackerelOP
Inside a Server Component I am importing a SVG via "import svg from '../public/test.svg'". What I want is the raw <svg> html, because I am doing some calculation on the server with the nodes. But when I console.log(svg) I get an object containing a src ('/_next/static/media/test.bf1af21.svg'), width and height.
Now I could get the raw html code via fetching that src. But to me it seems like an unnecessary step to access what I want (also adding more vercel credits as necessary?). Is there a way to directly access the html of the svg without the intermediate step of fetching it?
Now I could get the raw html code via fetching that src. But to me it seems like an unnecessary step to access what I want (also adding more vercel credits as necessary?). Is there a way to directly access the html of the svg without the intermediate step of fetching it?
4 Replies
Serengeti
What kind of calculation are you doing?
You could set up a custom loader in your nextjs webpack config using a raw loader.
See below for how to do that
https://nextjs.org/docs/app/api-reference/next-config-js/webpack
https://v4.webpack.js.org/loaders/raw-loader/
You could set up a custom loader in your nextjs webpack config using a raw loader.
See below for how to do that
https://nextjs.org/docs/app/api-reference/next-config-js/webpack
https://v4.webpack.js.org/loaders/raw-loader/
why not make a react component instead?
export function YourSvg() {
return <svg>...</svg>
}Short mackerelOP
Hey, thanks for the help. I'll try both suggestions.