I am using CRA so I can import an svg as a React Component directly like so:

import { ReactComponent as Tree } from "../assets/images/tree.svg";

See this post as reference: Adding svgr to create-react-app via craco

So I thought I could use this now and drop it into the antd icon component:

 <Icon component={Tree} />

But all the console is giving me is a

Warning: [antd: Icon] Empty Icon

even though the svg file exists, the path is correct and so on.

CodePudding user response：

Please have a look at this Demo on the sandbox , It might help you if you just copied and pasted into your project. https://codesandbox.io/s/adoring-brook-lckzw?file=/src/App.js

I just used a very basic config for craco and installed these libs

• "@ant-design/icons": "4.0.0"
• "@craco/craco": "^6.4.0"