@payello-ui/react-web-svg

This library provides React Native wrappers for SVG elements, allowing for the integration of SVGs within your React Web applications. It enables the conversion of React Native applications to Web by substituting the react-native-svg components with the wrapped components from this package.

Installation

npm install @payello-ui/react-web-svg
# or
yarn add @payello-ui/react-web-svg

Usage

Import any of the provided SVG components and use them in your React components just as you would with regular SVG elements:

import { Svg, Circle, Rect } from '@payello-ui/react-web-svg';

const MyComponent = () => (
  <Svg width="100" height="100">
    <Circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
    <Rect x="20" y="20" width="60" height="60" stroke="blue" strokeWidth="3" fill="red" />
  </Svg>
);

Components

The following SVG components are wrapped and exported:

• Svg
• Circle
• ClipPath
• Defs
• Ellipse
• ForeignObject
• G (Group)
• Image
• Line
• LinearGradient
• Marker
• Mask
• Path
• Pattern
• Polygon
• Polyline
• RadialGradient
• Rect
• Symbol
• Text
• TextPath
• TSpan
• Use

Each component accepts the standard SVG element properties as props.

Example

import { Svg, Polygon, Text } from '@payello-ui/react-web-svg';

const ExampleSvg = () => (
  <Svg height="210" width="400">
    <Polygon points="200,10 250,190 160,210" fill="lime" stroke="purple" strokeWidth="1" />
    <Text fill="red" fontSize="45" fontFamily="Verdana" x="50" y="86">SVG in React!</Text>
  </Svg>
);

export default ExampleSvg;

Contributing

Contributions are welcome! If you'd like to contribute, please fork the repository and create a pull request with your changes. For major changes, please open an issue first to discuss what you would like to change.