在公共文件夾中使用 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>
  );
};