無法在 React 中渲染 Svg 組件

Question

我有一個像這樣的組件，它接受對象數組作為道具。 info 數組有一個名為 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>
                </>
        ))}