我如何在react native上更改图标的宽度和高度?

ih99xse1  于 2022-12-19  发布在  React
关注(0)|答案(3)|浏览(162)

我已经创建了SVG组件的所有svg的。我只是想改变宽度高度与 prop ,但我不知道。我用这样的图标现在<SVGCustomIcon name="InboxMenu" />。我怎么也可以添加宽度高度 prop ?
自定义SVG组件

const icons: SVGCustomIconMap = {
 InboxMenu: (
    <Svg width={18} height={20} viewBox="0 0 18 20" fill="none">
      <Path
        d="M11.25 17.5c0 .629-.262 1.3-.73 1.77-.47.468-1.141.73-1.77.73a2.5 2.5 0 01-1.77-.73 2.563 2.563 0 01-.73-1.77h5z"
        fill="#949494"
      />
     .....
  ),
  ProfileMenu: (
    <Svg width={20} height={22} viewBox="0 0 20 22" fill="none">
    ......
  ),
};
const SVGCustomIcon = ({ name }: SVGCustomIconProps) => {
  return <>{icons[name] ? icons[name] : null}</>;
};

export default SVGCustomIcon;

type.ts

export type SVGCustomIcon = React.SVGProps<SVGSVGElement>;

export interface SVGCustomIconMap {
  [key: string]: SVGCustomIcon;
}

export interface SVGCustomIconProps {
  name: string;
}
vfh0ocws

vfh0ocws1#

你可以试试这个

export interface SVGCustomIconMap {
  [key: string]: any;
}

export interface SVGCustomIconProps {
  name: string;
  width?: number;
  height?: number;
}

export type TSize = {
  width?: number;
  height?: number;
};
const icons: SVGCustomIconMap = {
  InboxMenu: ({ width, height }: TSize) => {
    return (
      <>
        <Svg
          width={width || 18}
          height={height || 20}
          viewBox="0 0 18 20"
          fill="none">
          {/* .... your rest code .... */}
      </>
    );
  },
  ProfileMenu: ({ width, height }: TSize) => {
    return (
      <>
        <Svg
          width={width || 20}
          height={height || 22}
          viewBox="0 0 20 22"
          fill="none">
          {/* ...... your rest code ....... */}
      </>
    );
  },
};

const SVGCustomIcon = ({ name, width, height }: SVGCustomIconProps) => {
  const SvgCustom = icons?.[name] ? icons[name] : null;
  if (!SvgCustom) {
    return null;
  }
  return <SvgCustom width={width} height={height} />;
};

export default SVGCustomIcon;
//how to call
<SVGCustomIcon name="InboxMenu" width={20} height={22} />;
gr8qqesn

gr8qqesn2#

我会尝试在svg组件中添加一个'preserveAspectRatio=“none”。我不经常使用React Native,但我依稀记得这个问题。

ProfileMenu: (
    <Svg width={20} height={22} viewBox="0 0 20 22" fill="none" preserveAspectRatio="none">
    )
c90pui9n

c90pui9n3#

To change the width and height of an SVG icon in a React Native application, you can use the style prop of the Svg component.

Here is an example of how you can set the width and height of an SVG icon to 50 pixels:

Copy code
import { Svg } from 'react-native-svg';

function MyIcon() {
  return (
    <Svg width={50} height={50}>
      {/* Icon content goes here */}
    </Svg>
  );
}
You can also use the style prop to set the width and height using a style object:

Copy code
import { Svg } from 'react-native-svg';

function MyIcon() {
  return (
    <Svg style={{ width: 50, height: 50 }}>
      {/* Icon content goes here */}
    </Svg>
  );
}
Keep in mind that the width and height of the Svg component will determine the size of the entire icon, including any elements inside it. You may need to adjust the size of the individual elements within the icon as well to achieve the desired appearance.

相关问题