Creé un componente reutilizable para SvgIcon en react-native. Pasé tres accesorios en él, a saber, icono, ancho y alto. También configuré algunos accesorios predeterminados en mi componente. El problema es que mi componente selecciona accesorios predeterminados para el ícono, pero no elige accesorios predeterminados para ancho y alto. Cuando paso ancho y alto como accesorios en mi componente SvgIcon, está tomando esos accesorios, pero lo que quiero es que no necesito pasar accesorios de ancho y alto cada vez. El ancho y la altura deben ser 24 por defecto.

 import React from "react"; import PropTypes from "prop-types"; import defaultSvg from "@app/assets/svgs/check-logo-sm.svg"; const SvgIcon = ({ width, height, icon: Icon }) => { return <Icon width={width} height={height} />; }; SvgIcon.defaultProps = { width: 24, height: 24, icon: defaultSvg, }; export default SvgIcon; SvgIcon.propTypes = { width: PropTypes.number, height: PropTypes.number, icon: PropTypes.func, };

Cuando llamo al componente como <SvgIcon icon={homeIcon} width={40} height={40} /> , funciona bien, pero quiero llamarlo como <SvgIcon icon={homeIcon} /> , y lo quiero para tomar su ancho y alto predeterminados.