react next antd引入自定义svg图片

 react next antd引入自定义svg图片

这样不显示图标，代码里面也不显示，
报错 Warning: [@ant-design/icons] Should have component prop or children.

import { ReactComponent as centerSvg } from "./icon-infor-centre-28-px.svg";

这里去掉ReactComponent as 不显示图标，代码里面同样不显示，
报错 Warning: [@ant-design/icons] Should have component prop or children.

import { centerSvg } from "./icon-infor-centre-28-px.svg";

这样子写又报错Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of AntdIcon.
但是可以显示的，

import centerSvg from "./icon-infor-centre-28-px.svg";

咋办，不显示到底哪里有问题

import React from "react";
import Icon from "@ant-design/icons";

import { ReactComponent as centerSvg } from "./icon-infor-centre-28-px.svg";
import { ReactComponent as homeSvg } from "./icons.svg";
import { ReactComponent as buySvg } from "./icons-3.svg";
import { ReactComponent as referralSvg } from "./icons-4.svg";
import { ReactComponent as setSvg } from "./icons-5.svg";
import { ReactComponent as aboutSvg } from "./icons-2.svg";
import { ReactComponent as NextArrowSvg } from "./icons-next-36-px-2.svg";
import { ReactComponent as PrevArrowSvg } from "./icons-previous-36-px.svg";

const CenterIcon = props => <Icon component={centerSvg} {...props} />;
const HomeIcon = props => <Icon component={homeSvg} {...props} />;
const BuyIcon = props => <Icon component={buySvg} {...props} />;
const ReferralIcon = props => <Icon component={referralSvg} {...props} />;
const SetIcon = props => <Icon component={setSvg} {...props} />;
const AboutIcon = props => <Icon component={aboutSvg} {...props} />;
const NextArrowIcon = props => <Icon component={NextArrowSvg} {...props} />;
const PrevArrowIcon = props => <Icon component={PrevArrowSvg} {...props} />;

export {
  CenterIcon,
  HomeIcon,
  BuyIcon,
  ReferralIcon,
  SetIcon,
  AboutIcon,
  NextArrowIcon,
  PrevArrowIcon
};

[@ant-design/icons]应具有组件道具或子级。

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。

检查AntdIcon的render方法。

自己换了一种

import React  from "react";
import Icon from "@ant-design/icons";
import CenterIcon from "./icon-infor-centre-28-px.svg";
export {
  CenterIcon,
};

import {
  CenterIcon,
} from "../../components/svg";//index.js放置的文件路径
  
<CenterIcon/>

next.config.js补充webpack部分配置

const nextConfig = {
  compiler: {
    //Warning: Prop `className` did not match. Server: "sc-gsDKAQ WHHak" Client: "sc-bdvvtL fKlryF"
    styledComponents: true
  },
  reactStrictMode: false,
  urlLoaderExcludes: [/.svg$/],
  webpack(nextConfig) {
    nextConfig.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return nextConfig
  },
};

module.exports = nextConfig;

然后删掉dest文件，重新build一次，再重新run