導(dǎo)入 SVG 文件時可以使用ref并命名導(dǎo)出。ReactComponent請注意，它必須是ref為了使它工作。
以下示例使用需要版本v16.8及更高版本的 React 鉤子。
示例動態(tài) SVG 導(dǎo)入鉤子：
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 };
}
打字稿中的示例動態(tài) SVG 導(dǎo)入鉤子：
interface UseDynamicSVGImportOptions {
onCompleted?: (
name: string,
SvgIcon: React.FC<React.SVGProps<SVGSVGElement>> | undefined
) => void;
onError?: (err: Error) => void;
}
function useDynamicSVGImport(
name: string,
options: UseDynamicSVGImportOptions = {}
) {
const ImportedIconRef = useRef<React.FC<React.SVGProps<SVGSVGElement>>>();
const [loading, setLoading] = useState(false);
const [error, setError] = useState<Error>();
const { onCompleted, onError } = options;
useEffect(() => {
setLoading(true);
const importIcon = async (): Promise<void> => {
try {
ImportedIconRef.current = (
await import(`./${name}.svg`)
).ReactComponent;
onCompleted?.(name, ImportedIconRef.current);
} catch (err) {
onError?.(err);
setError(err);
} finally {
setLoading(false);
}
};
importIcon();
}, [name, onCompleted, onError]);
return { error, loading, SvgIcon: ImportedIconRef.current };
}
對于那些在動態(tài)導(dǎo)入 SVG 時得到undefined的人來說ReactComponent，這是由于一個錯誤，即以某種方式將 SVG 添加ReactComponent到每個導(dǎo)入的 SVG 的 Webpack 插件不會在動態(tài)導(dǎo)入時觸發(fā)。
基于此解決方案，我們可以通過在您的動態(tài) SVG 導(dǎo)入中強制使用相同的加載器來臨時解決它。
唯一的區(qū)別是ReactComponent現(xiàn)在是default輸出。
ImportedIconRef.current = (await import(`!!@svgr/webpack?-svgo,+titleProp,+ref!./${name}.svg`)).default;
另請注意，使用帶有可變部分的動態(tài)導(dǎo)入時存在限制。這個 SO answer詳細解釋了這個問題。
要解決此問題，您可以使動態(tài)導(dǎo)入路徑更加明確。
例如，代替
// App.js
<Icon path="../../icons/icon.svg" />
// Icon.jsx
...
import(path);
...
您可以將其更改為
// App.js
<Icon name="icon" />
// Icon.jsx
...
import(`../../icons/${name}.svg`);
...
