SVG Component

[fayez-nazzal]

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.

[nandorojo]

yeah it’s not a bad idea. for now i would use a combo of useDripsyTheme and useResponsiveValue

[DubaniWarrior]

can you show an example?

[nandorojo]

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}
    />
  );
};