Try to use svgr cli to generate icon components

deadrime · Feb 19, 2024 · 2d4cc02 · 2d4cc02
1 parent 1cf6893
commit 2d4cc02
Show file tree

Hide file tree

Showing 46 changed files with 1,505 additions and 82 deletions.
diff --git a/components/AboutSection/AboutSection.tsx b/components/AboutSection/AboutSection.tsx
@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import styles from './AboutSection.module.css';
 import Tag from '../Tag/Tag';
-import IconNext from "@/icons/nextjs.svg";
-import IconReact from '@/icons/react.svg';
-import IconTs from '@/icons/ts.svg';
-import IconGraphQL from '@/icons/graphql.svg';
 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';
 
 const AboutSection = () => {
   return (
@@ -40,10 +40,10 @@ const AboutSection = () => {
           <h3 className="pt-8 font-normal text-text/80 text-body1">Любимый стек <span>❤️‍🔥</span></h3>
 
           <div className="flex gap-2 pt-3 flex-wrap">
-            <Tag borderless size="small" icon={<IconNext height={20} className="fill-current text-text/90" />}>Next.js</Tag>
-            <Tag borderless size="small" icon={<IconReact height={20} />}>React</Tag>
-            <Tag borderless size="small" icon={<IconTs height={20} />}>Typescript</Tag>
-            <Tag borderless size="small" icon={<IconGraphQL height={20} />}>GraphQL</Tag>
+            <Tag borderless size="small" icon={<SvgNextjs height={20} className="fill-current text-text/90" />}>Next.js</Tag>
+            <Tag borderless size="small" icon={<SvgReact height={20} />}>React</Tag>
+            <Tag borderless size="small" icon={<SvgTs height={20} />}>Typescript</Tag>
+            <Tag borderless size="small" icon={<SvgGraphql height={20} />}>GraphQL</Tag>
           </div>
 
         </div>

diff --git a/components/Contacts.tsx b/components/Contacts.tsx
@@ -1,22 +1,21 @@
-import IconGithub from '@/icons/github.svg';
-// import IconHabr from '@/icons/habr.svg';
-import IconTelegram from '@/icons/telegram.svg';
-import IconEmail from '@/icons/email2.svg';
 import classNames from 'classnames';
+import SvgGithub from '@/iconComponents/Github';
+import SvgTelegram from '@/iconComponents/Telegram';
+import SvgEmail2 from '@/iconComponents/Email2';
 
 const Contacts: React.FC<{
   className?: string
 }> = ({ className }) => {
   return (
     <div className={classNames('flex gap-3 items-center', className)}>
       <a href="https://github.com/deadrime" target="_blank">
-        <IconGithub className="w-6" />
+        <SvgGithub className="w-6" />
       </a>
       <a href="https://t.me/deadrime" target="_blank">
-        <IconTelegram className="w-6" />
+        <SvgTelegram className="w-6" />
       </a>
       <a href="mailto:deadrime@yandex.ru" target="_blank">
-        <IconEmail className="w-6" />
+        <SvgEmail2 className="w-6" />
       </a>
       <a href="https://career.habr.com/deadrime" target="_blank">
         <span className="text-body1"><b>Хабр</b> Карьера</span>

diff --git a/components/MyExperience/MyExperience.tsx b/components/MyExperience/MyExperience.tsx
@@ -1,28 +1,26 @@
 import React from 'react';
 
-import IconHuman from '@/icons/human.svg';
-import IconFrogogo from '@/icons/frogogo.svg';
-import IconSber from '@/icons/sber.svg';
-import IconItCanFly from '@/icons/itcanfly.svg';
-import IconOther from '@/icons/other.svg';
-
-import IconReact from '@/icons/react.svg';
-import IconNode from '@/icons/nodejs.svg';
-import IconTs from '@/icons/ts.svg';
-import IconGraphQL from '@/icons/graphql.svg';
-import IconApollo from '@/icons/apollo.svg';
-import IconEmotion from '@/icons/emotion.svg';
-
 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';
 
 
 const data = [
   {
     companyName: 'Human',
-    companyLogo: IconHuman,
+    companyLogo: SvgHuman,
     startYear: 2022,
     endYear: undefined,
     shortDescription: <>
@@ -82,7 +80,7 @@ const data = [
   },
   {
     companyName: 'Sber',
-    companyLogo: IconSber,
+    companyLogo: SvgSber,
     startYear: 2020,
     endYear: 2021,
     shortDescription: <>
@@ -120,7 +118,7 @@ const data = [
   },
   {
     companyName: 'Frogogo',
-    companyLogo: IconFrogogo,
+    companyLogo: SvgFrogogo,
     startYear: 2019,
     endYear: 2021,
     shortDescription: <>
@@ -155,7 +153,7 @@ const data = [
   },
   {
     companyName: 'ItCanFly',
-    companyLogo: IconItCanFly,
+    companyLogo: SvgItcanfly,
     startYear: 2019,
     endYear: 2019,
     shortDescription: <>
@@ -173,29 +171,29 @@ const data = [
           Создавал графики на <strong>chart.js</strong>. Различная статистика, курс валют и т.п.
 
           <div className="flex gap-2">
-            <IconReact height={20} />
-            <IconTs height={20} />
+            <SvgReact height={20} />
+            <SvgTs height={20} />
           </div>
         </li>
         <li>
           Участвовал в разработке сайта для антикафе https://ziferblat.net/
 
           <div className="flex gap-2">
-            <IconReact height={20} />
-            <IconTs height={20} />
-            <IconGraphQL height={20} />
-            <IconApollo className="fill-current" height={20} />
-            <IconEmotion height={20} />
+            <SvgReact height={20} />
+            <SvgTs height={20} />
+            <SvgGraphql height={20} />
+            <SvgApollo className="fill-current" height={20} />
+            <SvgEmotion height={20} />
           </div>
 
         </li>
         <li>
           Написал телеграмм бота для персонала. В боте можно выбрать рабочие смены, провести инвентаризацию.
 
           <div className="flex gap-2">
-            <IconTs height={20} />
-            <IconGraphQL height={20} />
-            <IconNode height={20} />
+            <SvgTs height={20} />
+            <SvgGraphql height={20} />
+            <SvgNodejs height={20} />
           </div>
         </li>
       </ul>
@@ -204,7 +202,7 @@ const data = [
   },
   {
     companyName: 'Прочее',
-    companyLogo: IconOther,
+    companyLogo: SvgOther,
     startYear: 2018,
     endYear: 2019,
     shortDescription: <>

diff --git a/components/mdxComponents/CodeSnippet/CodeSnippet.tsx b/components/mdxComponents/CodeSnippet/CodeSnippet.tsx
@@ -4,14 +4,14 @@ import React, { HTMLProps } from 'react';
 import { Highlight, HighlightProps, PrismTheme, themes } from "prism-react-renderer";
 import classNames from 'classnames';
 import styles from './CodeSnippet.module.css';
-import IconTs from "@/icons/ts.svg";
-import IconJs from "@/icons/js.svg";
-import IconReact from '@/icons/react.svg';
-import IconCss from '@/icons/css.svg';
-import IconHtml from '@/icons/html.svg';
-import IconCopy from '@/icons/copy.svg';
 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';
 
 export type CodeHighlightProps = {
   code: string;
@@ -69,12 +69,12 @@ type CodeSnippetProps = CodeHighlightProps & HTMLProps<HTMLDivElement> & {
 }
 
 const iconByLanguage: Record<string, React.FC<React.SVGProps<SVGSVGElement>>> = {
-  ts: IconTs,
-  tsx: IconReact,
-  jsx: IconReact,
-  js: IconJs,
-  html: IconHtml,
-  css: IconCss,
+  ts: SvgTs,
+  tsx: SvgReact,
+  jsx: SvgReact,
+  js: SvgJs,
+  html: SvgHtml,
+  css: SvgCss,
 }
 
 export const CodeSnippet: React.FC<CodeSnippetProps> = ({ code, language, className, caption, highlightedLines, ...props }) => (
@@ -92,7 +92,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = ({ code, language, classN
       {iconByLanguage[language] ? React.createElement(iconByLanguage[language], { className: "w-5" }) : null}
       {caption}
       <button className='ml-auto'>
-        <IconCopy onClick={() => copyToClipboard(code)} />
+        <SvgCopy onClick={() => copyToClipboard(code)} />
       </button>
     </div>
     <CodeHighlight

diff --git a/iconComponents/Apollo.tsx b/iconComponents/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;
diff --git a/iconComponents/Arrowdown.tsx b/iconComponents/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;
diff --git a/iconComponents/Copy.tsx b/iconComponents/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;
diff --git a/iconComponents/Css.tsx b/iconComponents/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;
diff --git a/iconComponents/Dynamodb.tsx b/iconComponents/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;
diff --git a/iconComponents/Elementui.tsx b/iconComponents/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;
diff --git a/iconComponents/Email.tsx b/iconComponents/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;
diff --git a/iconComponents/Email2.tsx b/iconComponents/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;