fix: web example (#2376)

Fix web example by adding missing tags and importing react

src/ReactNativeSVG.web.ts

@@ -24,6 +24,8 @@ import type { TSpanProps } from './elements/TSpan';
 import type { UseProps } from './elements/Use';
 import type { FilterProps } from './elements/filters/Filter';
 import type { FeColorMatrixProps } from './elements/filters/FeColorMatrix';
+import type { FeGaussianBlurProps } from './elements/filters/FeGaussianBlur';
+import type { FeOffsetProps } from './elements/filters/FeOffset';
 import type {
   GestureResponderEvent,
   ImageProps as RNImageProps,
@@ -588,4 +590,12 @@ export class FeColorMatrix extends WebShape<BaseProps & FeColorMatrixProps> {
   tag = 'feColorMatrix' as const;
 }
 
+export class FeGaussianBlur extends WebShape<BaseProps & FeGaussianBlurProps> {
+  tag = 'feGaussianBlur' as const;
+}
+
+export class FeOffset extends WebShape<BaseProps & FeOffsetProps> {
+  tag = 'feOffset' as const;
+}
+
 export default Svg;

src/filter-image/FilterImage.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import * as React from 'react';
 import {
   ImageProps,
   ImageStyle,
@@ -27,7 +27,7 @@ export const FilterImage = (props: FilterImageProps) => {
   const { filters = [], source, style, ...imageProps } = props;
   const styles = StyleSheet.flatten(style);
   const extractedFilters = [...filters, ...extractFiltersCss(styles?.filter)];
-  const filterId = useMemo(() => `RNSVG-${getRandomNumber()}`, []);
+  const filterId = React.useMemo(() => `RNSVG-${getRandomNumber()}`, []);
 
   const src =
     Platform.OS === 'web'
@@ -40,7 +40,7 @@ export const FilterImage = (props: FilterImageProps) => {
   return (
     <View style={[styles, { width, height, overflow: 'hidden' }]}>
       <Svg width="100%" height="100%">
-        <Filter id={`filter`}>
+        <Filter id={filterId}>
           {extractedFilters.map(mapFilterToComponent)}
         </Filter>
         <Image

src/tags.tsx

@@ -1,30 +1,31 @@
-import Rect from './elements/Rect';
-import Circle from './elements/Circle';
-import Ellipse from './elements/Ellipse';
-import Polygon from './elements/Polygon';
-import Polyline from './elements/Polyline';
-import Line from './elements/Line';
-import Svg from './elements/Svg';
-import Path from './elements/Path';
-import G from './elements/G';
-import Text from './elements/Text';
-import TSpan from './elements/TSpan';
-import TextPath from './elements/TextPath';
-import Use from './elements/Use';
-import Image from './elements/Image';
-import Symbol from './elements/Symbol';
-import Defs from './elements/Defs';
-import LinearGradient from './elements/LinearGradient';
-import RadialGradient from './elements/RadialGradient';
-import Stop from './elements/Stop';
-import ClipPath from './elements/ClipPath';
-import Pattern from './elements/Pattern';
-import Mask from './elements/Mask';
-import Marker from './elements/Marker';
-import Filter from './elements/filters/Filter';
-import FeColorMatrix from './elements/filters/FeColorMatrix';
-import FeGaussianBlur from './elements/filters/FeGaussianBlur';
-import FeOffset from './elements/filters/FeOffset';
+import Svg, {
+  Circle,
+  ClipPath,
+  Defs,
+  Ellipse,
+  G,
+  Image,
+  Line,
+  LinearGradient,
+  Marker,
+  Mask,
+  Path,
+  Pattern,
+  Polygon,
+  Polyline,
+  RadialGradient,
+  Rect,
+  Stop,
+  Text,
+  TextPath,
+  TSpan,
+  Use,
+  Symbol,
+  Filter,
+  FeColorMatrix,
+  FeGaussianBlur,
+  FeOffset,
+} from './ReactNativeSVG';
 
 export const tags = {
   circle: Circle,

src/tags.web.tsx

@@ -1,50 +0,0 @@
-import Svg, {
-  Circle,
-  ClipPath,
-  Defs,
-  Ellipse,
-  G,
-  Image,
-  Line,
-  LinearGradient,
-  Marker,
-  Mask,
-  Path,
-  Pattern,
-  Polygon,
-  Polyline,
-  RadialGradient,
-  Rect,
-  Stop,
-  Text,
-  TextPath,
-  TSpan,
-  Use,
-  Symbol,
-} from './ReactNativeSVG.web';
-
-export const tags = {
-  circle: Circle,
-  clipPath: ClipPath,
-  defs: Defs,
-  ellipse: Ellipse,
-  g: G,
-  image: Image,
-  line: Line,
-  linearGradient: LinearGradient,
-  marker: Marker,
-  mask: Mask,
-  path: Path,
-  pattern: Pattern,
-  polygon: Polygon,
-  polyline: Polyline,
-  radialGradient: RadialGradient,
-  rect: Rect,
-  stop: Stop,
-  svg: Svg,
-  symbol: Symbol,
-  text: Text,
-  textPath: TextPath,
-  tspan: TSpan,
-  use: Use,
-} as const;