在公共文件夹中使用 SVGR 和 svg

Question

有什么方法可以将我的公共文件夹中的 SVG 文件作为 React 组件导入，如下所示：

import { ReactComponent as MySvg } from '/assets/svg/mysvg.svg';

const MyComponent = () => {
  return (
    <div>
      <MySvg />
    </div>
  );
};

export default MyComponent;

我知道有一些解决方法，比如使用img标签，但我真的需要我的 SVG 用作 React 组件......

提前致谢 ！

Answer 1

您可以在 webpack 中使用加载程序，如下所示：

{
    test: /\.(svg)$/i, 
    loader: 'file-loader',
    options: {
      name: '/public/assets/svg/[name].[ext]'
    }
}

然后，您可以像这样导入 svg：

import MySvg from '/assets/svg/mysvg.svg';

const MyComponent = () => {
  return (
    <div>
      <MySvg width={36} height={36} />
    </div>
  );
};