[#40] Rewrite SVG loader to fix conflict with react-router

This commit is contained in:
Matthew Northcott 2023-02-03 14:37:34 +13:00
parent fe59b0c854
commit 108e3e0f67
15 changed files with 40 additions and 24 deletions

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/coastal_dune_and_bank_system.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/hill_slopes_features.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/mangroves_section.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/maori_garden.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/open_wetland_lake.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/riparian.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/rural_section.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/salt_marsh.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/sand_dunes.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/stormwater_treatment.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_rail_section.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/transport_corridor_road_section.svg';
export default ReactComponent;

View file

@ -0,0 +1,2 @@
import { ReactComponent } from '../../assets/img/habitatSVG/urban_section.svg';
export default ReactComponent;

View file

@ -1,27 +1,15 @@
import React from 'react'; import { lazy, Suspense } from 'react';
import { CircularProgress, Stack } from "@mui/material";
export const HabitatSVG = ({ name, ...rest }) => { export const HabitatSVG = ({ name, ...rest }) => {
const ImportedIconRef = React.useRef(null); const Diagram = lazy(() => import(`../diagrams/${name}`));
const [loading, setLoading] = React.useState(false); const loadingComponent = (
<Stack alignItems="center">
React.useEffect(() => { <CircularProgress />
setLoading(true); </Stack>
const importIcon = async () => { );
try { return (
ImportedIconRef.current = (await import(`!!@svgr/webpack?-svgo,+titleProp,+ref!../../assets/img/habitatSVG/${name}.svg`)).default; <Suspense fallback={loadingComponent}>
} catch (err) { <Diagram {...rest} />
throw err; </Suspense>);
} finally {
setLoading(false);
}
};
importIcon();
}, [name]);
if (!loading && ImportedIconRef.current) {
const { current: ImportedIcon } = ImportedIconRef;
return <ImportedIcon {...rest} />;
}
return null;
}; };