score:1

Accepted answer

you are using "require" in order to import your image file.

this will not work in a react app, at least not out of the box.

i understand what you're trying to do, i think that a better solution for that will be to use a custom react hook to import your image. like this:

function usedynamicsvgimport(name, options = {}) {
  const importediconref = useref();
  const [loading, setloading] = usestate(false);
  const [error, seterror] = usestate();

  const { oncompleted, onerror } = options;
  useeffect(() => {
    setloading(true);
    const importicon = async () => {
      try {
        importediconref.current = (
          await import(`./${name}.svg`)
        ).reactcomponent;
        if (oncompleted) {
          oncompleted(name, importediconref.current);
        }
      } catch (err) {
        if (onerror) {
          onerror(err);
        }
        seterror(err);
      } finally {
        setloading(false);
      }
    };
    importicon();
  }, [name, oncompleted, onerror]);

  return { error, loading, svgicon: importediconref.current };
}

Related Query

More Query from same tag