used svgRenderer component by sanitizing svg content

Author: M-ayank2005

frontend/src/components/skeletons/svgRenderer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface SVGRendererProps {
+    svgContent: string;
+}
+
+const SVGRenderer: React.FC<SVGRendererProps> = ({ svgContent }) => {
+    const sanitizeSVG = (svg: string): string => {
+        return svg
+            .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+            .replace(/\b(on\w+)="[^"]*"/gi, '');
+    };
+    
+    return (
+        <span 
+            className="inline-block" 
+            dangerouslySetInnerHTML={{ __html: sanitizeSVG(svgContent) }}
+        />
+    );
+};
+
+export default SVGRenderer;

frontend/src/pages/About.tsx

@@ -13,9 +13,10 @@ import SecondaryCard from 'components/SecondaryCard'
 import TopContributors from 'components/TopContributors'
 import { toaster } from 'components/ui/toaster'
 import UserCard from 'components/UserCard'
-
+import SVGRenderer from 'components/skeletons/svgRenderer'
 const leaders = ['arkid15r', 'kasya', 'mamicidal']
 
+
 const About = () => {
   const [project, setProject] = useState<ProjectTypeGraphql | null>(null)
   const [isLoading, setIsLoading] = useState<boolean>(true)
@@ -91,11 +92,9 @@ const About = () => {
                   <ul className="space-y-3">
                     {Object.entries(tech.tools).map(([name, details]) => (
                       <li key={name} className="flex flex-row items-center gap-2">
-                        <span
-                          className="text-xl"
-                          style={{ color: '#9ca3af' }}
-                          dangerouslySetInnerHTML={{ __html: details.icon }}
-                        />
+                        <span className="text-xl" style={{ color: '#9ca3af' }}>
+                         <SVGRenderer svgContent={details.icon} />
+                        </span>
                         <a
                           href={details.url}
                           className="text-gray-600 hover:underline dark:text-gray-300"