[英]React use SVGR with svg in public folder
Is there any way I can import an SVG file in my public folder as a React component like so:有什么方法可以将我的公共文件夹中的 SVG 文件作为 React 组件导入,如下所示:
import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg';
const MyComponent = () => {
return (
<div>
<MySvg />
</div>
);
};
export default MyComponent;
I know there are workarounds like using an img
tag but I really need my SVG to be used as a React component...我知道有一些解决方法,比如使用
img
标签,但我真的需要我的 SVG 用作 React 组件......
Thanks in advance !提前致谢 !
you can use a loader in webpack, like this:您可以在 webpack 中使用加载程序,如下所示:
{
test: /\.(svg)$/i,
loader: 'file-loader',
options: {
name: '/public/assets/svg/[name].[ext]'
}
}
then, you can import your svg like this:然后,您可以像这样导入 svg:
import MySvg from '/assets/svg/mysvg.svg';
const MyComponent = () => {
return (
<div>
<MySvg width={36} height={36} />
</div>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.