Estoy tratando de implementar el visor del escáner de código de barras y quiero usar el ícono svg para que se vea bien, pero tengo un problema al forzar el elemento de ruta dentro del svg para que ocupe todo el ancho y alto de svg. Estoy usando React Native y para generar un ícono, uso SVGR https://react-svgr.com/playground/?native=true&typescript=true en el controlador de escaneo. Establezco las dimensiones del svg así:

 const handleBarCodeScanned = ({ type, data, bounds }: BarCodeEvent) => { if (!bounds) return; const { origin, size } = bounds; setX(origin.x); setY(origin.y); setWidth(size.width); setHeight(size.height); };

y los iso dentro del svg que se ve así

 import * as React from "react"; import Svg, { SvgProps, Path } from "react-native-svg"; export const ViewFinder = (props: SvgProps & { top: number; left: number }) => { const { width, height, top, left } = props; return ( <Svg width={width} height={height} style={{ borderColor: "green", borderWidth: 2, position: "absolute", left: 0, top: 0, width: "100%", height: "100%", }} fill="none" stroke="green" preserveAspectRatio="none" viewBox={`0 0 ${width} ${height}`} > <Path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></Path> <Path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></Path> </Svg> ); };

El ícono original es un ícono de recorte de featerIcons https://feathericons.com/ y el código original del ícono es:

 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>

como puede ver, configuré el color del borde y el ancho del borde en el svg mismo, y se escala para ajustarse al contenedor, así que aquí todo parece estar bien. Tengo viewBox y preserveAspectRatio configurados, es solo la ruta interna que no se escala con el svg, y no es solo este icono. He probado varios y el problema sigue siendo el mismo, por lo que debe haber algún problema con mi comprensión de svg.

Muchas gracias por cualquier ayuda.