Also use it for sloth svg

components/AboutSection/AboutSection.tsx

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import styles from './AboutSection.module.css';
 import Tag from '../Tag/Tag';
-import Sloth from './sloth.svg';
 import Contacts from '../Contacts';
-import SvgNextjs from '@/iconComponents/Nextjs';
-import SvgReact from '@/iconComponents/React';
-import SvgTs from '@/iconComponents/Ts';
-import SvgGraphql from '@/iconComponents/Graphql';
+import SvgNextjs from '@/svgComponents/Nextjs';
+import SvgReact from '@/svgComponents/React';
+import SvgTs from '@/svgComponents/Ts';
+import SvgGraphql from '@/svgComponents/Graphql';
+import SvgSloth from '@/svgComponents/Sloth';
 
 const AboutSection = () => {
   return (
@@ -21,7 +21,7 @@ const AboutSection = () => {
         <Contacts className="mt-3" />
       </div>
       <div className={styles.blobs}>
-        <Sloth className={styles.sloth} />
+        <SvgSloth className={styles.sloth} />
         <div className={classNames(styles.blob, styles.yellow)}></div>
         <div className={classNames(styles.blob, styles.green)}></div>
         <div className={classNames(styles.blob, styles.red)}></div>

components/Contacts.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import SvgGithub from '@/iconComponents/Github';
-import SvgTelegram from '@/iconComponents/Telegram';
-import SvgEmail2 from '@/iconComponents/Email2';
+import SvgGithub from '@/svgComponents/Github';
+import SvgTelegram from '@/svgComponents/Telegram';
+import SvgEmail2 from '@/svgComponents/Email2';
 
 const Contacts: React.FC<{
   className?: string

components/MyExperience/MyExperience.tsx

@@ -4,17 +4,17 @@ import classNames from 'classnames';
 import styles from './styles.module.css';
 import Tag from '../Tag/Tag';
 import { capitalize } from '@/helpers/capitalize';
-import SvgHuman from '@/iconComponents/Human';
-import SvgSber from '@/iconComponents/Sber';
-import SvgFrogogo from '@/iconComponents/Frogogo';
-import SvgItcanfly from '@/iconComponents/Itcanfly';
-import SvgReact from '@/iconComponents/React';
-import SvgTs from '@/iconComponents/Ts';
-import SvgGraphql from '@/iconComponents/Graphql';
-import SvgApollo from '@/iconComponents/Apollo';
-import SvgEmotion from '@/iconComponents/Emotion';
-import SvgNodejs from '@/iconComponents/Nodejs';
-import SvgOther from '@/iconComponents/Other';
+import SvgHuman from '@/svgComponents/Human';
+import SvgSber from '@/svgComponents/Sber';
+import SvgFrogogo from '@/svgComponents/Frogogo';
+import SvgItcanfly from '@/svgComponents/Itcanfly';
+import SvgReact from '@/svgComponents/React';
+import SvgTs from '@/svgComponents/Ts';
+import SvgGraphql from '@/svgComponents/Graphql';
+import SvgApollo from '@/svgComponents/Apollo';
+import SvgEmotion from '@/svgComponents/Emotion';
+import SvgNodejs from '@/svgComponents/Nodejs';
+import SvgOther from '@/svgComponents/Other';
 
 
 const data = [

components/mdxComponents/CodeSnippet/CodeSnippet.tsx

@@ -6,12 +6,12 @@ import classNames from 'classnames';
 import styles from './CodeSnippet.module.css';
 import { useTheme } from '@/components/ThemeContext';
 import { copyToClipboard } from '@/helpers/copyToClipboard'
-import SvgTs from '@/iconComponents/Ts';
-import SvgReact from '@/iconComponents/React';
-import SvgJs from '@/iconComponents/Js';
-import SvgHtml from '@/iconComponents/Html';
-import SvgCss from '@/iconComponents/Css';
-import SvgCopy from '@/iconComponents/Copy';
+import SvgTs from '@/svgComponents/Ts';
+import SvgReact from '@/svgComponents/React';
+import SvgJs from '@/svgComponents/Js';
+import SvgHtml from '@/svgComponents/Html';
+import SvgCss from '@/svgComponents/Css';
+import SvgCopy from '@/svgComponents/Copy';
 
 export type CodeHighlightProps = {
   code: string;

package.json

@@ -8,7 +8,7 @@
     "start": "next start",
     "export": "next export",
     "lint": "next lint",
-    "svgr": "npx @svgr/cli --out-dir iconComponents --icon 20px --typescript -- icons"
+    "svgr": "npx @svgr/cli --out-dir svgComponents --icon 20px --typescript -- svgs"
   },
   "dependencies": {
     "@mdx-js/loader": "^3.0.0",

svgComponents/Apollo.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgApollo = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M12 0C5.372 0 0 5.373 0 12c0 6.628 5.372 12 12 12 6.627 0 12-5.372 12-12a12 12 0 0 0-.473-3.343.6.6 0 0 0-1.127.409h-.002c.265.943.402 1.928.402 2.934a10.73 10.73 0 0 1-3.163 7.637A10.73 10.73 0 0 1 12 22.8a10.73 10.73 0 0 1-7.637-3.163A10.73 10.73 0 0 1 1.2 12a10.73 10.73 0 0 1 3.163-7.637A10.73 10.73 0 0 1 12 1.2c2.576 0 5.013.896 6.958 2.54a1.466 1.466 0 1 0 .862-.84A11.95 11.95 0 0 0 12 0m-1.44 5.88-4.2 10.902h2.63l.687-1.848h3.969l-.719-2.042h-2.613l1.7-4.691 3.024 8.58h2.631L13.47 5.88Z" />
+  </svg>
+);
+export default SvgApollo;

svgComponents/Arrowdown.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgArrowdown = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    fill="none"
+    viewBox="0 0 12 12"
+    {...props}
+  >
+    <path
+      fill="#FFBD98"
+      d="M1.227 3.97a.75.75 0 0 1 1.06 0L6 7.682 9.712 3.97a.75.75 0 0 1 1.06 1.06L6.53 9.273a.75.75 0 0 1-1.06 0L1.227 5.03a.75.75 0 0 1 0-1.06"
+    />
+  </svg>
+);
+export default SvgArrowdown;

svgComponents/Copy.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgCopy = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20px"
+    height="20px"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={1.5}
+    aria-hidden="true"
+    className="copy_svg__with-icon_icon__MHUeb"
+    data-testid="geist-icon"
+    shapeRendering="geometricPrecision"
+    style={{
+      color: "currentcolor",
+      width: 20,
+      height: 20,
+    }}
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M6 17a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 1.732 1M11 21h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2" />
+  </svg>
+);
+export default SvgCopy;

svgComponents/Css.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgCss = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    className="css_svg__FileName-icon-i4M61"
+    viewBox="0 -1 16 16"
+    {...props}
+  >
+    <path
+      fill="#1E9CEF"
+      d="M3.785 2H14l-1.805 9.164L6.738 13 2 11.164l.482-2.447H4.5l-.2 1.011 2.864 1.107 3.3-1.107.461-2.328h-8.2l.395-2.045h8.206l.258-1.313h-8.2Z"
+      className="css_svg__i-color"
+    />
+  </svg>
+);
+export default SvgCss;

svgComponents/Dynamodb.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgDynamodb = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    preserveAspectRatio="xMidYMid"
+    viewBox="-16.5 0 289 289"
+    {...props}
+  >
+    <path
+      fill="#5294CF"
+      d="M165.258 288.501h3.508l57.261-28.634.953-1.347V29.964l-.953-1.354L168.766 0h-3.551z"
+    />
+    <path
+      fill="#1F5B98"
+      d="M90.741 288.501h-3.557l-57.212-28.634-1.161-1.997-.589-226.742 1.75-2.518L87.184 0h3.601z"
+    />
+    <path fill="#2D72B8" d="M87.285 0h81.426v288.501H87.285z" />
+    <path
+      fill="#1A476F"
+      d="m256 137.769-1.935-.429-27.628-2.576-.41.204-57.312-2.292h-81.43l-57.313 2.292V91.264l-.06.032.06-.128 57.313-13.28h81.43l57.312 13.28 21.069 11.199v-7.2l8.904-.974-.922-1.798-28.192-20.159-.859.279-57.312-17.759h-81.43L29.972 72.515V28.61L0 63.723v30.666l.232-.168 8.672.946v7.348L0 107.28v30.513l.232-.024 8.672.128v12.807l-7.482.112L0 150.68v30.525l8.904 4.788v7.433l-8.531.942-.373-.28v30.661l29.972 35.118v-43.901l57.313 17.759h81.43l57.481-17.811.764.335 27.821-19.862 1.219-1.979-8.904-.982v-7.284l-1.167-.466-19.043 10.265-.69 1.44-57.481 13.203v.016h-81.43v-.016l-57.313-13.259v-43.864l57.313 2.284v.056h81.43l57.312-2.34 1.305.6 26.779-2.306 1.889-.923-8.904-.128v-12.807z"
+    />
+    <path
+      fill="#2D72B8"
+      d="M226.027 215.966v43.901L256 224.749v-30.461l-29.8 21.626zM226.027 197.421l.173-.04 29.8-16.028v-30.649l-29.973 2.757zM226.2 91.208l-.173-.04v43.8L256 137.769v-30.634zM226.2 72.687 256 94.193V63.731L226.027 28.61v43.905l.173.06z"
+    />
+  </svg>
+);
+export default SvgDynamodb;

svgComponents/Elementui.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgElementui = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 0 205.035 236.177"
+    {...props}
+  >
+    <path
+      fill="#409eff"
+      d="m181.518 103.129-79 45.463v28.844l79-45.463zm-7-55.514-72 41.434v28.844l93.498-53.805h-21.498zM103.018 0 .5 58.611 0 176.7l102.018 59.477 102.517-58.61.5-118.087zm.707 28 76.968 44.875-.377 89.096-77.347 44.218L26 161.316l.377-89.095z"
+    />
+  </svg>
+);
+export default SvgElementui;

svgComponents/Email.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgEmail = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    fill="currentColor"
+    viewBox="2 2 20 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10M7.005 9c0-.55.445-1 .995-1h8c.55 0 1 .45 1 1v6c0 .55-.45 1-1 1H8c-.55 0-1-.45-1-1zM12 12.5 8 10v5h8v-5zm0-1L8 9h8z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgEmail;

svgComponents/Email2.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgEmail2 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M7 2.75c-1.615 0-3.075.404-4.135 1.388C1.795 5.132 1.25 6.607 1.25 8.5v7c0 1.893.545 3.369 1.615 4.362 1.06.984 2.52 1.388 4.135 1.388h10c1.615 0 3.075-.404 4.135-1.388 1.07-.993 1.615-2.469 1.615-4.362v-7c0-1.893-.545-3.368-1.615-4.362-1.06-.984-2.52-1.388-4.135-1.388zm12.229 5.612a.75.75 0 0 0-.918-1.187l-5.547 4.287a1.25 1.25 0 0 1-1.528 0L5.689 7.175a.75.75 0 1 0-.918 1.187l5.548 4.287a2.75 2.75 0 0 0 3.362 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgEmail2;