Reactjs 如何将svg作为道具传递给可按组件

在这两个库的帮助下，我使用了很多svg图像

"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",

然后我可以导入和使用svg图像，如下所示

import Logo from '../assets/svg/img.svg';
...
...
<Logo height={60} />
...

<ButtonPressable text="Login" backgroundColor="red" svg="../assets/svg/img.svg" />

从“../assets/svg/img.svg”导入徽标；
...
...
...

下面是我的自定义按钮

***imaginary part // import Logo from '../assets/svg/img.svg';

const ButtonPressable = (props) => {
  return (
    <View>
      <Pressable
        style={[
          props.backgroundColor
            ? {backgroundColor: props.backgroundColor}
            : {backgroundColor: '#0077b6'},
        ]}>
        <Text>
          {props.text ? props.text : ''}
        </Text>

***imaginary part // <Logo height={60} />

      </Pressable>
    </View>
  );
};

***虚部//从“../assets/svg/img.svg”导入徽标；
常量按钮消息=（道具）=>{
返回(
{props.text？props.text:'}
***虚部
);
};

我正在使用上面的组件，如下所示

<ButtonPressable text="Login" backgroundColor="red" />

如果你看上面代码中的虚部。通过这种方式，我可以在组件中显示svg图像。 但是，我需要将svg图像显示为如下所示的道具

import Logo from '../assets/svg/img.svg';
...
...
<Logo height={60} />
...

<ButtonPressable text="Login" backgroundColor="red" svg="../assets/svg/img.svg" />

如何将svg路径作为道具传递并显示在组件内部？您怎么做

<img src={require(props.svg)} alt="Logo" height={60} />

---

将SVG转换为JSX。然后可以将其用作图标组件

你可以用这个或者

例如，下面是一个左箭头svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16.327" viewBox="0 0 20 16.327"><path d="M-9.974-7.735a.988.988,0,0,0,.334.722L-2.489.127a.982.982,0,0,0,.7.3A.918.918,0,0,0-.841-.5a.943.943,0,0,0-.269-.679L-3.523-3.631l-3.63-3.306,2.606.162H9.078a.913.913,0,0,0,.948-.959.913.913,0,0,0-.948-.959H-4.546l-2.6.162,3.619-3.306,2.412-2.456a.961.961,0,0,0,.269-.679.918.918,0,0,0-.948-.926.964.964,0,0,0-.722.323L-9.64-8.456A.988.988,0,0,0-9.974-7.735Z" transform="translate(9.974 15.898)"/></svg>

然后可以使用上面的链接并将其转换为JSX

import * as React from 'react';
import Svg, { Path } from 'react-native-svg';

export interface IconLeftArrowProps {
  width?: number;
  height?: number;
  color?: string;
}

/**
 * IconLeftArrow
 * Base svg file
 * assets/images/svgsSrc/icon_arrow_left.svg
 * @param
 * width   {Number} [ svg width size,  default size 20 ]
 * height  {Number} [ svg height size, default size 16.327 ]
 * color   {String} [ svg fill color,  default color BLACK(#000000) ]
 */
const IconLeftArrow: React.FC<IconLeftArrowProps> = ({
  width = 20 ,
  height = 16.327 ,
  color = #000000,
}) => (
  <Svg width={width} height={height} viewBox="0 0 20 16.327">
    <Path
      fill={color}
      d="M-9.974-7.735a.988.988,0,0,0,.334.722L-2.489.127a.982.982,0,0,0,.7.3A.918.918,0,0,0-.841-.5a.943.943,0,0,0-.269-.679L-3.523-3.631l-3.63-3.306,2.606.162H9.078a.913.913,0,0,0,.948-.959.913.913,0,0,0-.948-.959H-4.546l-2.6.162,3.619-3.306,2.412-2.456a.961.961,0,0,0,.269-.679.918.918,0,0,0-.948-.926.964.964,0,0,0-.722.323L-9.64-8.456A.988.988,0,0,0-9.974-7.735Z"
      transform="translate(9.974 15.898)"
    />
  </Svg>
);

export default IconLeftArrow;

import*as React from'React'；
从“react native Svg”导入Svg，{Path}；
导出接口IconLeftArrowProps{
宽度？：数字；
高度？：数字；
颜色？：字符串；
}
/**
*IconLeftArrow
*基本svg文件
*资源/images/svgsSrc/icon\u arrow\u left.svg
*@param
*宽度{Number}[svg宽度大小，默认大小20]
*高度{Number}[svg高度大小，默认大小16.327]
*颜色{String}[svg填充颜色，默认黑色（#000000）]
*/
常量IconLeftArrow:React.FC=({
宽度=20，
高度=16.327，
颜色=#000000，
}) => (
);
导出默认IconLeftArrow；

我不能肯定转换器是否能完美工作，因为我也遇到过一些问题。但如果它不起作用，请尝试将svg更改为svg、路径到路径等等

---

然后您可以导入并使用它们。

下面是一个如何传递从主组件导入的SVG的示例。这个想法是

按钮可传递的

将有一个道具，svg，它可以是任何东西，但也可以是svg。请修改

按钮消息

，如下所示

const ButtonPressable = (props) => {
  return (
    <View>
      <Pressable
        style={[
          props.backgroundColor
            ? {backgroundColor: props.backgroundColor}
            : {backgroundColor: '#0077b6'},
        ]}>
        <Text>
          {props.text ? props.text : ''}
        </Text>

{props.svg? <props.svg height={60} /> : null}

      </Pressable>
    </View>
  );
};

const按钮消息=（道具）=>{
返回(
{props.text？props.text:'}
{props.svg？：null}
);
};

然后像这样将它们导入任意位置并传递SVG

import Logo from '../assets/svg/img.svg';
<ButtonPressable text="Login" backgroundColor="red" svg={Logo} />

从“../assets/svg/img.svg”导入徽标；

---

这将保持按钮消息的可重用性。

在项目中使用SVG有多种方法

将SVG转换为字体文件并在项目中导入它们。我没有尝试过这个，因为每次你必须添加一个图标时，你都必须执行这个过程

使用

react native svg transformer

，我自己也用过，而且很容易实现（尽管在世博会上没有尝试过）。文件清楚地说明了如何在项目中实施

您可以创建2个文件

导出所有svg的

从“@src/assets/svg/leftArrow.svg”导入leftArrow图标；
导出常量文件={
左箭头图标
};
导出常量图标名={
左箭头图标：“左箭头图标”，//值应与图标文件导入相同
};

图标的单个通用组件（基于SVG）

//icon.tsx
从“@src/themes/icons”导入{iconfile}；
//道具：{iconName:string}示例：左箭头图标
导出默认值（道具）=>{
const I=iconfile[`${props.iconName}`]；
返回(
);
};

最后在

按钮组件中

const按钮消息=（道具）=>{
返回(
{props.text？props.text:'}
);
};

在父组件中，您可以像这样使用它


这不会产生任何错误，只适用于图像，但不适用于svg。请参考这篇文章，我们必须像他们提到的那样使用它。如果我理解正确，您希望将svg作为道具传递。现在，您正在传递一个不起作用的路径，相反，要传递该
虚部
ie
import Logo from'../assets/svg/img.svg'
然后将徽标作为svg道具传递给
@SaachiTech。对我来说，任何事情都可以，目前我将图像作为道具传递，与下面的答案完全相同。但是，这对svg不起作用。任何解决方法都是非常受欢迎的。如果你不介意我问你，当它是一个静态内容，而不是像你在想象部分那样使用时，为什么你必须把它作为道具来传递？@Glitch_Znab我们创建组件用于多个项目。因此，我们不能在组件中硬编码任何内容。如果我是对的，这就是react native的主要功能。您是否尝试过将SVG转换为JSX并传递？如果不让我发布一个答案，这有点复杂。如果有一种方法可以动态生成包含导入的组件。这样就可以更容易地将导入及其用法语句直接注入到自定义组件中所需的行中。无论如何，我会尝试一下，检查是否没有任何效果。实际上，由于typescript的原因，它看起来很复杂，但是你可以将上面的代码复制到任何地方，只替换Svg内容，即Svg代码。这非常有效，这就是我正在寻找的-动态组件块创建。