I'm working on incorporating a barcode scanner viewfinder with an SVG icon to enhance its appearance. However, I am facing difficulty in making the path element within the SVG take up the full width and height of the SVG. In my React Native project, I am using SVGR to generate the icon. Here is how I set the dimensions of the SVG in the scan handler:
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);
};
Then, I use these dimensions inside the SVG as shown below:
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>
);
};
The original icon used is from Feather Icons - Crop icon . The code for the original icon looks like this:
<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>
While the border color and borderWidth are set directly on the SVG itself, scaling works fine based on the container dimensions. I have specified viewBox and preserveAspectRatio, but the inner path is not scaling with the SVG. I have tried multiple icons, and the issue persists, indicating a possible misunderstanding of SVG on my part.
Any help or suggestions would be greatly appreciated. Thank you!