SVG Component
fayez-nazzal opened this issue · comments
Fayez Nazzal commented
Could we have a wrapper SVG Component that works with both React Native and Web?
I was able to integrate SVG with React Native using react-native-svg
and react-native-svg-transformer
. For web, it wouldn't be that difficult to implement using libraries like SVGR.
import Icon from "../svg/icon.svg";
export const App = () => {
return (
<SVG component={Icon} sx={{
fill: "#277BC0",
width: [24, 24, 32],
height: [24, 24, 32]
}}
/>
);
}
Using this approach we make sure that styling is done the right way for each platform, this could save tons of time.
Fernando Rojo commented
yeah it’s not a bad idea. for now i would use a combo of useDripsyTheme
and useResponsiveValue
David Mbadinga commented
can you show an example?
Fernando Rojo commented
import Icon from "../svg/icon.svg";
import { useDripsyTheme, useResponsiveValue } from "dripsy";
export const App = () => {
const height = useResponsiveValue([24, 24, 32]);
const theme = useDripsyTheme();
const width = useResponsiveValue((theme) => [theme.space.$3, theme.space.$4]);
return (
<SVG
component={Icon}
{...{
fill: theme.colors.$primary,
width,
}}
height={height}
/>
);
};