App reviews, troubleshooting, and recommendations
Hello everyone Iam trying to fetch svg icons which are in the public folder in remix app , I can access it via going through the url like this https://<url>/icons/icon.svg but I dont want to use it like this because I want to mask the image to give it color and it doesnt render the image trying from past 3days, without masking its visible dont know why , So I am trying alternate approach first to fetch the image and modify the response svg code like its color to give specific color and its also working but in development after deploying Iam getting cors error because of different domain origin can anyone tell me how can I fix it .
I have modified the entry.server file by including the cors from 'remix-utils' but its not working like this
export default async function handleRequest(
request,
responseStatusCode,
responseHeaders,
remixContext,
) {
addDocumentResponseHeaders(request, responseHeaders);
const userAgent = request.headers.get("user-agent");
const callbackName = isbot(userAgent ?? "") ? "onAllReady" : "onShellReady";
return new Promise((resolve, reject) => {
const { pipe, abort } = renderToPipeableStream(
<RemixServer
context={remixContext}
url={request.url}
abortDelay={ABORT_DELAY}
/>,
{
[callbackName]: () => {
const body = new PassThrough();
const stream = createReadableStreamFromReadable(body);
responseHeaders.set("Content-Type", "text/html");
cors(
request,
new Response(stream, {
headers: responseHeaders,
status: responseStatusCode,
}),
{
origin: true,
methods: ["GET"],
},
).then((response) => {
resolve(response);
});
pipe(body);
},
onShellError(error) {
reject(error);
},
onError(error) {
responseStatusCode = 500;
console.error(error);
},
},
);
setTimeout(abort, ABORT_DELAY);
});
}
Hi @weebySagar
Sounds like you are trying to access SVG icons from the public folder and modify the SVGs.
Some possible solutions:
1) Instead of fetching SVGs over the network, import them directly into your React components and modify their colors. For example, use a SVG loader like https://github.com/pd4d10/vite-plugin-svgr
So it won't have network requests for SVGs, so no CORS issues.
2) Include the SVG content as inline markup and modify its attributes.
3) Have you verified `Access-Control-Allow-Origin` header in your browser with the `remix-utils` cors code added?
I think it isn't setting the header. A possible cause is this piece of code isn't triggered (you can add some debug log to confirm if this is triggered at all), note
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024