Fetching public assets in shopify remix

Shopify Apps
,
1

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:///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(
2

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.

  1. Include the SVG content as inline markup and modify its attributes.

  2. 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

entry.server handleRequest is not called for non-HTML responses, which is likely to be the cause if it’s not triggered.

Hope this helps.