SVG-Loading - CORS-Error

Hi everyone 👋I’m a designer trying my hands on a simple
Sanity solution for a next.js one-pager. I’m trying to use svg-assets uploaded through sanity studio in combination with external-svg-loader . The goal is to load the SVGs inline and control the colors with CSS. However, this only results in a CORS-error which is a bit too technical for me:

Can anyone point me in the right direction for solving this
🙂 Or is my thinking and approach for loading svgs hosted at a CDN inline wrong?
---
Edit:
has provided me with a few alternative solutions that will work by editing the SVGs or pasting the SVG code in text fields. Is there no way to solve the CORS-error so the editors only need to upload an svg?

I had the exact use case, didn't knew this plugin. I manually changed color and re-uploaded.
For another project, I added an option to copy-paste SVG code instead of image, so I can get it using dangerouslySetHTML

Thanks , I hope to keep it simple for the editors to upload new or change the SVG-illustrations. However it’s good to know there are a few different approaches, eventhough they seem a bit more cumbersome 👍

I hope sanity provides an option to render SVG as raw.

You can add the origin to your project and it should work, I believe?

sanity cors add <http://localhost:3000>

Thanks , I’ll try that. Is this the same as setting cors origins through the sanity manage project-dashboard?

Yep (credentials are not needed for these origins)

Is SVG Raw format something Sanity considered? There are so many benefits of including <svg> inline instead of <img src>.

I'm not sure I understand what that entails? Getting the contents of the file through a GROQ query?

Hm,

sanity cors add <http://localhost:3000>

didn’t seem to help. I still get the same CORS-error when trying to load the svg’s inline.
My bad, I managed to add the wrong URL. It works perfectly now. Thanks for the help
:party_parrot:

Here's an example: Editors uploads an SVG icon, Its in black color. Using it in frontend as <img src=""> we have no way to change the SVG Color or other properties. But if sanity provides an option to fetch the actual <svg> code, we can use that along with "currentColor" to change the icon COLOR.
Make sense?

I have experienced this issue in my last 2 projects and 1 ongoing project. So this is something many people would love too..

You can do that if you set up a CORS origin as above and fetching it using XHR/fetch.
I
guess it would be cool to fetch it through GROQ, but there's some implications of that. SVGs can potentially be megabytes in size after all.

yeah a GROQ function would be awesome. Even if the size is big, normal rendering will also take same size as Sanity currently does not compress SVG