在 parent 中导入 SVG 并传递给 child

Question

目前我是这样导入图标的

//index.ts file for svgs
import BackArrow from './back-arrow.svg'

export {
  BackArrow,
  ...
}

在一个组件中，我现在可以轻松导入和使用它

import { BackArrow } from '../../assets/images'
....

return <BackArrow />

现在我尝试制作一个 (child) 组件，它应该显示两个按钮和一个文本，它们由 parent 组件传递。

Parent 像这样使用 child：

      <Button
        label='hi'
        iconLeft={BackIcon}
        buttonTheme={BUTTONS_THEME.dark}
      />

Child 看起来像：

//Styled components (ThemedButton, Icon, Label)

const Button = ({  label,  iconLeft,  iconRight,  theme}) => {
  <ThemedButton>
     {iconLeft && <Icon theme={theme} xml={iconLeft} />}
     <Label theme={theme}>{label}</Label>
     {iconRight && <Icon theme={theme} xml={iconRight} />}
  </ThemedButton>

这一切工作正常，如果在 parent 组件中我像这样导入 svg： import BackArrow from '../../assets/images/back-arrow.svg' 但我想像在应用程序的其他地方一样使用“正常”方式导入它，如下所示：import { BackArrow } from '../../assets/images'

有人知道如何解决这个问题吗？我试图像这样传递图标 <Button leftIcon={<BackArrow />}... />，但我无法正常工作，因为我不知道如何在 child.

中使用和设置图标样式

Answer 1

我不知道您在构建过程中使用了什么。但这可能是因为您用于加载 svg 的加载程序。如果你像这样导入你的 svg：import BackArrow from '../../assets/images/back-arrow.svg' 它可能会作为 dataURL 加载它。如果你像这样导入你的 svg：import { BackArrow } from '../../assets/images' 它导入为反应组件。因此，您不能将其用作图标的 xml 道具。

Answer 2

我想你想做的是在你的 child 中使用你的 BackArrow 作为 <BackArrow />

以下方法适用于 CRA 应用程序，您可以在其中将 svg 作为 ReactComponent

导入

我按照这种方法解决了类似的问题。

导入为 import { BackArrow } from './back-arrow.svg

继续传给child为

 <Button
    label='hi'
    iconLeft={BackIcon}
    buttonTheme={BUTTONS_THEME.dark}
 />

但是，现在 child 不要破坏你的道具，

const Button = (props) => {
  <ThemedButton>
     {props.iconLeft && <props.iconLeft ... />}
     <Label theme={props.theme}>{props.label}</Label>
     {props.iconRight && <props.iconRight ... />}
  </ThemedButton>

编辑：

在 child 组件中，当你有 <props.iconLeft ... /> 时，这相当于 <BackArrow /> 所以现在你可以自由地设置它的样式，基本上按照你在 parent 当你有 <BackArrow />。在 child 中解构你的道具在这里不太奏效。

在 parent 中导入 SVG 并传递给 child

Import SVG in parent and pass to child

javascript

svg

reactjs

react-native