reactjs - 控制台记录导入的 SVG 会给出数字

Question

当我导入 SVG 并将其作为道具传递给另一个组件时，console.log 传递的 SVG 道具我得到数字。由于这个原因，我遇到了问题，因为这react-native-svg-uri需要我将 SVG 作为其svgXmlData属性的字符串导入。

父组件

import SVGICON from './icon.svg';

const ParentComponent = () => {
  console.log(SVGICON); // this outputs numbers
  return (
    <ChildComponent
      icon={SVGICON}
    />
  );
};

子组件

import SvgUri from 'react-native-svg-uri'

const ChildComponent = (props) => {
  return (
    <SvgUri
      width="24"
      height="24"
      svgXmlData={props.icon}
    />
  );
};

但是我也注意到，当我将图标导入到与 SvgUri 相同的位置时，它会正确呈现，并且 console.log 会将正确的 svg 组件呈现为字符串。

有时这可行，但我不知道为什么

import SvgUri from 'react-native-svg-uri';
import SVGICON from './icon.svg';

const WorkingComponent = () => {
  return (
    <SvgUri
      width="24"
      height="24"
      svgXmlData={SVGICON}
    />
  );
};

Answer 1

也许您可以将文件名作为道具传递并在子组件中动态加载文件。
我有一个类似的组件，我在其中加载 svg 图标，如下所示：
logo = require(``./icons/${props.icon}.svg``)