From 09eaa4c56aa20e87a4d9e6b5db5c3c76d4508e32 Mon Sep 17 00:00:00 2001
From: daredevil <himanshu12.gupta@ril.com>
Date: Mon, 25 Dec 2023 11:04:44 +0530
Subject: [PATCH] added readme.svg

---
 README.md  | 34 +---------------------------------
 readme.svg | 43 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 33 deletions(-)
 create mode 100644 readme.svg

diff --git a/README.md b/README.md
index c1742b5..79e1f19 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,4 @@
-<p align="center">
-  <a href="https://github.com/opensrc0/fe-theme">
-    <img src="https://png.pngtree.com/png-clipart/20220103/original/pngtree-show-biceps-png-image_7019290.png" alt="FE-Theme Logo" width="100" />
-  </a>
-</p>
-<h2 align="center">A React UI library using styled-component to build consistent, responsive, theme able UI 💪 </h2>
-<br />
-<p align="center">
-  <a href="https://www.npmjs.com/package/fe-theme">
-   <img alt="Minified Size" src="https://badgen.net/bundlephobia/minzip/fe-theme?color=cyan"/>
-  </a>
-  <a href="https://styled-components.com/releases#v6.1.1">
-  <img alt="Styled Component Version" src="https://img.shields.io/badge/styled_component-6.1.1-%2350c62a?logo=styled-components&logoColor=50c62a"/>
-  </a>
-  <a href="https://react.dev/reference/react">
-  <img alt="React Version" src="https://img.shields.io/badge/react-18.2.0-%23f1e05a?logo=React"/>
-  </a>
-  <a href="https://www.npmjs.com/package/fe-theme">
-    <img alt="NPM Downloads" src="https://img.shields.io/npm/dw/fe-theme?label=Downloads&logo=npm"/>
-  </a>
-  <a href="https://www.npmjs.com/package/fe-theme/v/latest">
-    <img alt="Latest Release" src="https://badgen.net/github/release/opensrc0/fe-theme?icon=github&color=pink"/>
-  </a>
-</p>
-<p align="center">
-  <a href="https://github.com/opensrc0/fe-theme/stargazers">
-    <img alt="Github Stars" src="https://badgen.net/github/stars/opensrc0/fe-theme?icon=github&color=purple"/>
-  </a>
-  <a href="https://github.com/opensrc0/fe-theme/blob/master/LICENSE.md">
-    <img alt="MIT License" src="https://badgen.net/static/license/MIT/orange"/>
-  </a>
-</p>
-<br />
+<img src="readme.svg" style="width: 100%;" alt="Click to see the source">
 
 FE-Theme is a styled-component based comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a theme based UI to quickly start a new small/medium/large size web based applications.
 
diff --git a/readme.svg b/readme.svg
new file mode 100644
index 0000000..0b433d0
--- /dev/null
+++ b/readme.svg
@@ -0,0 +1,43 @@
+<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg">
+  <foreignObject width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <style>
+        
+      </style>
+
+      <p align="center">
+        <a href="https://github.com/opensrc0/fe-theme">
+          <img src="https://png.pngtree.com/png-clipart/20220103/original/pngtree-show-biceps-png-image_7019290.png" alt="FE-Theme Logo" width="100" />
+        </a>
+      </p>
+      <h2 align="center">A React UI library using styled-component to build consistent, responsive, theme able UI 💪 </h2>
+      <br />
+      <p align="center">
+        <a href="https://www.npmjs.com/package/fe-theme">
+        <img alt="Minified Size" src="https://badgen.net/bundlephobia/minzip/fe-theme?color=cyan"/>
+        </a>
+        <a href="https://styled-components.com/releases#v6.1.1">
+        <img alt="Styled Component Version" src="https://img.shields.io/badge/styled_component-6.1.1-%2350c62a?logo=styled-components&logoColor=50c62a"/>
+        </a>
+        <a href="https://react.dev/reference/react">
+        <img alt="React Version" src="https://img.shields.io/badge/react-18.2.0-%23f1e05a?logo=React"/>
+        </a>
+        <a href="https://www.npmjs.com/package/fe-theme">
+          <img alt="NPM Downloads" src="https://img.shields.io/npm/dw/fe-theme?label=Downloads&logo=npm"/>
+        </a>
+        <a href="https://www.npmjs.com/package/fe-theme/v/latest">
+          <img alt="Latest Release" src="https://badgen.net/github/release/opensrc0/fe-theme?icon=github&color=pink"/>
+        </a>
+      </p>
+      <p align="center">
+        <a href="https://github.com/opensrc0/fe-theme/stargazers">
+          <img alt="Github Stars" src="https://badgen.net/github/stars/opensrc0/fe-theme?icon=github&color=purple"/>
+        </a>
+        <a href="https://github.com/opensrc0/fe-theme/blob/master/LICENSE.md">
+          <img alt="MIT License" src="https://badgen.net/static/license/MIT/orange"/>
+        </a>
+      </p>
+      <br />
+    </div>
+  </foreignObject>
+</svg>
\ No newline at end of file