You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I would love to be able to do something like this:
dynamic import hook
import{FunctionComponent}from'preact';import{useEffect,useRef,useState}from'preact/hooks';typeProps={name: string;};exportconstuseDynamicSVGImport=({ name }: Props)=>{constImportedIconRef=useRef<FunctionComponent<SVGSVGElement>|undefined>();const[loading,setLoading]=useState(false);const[error,setError]=useState<Error>();useEffect(()=>{setLoading(true);constimportIcon=async(): Promise<void>=>{try{const imported =awaitimport(`../../assets/icons/${name}.svg`).then(module=>module.default,);// logs: /src/assets/icons/spinner.svg if I pass name = spinnerconsole.log('imported',imported);ImportedIconRef.current=imported;}catch(err){console.log(err);setError(err);}finally{setLoading(false);}};importIcon();},[name]);return{
loading,
error,SvgIcon: ImportedIconRef.current,};};
Note: If I pass SvgIcon to the src of an img tag it renders the icon properly so it is being imported.
Is there a way to import svgs dynamically?
I would love to be able to do something like this:
dynamic import hook
Note: If I pass
SvgIcon
to thesrc
of animg
tag it renders the icon properly so it is being imported.icon.tsx
This is currently not working.
How can I convert the imported file into a component?
The text was updated successfully, but these errors were encountered: