diff --git a/components/AboutSection/AboutSection.tsx b/components/AboutSection/AboutSection.tsx index a0d5454..4577314 100644 --- 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 = () => {

Любимый стек ❤️‍🔥

- }>Next.js - }>React - }>Typescript - }>GraphQL + }>Next.js + }>React + }>Typescript + }>GraphQL
diff --git a/components/Contacts.tsx b/components/Contacts.tsx index eda0925..a97dae3 100644 --- a/components/Contacts.tsx +++ b/components/Contacts.tsx @@ -1,8 +1,7 @@ -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 @@ -10,13 +9,13 @@ const Contacts: React.FC<{ return (
- + - + - + Хабр Карьера diff --git a/components/MyExperience/MyExperience.tsx b/components/MyExperience/MyExperience.tsx index cca1f97..3ce5115 100644 --- 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,19 +171,19 @@ const data = [ Создавал графики на chart.js. Различная статистика, курс валют и т.п.
- - + +
  • Участвовал в разработке сайта для антикафе https://ziferblat.net/
    - - - - - + + + + +
    • @@ -193,9 +191,9 @@ const data = [ Написал телеграмм бота для персонала. В боте можно выбрать рабочие смены, провести инвентаризацию.
    - - - + + +
    @@ -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 index 20c57c7..6b8afe3 100644 --- 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 & { } const iconByLanguage: Record>> = { - 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 = ({ code, language, className, caption, highlightedLines, ...props }) => ( @@ -92,7 +92,7 @@ export const CodeSnippet: React.FC = ({ code, language, classN {iconByLanguage[language] ? React.createElement(iconByLanguage[language], { className: "w-5" }) : null} {caption}
    ) => ( + + + +); +export default SvgApollo; diff --git a/iconComponents/Arrowdown.tsx b/iconComponents/Arrowdown.tsx new file mode 100644 index 0000000..b4cb391 --- /dev/null +++ b/iconComponents/Arrowdown.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgArrowdown = (props: SVGProps) => ( + + + +); +export default SvgArrowdown; diff --git a/iconComponents/Copy.tsx b/iconComponents/Copy.tsx new file mode 100644 index 0000000..b0d5f85 --- /dev/null +++ b/iconComponents/Copy.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgCopy = (props: SVGProps) => ( + +); +export default SvgCopy; diff --git a/iconComponents/Css.tsx b/iconComponents/Css.tsx new file mode 100644 index 0000000..c6e8486 --- /dev/null +++ b/iconComponents/Css.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgCss = (props: SVGProps) => ( + + + +); +export default SvgCss; diff --git a/iconComponents/Dynamodb.tsx b/iconComponents/Dynamodb.tsx new file mode 100644 index 0000000..1d67078 --- /dev/null +++ b/iconComponents/Dynamodb.tsx @@ -0,0 +1,31 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgDynamodb = (props: SVGProps) => ( + + + + + + + +); +export default SvgDynamodb; diff --git a/iconComponents/Elementui.tsx b/iconComponents/Elementui.tsx new file mode 100644 index 0000000..068917b --- /dev/null +++ b/iconComponents/Elementui.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgElementui = (props: SVGProps) => ( + + + +); +export default SvgElementui; diff --git a/iconComponents/Email.tsx b/iconComponents/Email.tsx new file mode 100644 index 0000000..5b166c4 --- /dev/null +++ b/iconComponents/Email.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgEmail = (props: SVGProps) => ( + + + +); +export default SvgEmail; diff --git a/iconComponents/Email2.tsx b/iconComponents/Email2.tsx new file mode 100644 index 0000000..6776dbb --- /dev/null +++ b/iconComponents/Email2.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgEmail2 = (props: SVGProps) => ( + + + +); +export default SvgEmail2; diff --git a/iconComponents/Emotion.tsx b/iconComponents/Emotion.tsx new file mode 100644 index 0000000..6d26446 --- /dev/null +++ b/iconComponents/Emotion.tsx @@ -0,0 +1,505 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgEmotion = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default SvgEmotion; diff --git a/iconComponents/Esbuild.tsx b/iconComponents/Esbuild.tsx new file mode 100644 index 0000000..63e3f7b --- /dev/null +++ b/iconComponents/Esbuild.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgEsbuild = (props: SVGProps) => ( + + + + +); +export default SvgEsbuild; diff --git a/iconComponents/Frogogo.tsx b/iconComponents/Frogogo.tsx new file mode 100644 index 0000000..705a390 --- /dev/null +++ b/iconComponents/Frogogo.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgFrogogo = (props: SVGProps) => ( + + + + +); +export default SvgFrogogo; diff --git a/iconComponents/Github.tsx b/iconComponents/Github.tsx new file mode 100644 index 0000000..6667c90 --- /dev/null +++ b/iconComponents/Github.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgGithub = (props: SVGProps) => ( + + + +); +export default SvgGithub; diff --git a/iconComponents/Graphql.tsx b/iconComponents/Graphql.tsx new file mode 100644 index 0000000..1b98563 --- /dev/null +++ b/iconComponents/Graphql.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgGraphql = (props: SVGProps) => ( + + + +); +export default SvgGraphql; diff --git a/iconComponents/Habr.tsx b/iconComponents/Habr.tsx new file mode 100644 index 0000000..cdb41fd --- /dev/null +++ b/iconComponents/Habr.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgHabr = (props: SVGProps) => ( + + + +); +export default SvgHabr; diff --git a/iconComponents/Html.tsx b/iconComponents/Html.tsx new file mode 100644 index 0000000..895a793 --- /dev/null +++ b/iconComponents/Html.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgHtml = (props: SVGProps) => ( + + + +); +export default SvgHtml; diff --git a/iconComponents/Human.tsx b/iconComponents/Human.tsx new file mode 100644 index 0000000..5f9dd7d --- /dev/null +++ b/iconComponents/Human.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgHuman = (props: SVGProps) => ( + + + + + + + + + + + + +); +export default SvgHuman; diff --git a/iconComponents/Itcanfly.tsx b/iconComponents/Itcanfly.tsx new file mode 100644 index 0000000..4cb951b --- /dev/null +++ b/iconComponents/Itcanfly.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgItcanfly = (props: SVGProps) => ( + + + + + +); +export default SvgItcanfly; diff --git a/iconComponents/Js.tsx b/iconComponents/Js.tsx new file mode 100644 index 0000000..e5c80ad --- /dev/null +++ b/iconComponents/Js.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgJs = (props: SVGProps) => ( + + + +); +export default SvgJs; diff --git a/iconComponents/Json.tsx b/iconComponents/Json.tsx new file mode 100644 index 0000000..f1cb1f1 --- /dev/null +++ b/iconComponents/Json.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgJson = (props: SVGProps) => ( + + + +); +export default SvgJson; diff --git a/iconComponents/Light.tsx b/iconComponents/Light.tsx new file mode 100644 index 0000000..fc85b66 --- /dev/null +++ b/iconComponents/Light.tsx @@ -0,0 +1,83 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgLight = (props: SVGProps) => ( + + + + + + + + + + + + + + + +); +export default SvgLight; diff --git a/iconComponents/Nextjs.tsx b/iconComponents/Nextjs.tsx new file mode 100644 index 0000000..1452781 --- /dev/null +++ b/iconComponents/Nextjs.tsx @@ -0,0 +1,25 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgNextjs = (props: SVGProps) => ( + + + + + + + + + + +); +export default SvgNextjs; diff --git a/iconComponents/Nodejs.tsx b/iconComponents/Nodejs.tsx new file mode 100644 index 0000000..b16103a --- /dev/null +++ b/iconComponents/Nodejs.tsx @@ -0,0 +1,81 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgNodejs = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default SvgNodejs; diff --git a/iconComponents/Other.tsx b/iconComponents/Other.tsx new file mode 100644 index 0000000..bd07867 --- /dev/null +++ b/iconComponents/Other.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgOther = (props: SVGProps) => ( + + + + + + +); +export default SvgOther; diff --git a/iconComponents/Postgresql.tsx b/iconComponents/Postgresql.tsx new file mode 100644 index 0000000..3fe24e7 --- /dev/null +++ b/iconComponents/Postgresql.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgPostgresql = (props: SVGProps) => ( + + + + + + +); +export default SvgPostgresql; diff --git a/iconComponents/Rails.tsx b/iconComponents/Rails.tsx new file mode 100644 index 0000000..9bda0ee --- /dev/null +++ b/iconComponents/Rails.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgRails = (props: SVGProps) => ( + + + + + + +); +export default SvgRails; diff --git a/iconComponents/React.tsx b/iconComponents/React.tsx new file mode 100644 index 0000000..7682c9a --- /dev/null +++ b/iconComponents/React.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgReact = (props: SVGProps) => ( + + + +); +export default SvgReact; diff --git a/iconComponents/RusHabrahbr.tsx b/iconComponents/RusHabrahbr.tsx new file mode 100644 index 0000000..1080608 --- /dev/null +++ b/iconComponents/RusHabrahbr.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgRusHabrahbr = (props: SVGProps) => ( + + + +); +export default SvgRusHabrahbr; diff --git a/iconComponents/Sber.tsx b/iconComponents/Sber.tsx new file mode 100644 index 0000000..1a35754 --- /dev/null +++ b/iconComponents/Sber.tsx @@ -0,0 +1,128 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgSber = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); +export default SvgSber; diff --git a/iconComponents/Storybook.tsx b/iconComponents/Storybook.tsx new file mode 100644 index 0000000..a269235 --- /dev/null +++ b/iconComponents/Storybook.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgStorybook = (props: SVGProps) => ( + + + + + + + + + + +); +export default SvgStorybook; diff --git a/iconComponents/Telegram.tsx b/iconComponents/Telegram.tsx new file mode 100644 index 0000000..100edd3 --- /dev/null +++ b/iconComponents/Telegram.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgTelegram = (props: SVGProps) => ( + + + +); +export default SvgTelegram; diff --git a/iconComponents/Ts.tsx b/iconComponents/Ts.tsx new file mode 100644 index 0000000..15fe454 --- /dev/null +++ b/iconComponents/Ts.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgTs = (props: SVGProps) => ( + +); +export default SvgTs; diff --git a/iconComponents/Vue.tsx b/iconComponents/Vue.tsx new file mode 100644 index 0000000..415d679 --- /dev/null +++ b/iconComponents/Vue.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgVue = (props: SVGProps) => ( + + + + +); +export default SvgVue; diff --git a/iconComponents/Webpack.tsx b/iconComponents/Webpack.tsx new file mode 100644 index 0000000..a2eb81b --- /dev/null +++ b/iconComponents/Webpack.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgWebpack = (props: SVGProps) => ( + + + + + +); +export default SvgWebpack; diff --git a/iconComponents/index.ts b/iconComponents/index.ts new file mode 100644 index 0000000..79fa0ce --- /dev/null +++ b/iconComponents/index.ts @@ -0,0 +1,33 @@ +export { default as Apollo } from "./Apollo"; +export { default as Arrowdown } from "./Arrowdown"; +export { default as Copy } from "./Copy"; +export { default as Css } from "./Css"; +export { default as Dynamodb } from "./Dynamodb"; +export { default as Elementui } from "./Elementui"; +export { default as Email } from "./Email"; +export { default as Email2 } from "./Email2"; +export { default as Emotion } from "./Emotion"; +export { default as Esbuild } from "./Esbuild"; +export { default as Frogogo } from "./Frogogo"; +export { default as Github } from "./Github"; +export { default as Graphql } from "./Graphql"; +export { default as Habr } from "./Habr"; +export { default as Html } from "./Html"; +export { default as Human } from "./Human"; +export { default as Itcanfly } from "./Itcanfly"; +export { default as Js } from "./Js"; +export { default as Json } from "./Json"; +export { default as Light } from "./Light"; +export { default as Nextjs } from "./Nextjs"; +export { default as Nodejs } from "./Nodejs"; +export { default as Other } from "./Other"; +export { default as Postgresql } from "./Postgresql"; +export { default as Rails } from "./Rails"; +export { default as React } from "./React"; +export { default as RusHabrahbr } from "./RusHabrahbr"; +export { default as Sber } from "./Sber"; +export { default as Storybook } from "./Storybook"; +export { default as Telegram } from "./Telegram"; +export { default as Ts } from "./Ts"; +export { default as Vue } from "./Vue"; +export { default as Webpack } from "./Webpack"; diff --git a/icons/apollo.svg b/icons/apollo.svg index c2e4c8e..1453acc 100644 --- a/icons/apollo.svg +++ b/icons/apollo.svg @@ -1,5 +1,4 @@ - diff --git a/icons/dynamodb.svg b/icons/dynamodb.svg index 72ae79a..4a705aa 100644 --- a/icons/dynamodb.svg +++ b/icons/dynamodb.svg @@ -1,5 +1,4 @@ - diff --git a/icons/graphql.svg b/icons/graphql.svg index 779374f..fb0ff08 100644 --- a/icons/graphql.svg +++ b/icons/graphql.svg @@ -1,8 +1,8 @@ - - + + - \ No newline at end of file + diff --git a/icons/habr.svg b/icons/habr.svg index eb36b06..e68e93e 100644 --- a/icons/habr.svg +++ b/icons/habr.svg @@ -1,2 +1,4 @@ - - \ No newline at end of file + + + + diff --git a/icons/postgresql.svg b/icons/postgresql.svg index 81654c4..2214b8a 100644 --- a/icons/postgresql.svg +++ b/icons/postgresql.svg @@ -1,21 +1,20 @@ - - - + + - + - + - + - + - + diff --git a/icons/vue.svg b/icons/vue.svg index 9e29454..aec204d 100644 --- a/icons/vue.svg +++ b/icons/vue.svg @@ -1,5 +1,5 @@ - + - - - \ No newline at end of file + + + diff --git a/next.config.mjs b/next.config.mjs index 629c728..b5bdda4 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -11,15 +11,16 @@ const nextConfig = { images: { unoptimized: true }, - webpack: (config) => { + webpack: (config, options) => { config.module.rules.push({ test: /\.svg$/i, - use: [{ - loader: '@svgr/webpack', - options: { - dimensions: false, + use: [ + options.defaultLoaders.babel, + { + loader: '@svgr/webpack', + options: { babel: false, dimensions: false, }, }, - }], + ], }); return config; }, diff --git a/package.json b/package.json index 6db8a5a..3054b55 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "build": "next build", "start": "next start", "export": "next export", - "lint": "next lint" + "lint": "next lint", + "svgr": "npx @svgr/cli --out-dir iconComponents --icon 20px --typescript -- icons" }, "dependencies": { "@mdx-js/loader": "^3.0.0",