无法在 React 中渲染 Svg 组件

Question

我有一个像这样的组件，它接受对象数组作为道具。信息数组有一个名为 icon 的键，其值为另一个组件 (SVG) Home、People、Bath、Size

   const info = [
    {

        value: 1,
        icon: Home
    },
    {

        value: 2,
        icon: People
    },
    {

        value: 10,
        icon: Size
    },
    {

        value: 1,
        icon: Bath
    },
]


<Info info={info} />

在 Info 组件内部：

 info.map((item, i) => (
                        <>
                            <li className="inline-flex">
                               {item.icon}
                            </li>
                        </>
                ))

现在的问题是我无法渲染图标组件，当我记录它时，它会打印一个 function()

我应该怎么做才能打印图标组件？

更新：

这就是我的 svg 组件的样子。

  import React, { StatelessComponent, SVGAttributes } from "react";
    
    export interface SvgrComponent extends StatelessComponent<SVGAttributes<SVGElement>> {}
    
    export const People: SvgrComponent = () => {
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          focusable="false"
        >
          <path
            d="M21,15V13a1,1,0,0,0-1-1H19V6a3,3,0,0,0-6,0v.5a.5.5,0,0,0,1,0V6a2,2,0,0,1,4,0v6H4a1,1,0,0,0-1,1v2a5,5,0,0,0,2.17,4.12l-1,1a.48.48,0,0,0,0,.7.48.48,0,0,0,.7,0l1.24-1.23A5,5,0,0,0,8,20h8a5,5,0,0,0,1.91-.38l1.24,1.23a.49.49,0,0,0,.7-.7l-1-1A5,5,0,0,0,21,15Zm-2.9,3.39a3.74,3.74,0,0,1-1,.43A3.8,3.8,0,0,1,16,19H8a3.8,3.8,0,0,1-1.12-.18,3.74,3.74,0,0,1-1-.43A4,4,0,0,1,4,15V13H20v2A4,4,0,0,1,18.1,18.39Z"
            fill="currentColor"
          />
        </svg>
      );
    };

Answer 1

尝试以下方法：

 info.map((item, i) => (
                        <>
                            <li className="inline-flex">
                               {item.icon()}
                            </li>
                        </>
                ))

Answer 2

svg 应该设置为 img 的源

           {
                info.map((item, i) => (
                    <>
                        <li className="inline-flex">
                          <img src={item.icon} />
                        </li>
                    </>
            ))}

Answer 3

我希望看到更多代码发布，因为以下工作：

import React from "react";
import "./style.css";

const Home = (
  <svg class="svg-icon" viewBox="0 0 20 20">
    <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z" />
  </svg>
);

const People = (
  <svg class="svg-icon" viewBox="0 0 20 20">
    <path d="M17.684,7.925l-5.131-0.67L10.329,2.57c-0.131-0.275-0.527-0.275-0.658,0L7.447,7.255l-5.131,0.67C2.014,7.964,1.892,8.333,2.113,8.54l3.76,3.568L4.924,17.21c-0.056,0.297,0.261,0.525,0.533,0.379L10,15.109l4.543,2.479c0.273,0.153,0.587-0.089,0.533-0.379l-0.949-5.103l3.76-3.568C18.108,8.333,17.986,7.964,17.684,7.925 M13.481,11.723c-0.089,0.083-0.129,0.205-0.105,0.324l0.848,4.547l-4.047-2.208c-0.055-0.03-0.116-0.045-0.176-0.045s-0.122,0.015-0.176,0.045l-4.047,2.208l0.847-4.547c0.023-0.119-0.016-0.241-0.105-0.324L3.162,8.54L7.74,7.941c0.124-0.016,0.229-0.093,0.282-0.203L10,3.568l1.978,4.17c0.053,0.11,0.158,0.187,0.282,0.203l4.578,0.598L13.481,11.723z" />
  </svg>
);

const info = [
  {
    value: 1,
    icon: Home
  },
  {
    value: 2,
    icon: People
  }
];

const Info = ({ info }) => (
  <div>
    {info.map((item, i) => (
      <>
        <li className="inline-flex">{item.icon}</li>
      </>
    ))}
  </div>
);

export default function App() {
  return <Info info={info} />;
}

Answer 4

我建议嵌入图像中。这是一个简单的代码。

{
            info.map((item, i) => (
                <>
                    <li className="inline-flex">
                      <img src={item.icon} />
                    </li>
                </>
        ))}