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

Question

当我导入 SVG 并将其作为 props 传递到另一个组件时，console.log 传递的 SVG prop 会得到数字。由于这个原因，我遇到了问题，因为 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

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