當我嘗試使用 svg 圖標時反應返回 [object Object]

Question

我有一個組件，它返回一個 svg 圖像的容器模板，獲取它的鏈接和一個類名

export function Icon(icon, className) {
  return (
    <span
      className={classNames(['navbar-icon', className])}
      dangerouslySetInnerHTML={{ __html: icon }}
    />
  );
}

然后我將它導入到我需要的組件中

import iconHome from './img/icon/home.svg';
import { Icon } from '../Icon';

當我使用該組件將它傳遞給我需要的圖標的鏈接時，我得到 [object Object]

<Icon icon={link.icon} />

如何解決？

Answer 1

嘗試這個 ：

import {ReactComponent as Icon } from '../Icon';