fix svg

Author: Maxenceee

scripts/picto-builder.ts

@@ -14,6 +14,14 @@ async function ensureDir(dir: string): Promise<void> {
     }
 }
 
+function extractSvgInnerContent(svg: string): string {
+    const match = svg.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
+    if (!match) {
+        throw new Error("Invalid SVG: cannot extract content");
+    }
+    return match[1].trim();
+}
+
 async function cleanSvgContent(svgData: string): Promise<string> {
     const result = optimize(svgData, {
         multipass: true,
@@ -62,14 +70,16 @@ async function generateComponent(svgPath: string, outputDir: string): Promise<st
     const outputFileName = svgName.replace(/\.svg$/, ".tsx");
 
     const svgData = await fs.readFile(svgPath, "utf8");
-    const cleanedSvg = await cleanSvgContent(svgData);
+    const cleanedSvg = extractSvgInnerContent(await cleanSvgContent(svgData));
 
     const template = `import React from 'react';
 import { createIcon } from './utils/IconWrapper';
 
 export default createIcon(
-    {{& svgContent}},
-	"{{componentName}}"
+    <>
+        {{& svgContent }}
+    </>,
+    "{{componentName}}"
 );
 `;
 

src/picto/Accessibility.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -57,6 +49,6 @@ export default createIcon(
             d="M40 12C24.536 12 12 24.536 12 40C12 55.464 24.536 68 40 68C45.9202 68 51.4086 66.1638 55.9304 63.0298C56.3843 62.7152 57.0073 62.8281 57.3219 63.282C57.6365 63.7359 57.5236 64.359 57.0696 64.6736C52.224 68.032 46.3403 70 40 70C23.4315 70 10 56.5685 10 40C10 23.4315 23.4315 10 40 10C56.5685 10 70 23.4315 70 40C70 40.5523 69.5523 41 69 41C68.4477 41 68 40.5523 68 40C68 24.536 55.464 12 40 12ZM67.2206 50.0748C67.7316 50.2845 67.9758 50.8686 67.7662 51.3796C67.4035 52.2638 66.9998 53.1268 66.5574 53.9662C65.4782 56.0144 64.1691 57.9222 62.6647 59.6555C62.3027 60.0726 61.6711 60.1172 61.254 59.7552C60.8369 59.3932 60.7923 58.7616 61.1543 58.3445C62.559 56.7261 63.7809 54.9451 64.788 53.0338C65.2008 52.2505 65.5775 51.4453 65.9159 50.6204C66.1255 50.1095 66.7097 49.8652 67.2206 50.0748Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Accessibility"
 );

src/picto/Airport.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -87,6 +79,6 @@ export default createIcon(
             d="M59.9933 56.8834C59.9355 56.386 59.5128 56 59 56H50V54H51L51.1332 53.993C52.2889 53.869 52.2889 52.131 51.1332 52.007L51 52H41L40.8668 52.007C39.7111 52.131 39.7111 53.869 40.8668 53.993L41 54H42V56H33L32.8834 56.0067C32.386 56.0645 32 56.4872 32 57V61L32.0067 61.1166C32.0645 61.614 32.4872 62 33 62L33.1166 61.9933C33.614 61.9355 34 61.5128 34 61V58H58V66H43.4L43.2834 66.0067C42.786 66.0645 42.4 66.4872 42.4 67C42.4 67.5523 42.8477 68 43.4 68H59L59.1166 67.9933C59.614 67.9355 60 67.5128 60 67V62H70V67L70.0067 67.1166C70.0645 67.614 70.4872 68 71 68C71.5523 68 72 67.5523 72 67V61L71.9933 60.8834C71.9355 60.386 71.5128 60 71 60H60V57L59.9933 56.8834ZM48 56V54H44V56H48Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Airport"
 );

src/picto/Application.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -93,6 +85,6 @@ export default createIcon(
             d="M41 66C41.5523 66 42 66.4477 42 67C42 67.5128 41.614 67.9355 41.1166 67.9933L41 68H21C20.4477 68 20 67.5523 20 67C20 66.4872 20.386 66.0645 20.8834 66.0067L21 66H41Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Application"
 );

src/picto/ArmyTank.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -97,6 +89,6 @@ export default createIcon(
             d="M20 57C19.4477 57 19 57.4477 19 58C19 58.5523 19.4477 59 20 59H41C41.5523 59 42 58.5523 42 58C42 57.4477 41.5523 57 41 57H20Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "ArmyTank"
 );

src/picto/Art.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -119,6 +111,6 @@ export default createIcon(
             d="M45.3133 45.2299C45.8491 45.3638 46.1749 45.9067 46.0409 46.4425C45.9053 46.985 46.1015 47.7205 46.8625 48.5026C47.6112 49.2721 48.8094 49.9652 50.3064 50.3281C51.8051 50.6915 53.2158 50.6336 54.266 50.2976C55.339 49.9542 55.8673 49.391 56.0006 48.8575C56.1346 48.3217 56.6775 47.9959 57.2133 48.1299C57.7491 48.2638 58.0749 48.8067 57.9409 49.3425C57.5743 50.809 56.3026 51.7458 54.8756 52.2024C53.4258 52.6664 51.6365 52.7085 49.8352 52.2718C48.0321 51.8347 46.4804 50.9778 45.4291 49.8973C44.3901 48.8295 43.7363 47.415 44.1006 45.9575C44.2346 45.4217 44.7775 45.0959 45.3133 45.2299Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Art"
 );

src/picto/Astronaut.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -125,6 +117,6 @@ export default createIcon(
             d="M32.3003 57.1209C32.8374 56.2774 32.837 56.2772 32.837 56.2772L32.8417 56.2801L32.8627 56.2933C32.8822 56.3054 32.9127 56.3243 32.954 56.3494C33.0366 56.3997 33.1622 56.4749 33.3286 56.5711C33.6615 56.7637 34.1575 57.0405 34.7997 57.3706C36.0845 58.0312 37.9512 58.9039 40.264 59.7434C44.8958 61.4248 51.2791 62.9598 58.3446 62.4238C58.8953 62.382 59.3756 62.7946 59.4174 63.3453C59.4592 63.896 59.0466 64.3763 58.4959 64.418C51.0615 64.982 44.3848 63.367 39.5815 61.6234C37.1768 60.7505 35.2323 59.8419 33.8852 59.1493C33.2114 58.8029 32.6864 58.5101 32.3271 58.3023C32.1475 58.1984 32.0093 58.1157 31.9146 58.0581C31.8672 58.0293 31.8307 58.0067 31.8054 57.991L31.7758 57.9724L31.7673 57.9671L31.7638 57.9648C31.7638 57.9648 31.7631 57.9644 32.3003 57.1209Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Astronaut"
 );

src/picto/Audio.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             d="M7 74C7.55228 74 8 73.5523 8 73C8 72.4477 7.55228 72 7 72C6.44772 72 6 72.4477 6 73C6 73.5523 6.44772 74 7 74Z"
             fill="#ECECFE"
@@ -111,6 +103,6 @@ export default createIcon(
             d="M58 41.4798C58 40.1565 59.1071 39 60.4516 39H60.5484C61.8929 39 63 40.1565 63 41.4798V45.722C63 46.2743 62.5523 46.722 62 46.722C61.4477 46.722 61 46.2743 61 45.722V41.4798C61 41.2246 60.7522 41 60.5484 41H60.4516C60.2478 41 60 41.2246 60 41.4798V60.5202C60 60.7754 60.2478 61 60.4516 61H60.5484C60.7522 61 61 60.7754 61 60.5202V49.6682C61 49.1159 61.4477 48.6682 62 48.6682C62.5523 48.6682 63 49.1159 63 49.6682V60.5202C63 61.8435 61.8929 63 60.5484 63H60.4516C59.1071 63 58 61.8435 58 60.5202V41.4798Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Audio"
 );

src/picto/Avatar.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             fillRule="evenodd"
             clipRule="evenodd"
@@ -53,6 +45,6 @@ export default createIcon(
             d="M55.9965 34.917C55.2867 26.3994 50.5208 22 42 22C33.4792 22 28.7133 26.3994 28.0035 34.917C27.9497 35.5615 28.5128 36.0867 29.1521 35.9884L31 35.7041V36.141C30.2842 36.2789 29.7566 36.4699 29.3867 36.7456C28.4488 37.4449 27.9999 38.5632 27.9999 40C27.9999 42.5523 29.4476 44 31.9999 44C32.1088 44 32.2136 43.9826 32.3117 43.9504C33.3755 46.0133 35.0247 47.6988 37.0285 48.7619C37.0099 48.8382 37 48.918 37 49C37 50.2987 36.3811 51.4528 35.4222 52.1835C35.4067 52.1945 35.3916 52.2058 35.3768 52.2176C34.7123 52.7093 33.8901 53 33 53H31L30.7751 53.0041C27.5656 53.1224 25 55.7616 25 59C25 59.5523 25.4477 60 26 60C26.5523 60 27 59.5523 27 59C27 56.7909 28.7909 55 31 55H33L33.2249 54.9959C34.0613 54.965 34.854 54.763 35.5689 54.4238C36.6411 56.1111 38.6184 56.6262 41.2425 55.9701C41.7783 55.8362 42.1041 55.2933 41.9701 54.7575C41.8362 54.2217 41.2933 53.8959 40.7575 54.0299C38.8877 54.4973 37.7957 54.2443 37.2131 53.272C38.1917 52.3068 38.8402 51.0079 38.9742 49.5599C39.9351 49.8465 40.9501 50 42 50C43.0499 50 44.0649 49.8465 45.0258 49.5599C45.3013 52.5375 47.7527 54.8845 50.7751 54.9959L51 55H53C55.2091 55 57 56.7909 57 59C57 59.5523 57.4477 60 58 60C58.5523 60 59 59.5523 59 59C59 55.7616 56.4344 53.1224 53.2249 53.0041L53 53H51C48.7909 53 47 51.2091 47 49C47 48.918 46.9901 48.8382 46.9715 48.7619C48.9753 47.6988 50.6245 46.0133 51.6883 43.9505C51.7864 43.9826 51.8912 44 52 44C54.5523 44 56 42.5523 56 40C56 38.5632 55.5511 37.4449 54.6132 36.7456C54.1076 36.3687 53.3072 36.1502 52.1344 36.009C52.0917 36.0032 52.048 36.0002 52.0037 36L52.0021 35.9999C51.9056 35.9996 51.8116 36.0132 51.7222 36.0391C51.5782 36.0807 51.4475 36.1537 51.3381 36.2504C51.1446 36.4214 51.0178 36.6661 51.0017 36.9405C51.0002 36.9656 50.9997 36.9906 51 37.0154V38.5L50.9963 38.7757C50.8579 43.9049 46.8723 48 42 48C37.0406 48 33 43.7573 33 38.5V35.3964L42.1521 33.9884L42.27 33.9629C42.5398 33.8872 42.7675 33.7011 42.8944 33.4472L43.8944 31.4472L43.9406 31.3399C44.1113 30.8692 43.9059 30.3349 43.4472 30.1056L43.3399 30.0594C42.8692 29.8887 42.3349 30.0941 42.1056 30.5528L41.336 32.09L30.14 33.812L30.1582 33.6832C31.1383 27.151 35.0033 24 42 24L42.3591 24.0028C49.0103 24.1078 52.7461 27.1539 53.7885 33.3484L53.84 33.679L47.2425 32.0299L47.1278 32.0081C46.6313 31.9435 46.1542 32.2599 46.0299 32.7575C45.8959 33.2933 46.2217 33.8362 46.7575 33.9701L54.7575 35.9701L54.8743 35.9923C55.4941 36.0727 56.0501 35.5597 55.9965 34.917ZM31 38.1901C30.7879 38.2458 30.6463 38.3012 30.5822 38.349C30.2074 38.6285 29.9999 39.1453 29.9999 40C29.9999 41.2718 30.4262 41.8526 31.5113 41.9749C31.2063 40.9679 31.0303 39.9012 31.0036 38.7963L31 38.5V38.1901ZM54 40C54 41.2718 53.5738 41.8526 52.4887 41.9749C52.8209 40.8781 53 39.7106 53 38.5V38.1901C53.2121 38.2458 53.3536 38.3012 53.4177 38.349C53.7925 38.6285 54 39.1453 54 40Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Avatar"
 );

src/picto/Backpack.tsx

@@ -2,15 +2,7 @@ import React from "react";
 import { createIcon } from "./utils/IconWrapper";
 
 export default createIcon(
-    <svg
-        width="80px"
-        height="80px"
-        fill="none"
-        viewBox="0 0 80 80"
-        xmlns="http://www.w3.org/2000/svg"
-        focusable="false"
-        aria-hidden="true"
-    >
+    <>
         <path
             d="M16 6C16.5523 6 17 5.55228 17 5C17 4.44772 16.5523 4 16 4C15.4477 4 15 4.44772 15 5C15 5.55228 15.4477 6 16 6Z"
             fill="#ECECFE"
@@ -43,6 +35,6 @@ export default createIcon(
             d="M27 33.8679C27 28.352 30.6185 24 35.8592 24H44.0423C49.2085 24 53 28.2787 53 33.8679V34.9748C53 35.5271 53.4477 35.9748 54 35.9748C54.5523 35.9748 55 35.5271 55 34.9748V33.8679C55 27.3817 50.5098 22 44.0423 22H35.8592C29.2688 22 25 27.5097 25 33.8679V39C25 39.5523 25.4477 40 26 40C26.5523 40 27 39.5523 27 39V33.8679Z"
             fill="#000091"
         />
-    </svg>,
+    </>,
     "Backpack"
 );