⌘ icons (#352)

Co-authored-by: Brad Garropy <[email protected]>
bradgarropy · Mar 2, 2023 · 419902f · 419902f · vercel · Mar 2, 2023
1 parent bc6ca3c
commit 419902f
Show file tree

Hide file tree

Showing 47 changed files with 11,250 additions and 14,086 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -7,7 +7,6 @@ const config = {
         "\\.module.css$": "identity-obj-proxy",
         "\\.css$": "<rootDir>/src/test-utils/css.ts",
         "\\.jpg$": "<rootDir>/src/test-utils/image.ts",
-        "\\.svg$": "<rootDir>/src/test-utils/svg.tsx",
     },
     testEnvironment: "jsdom",
     transform: {

diff --git a/next.config.js b/next.config.js
@@ -79,21 +79,6 @@ const config = {
 
         return redirects
     },
-    webpack: config => {
-        config.module.rules.push({
-            test: /\.svg$/,
-            use: [
-                {
-                    loader: "@svgr/webpack",
-                    options: {
-                        svgo: false,
-                    },
-                },
-            ],
-        })
-
-        return config
-    },
 }
 
 module.exports = config
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "6.1.0",
+    "version": "6.2.0",
     "description": "🏠 my home on the web",
     "keywords": [
         "javascript",
@@ -86,7 +86,6 @@
         "@bradgarropy/plop-generator-react-component": "^1.1.1",
         "@bradgarropy/plop-generator-react-context": "^1.1.0",
         "@bradgarropy/plop-generator-react-hook": "^1.1.0",
-        "@svgr/webpack": "^6.1.2",
         "@tailwindcss/typography": "^0.5.9",
         "@testing-library/jest-dom": "^5.15.0",
         "@testing-library/react": "^13.4.0",

diff --git a/src/components/ColorTheme/ColorTheme.tsx b/src/components/ColorTheme/ColorTheme.tsx
@@ -1,7 +1,6 @@
+import {MoonIcon, SunIcon} from "components/Icons"
 import {useTheme} from "hooks"
 import {FC} from "react"
-import Moon from "svg/moon.svg"
-import Sun from "svg/sun.svg"
 
 const ColorTheme: FC = () => {
     const {theme, setTheme} = useTheme()
@@ -21,8 +20,8 @@ const ColorTheme: FC = () => {
             onClick={onClick}
             aria-label={label}
         >
-            {theme === "light" ? <Moon /> : null}
-            {theme === "dark" ? <Sun /> : null}
+            {theme === "light" ? <MoonIcon /> : null}
+            {theme === "dark" ? <SunIcon /> : null}
         </button>
     )
 }

diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx
@@ -2,10 +2,19 @@ import {render, screen} from "@testing-library/react"
 import Icon from "components/Icon"
 import {technologies} from "utils"
 
+const icons = [...technologies, "sun", "moon"]
+
 test("shows icons", () => {
-    technologies.forEach(technology => {
-        render(<Icon name={technology} />)
-        expect(screen.getByLabelText(technology))
+    icons.forEach(icon => {
+        render(<Icon name={icon} />)
+        expect(screen.getByLabelText(icon))
+    })
+})
+
+test("shows icons with props", () => {
+    icons.forEach(icon => {
+        render(<Icon name={icon} className="test" />)
+        expect(screen.getByLabelText(icon)).toHaveClass("test")
     })
 })
 

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,21 +1,25 @@
+import {
+    CloseIcon,
+    DiscordIcon,
+    GatsbyIcon,
+    GithubIcon,
+    InstagramIcon,
+    JavascriptIcon,
+    LinkIcon,
+    MenuIcon,
+    MoonIcon,
+    NextIcon,
+    NodeIcon,
+    ReactIcon,
+    SunIcon,
+    SvelteIcon,
+    TailwindIcon,
+    TwitchIcon,
+    TwitterIcon,
+    TypescriptIcon,
+    YoutubeIcon,
+} from "components/Icons"
 import {FC, HTMLAttributes} from "react"
-import CloseIcon from "svg/close.svg"
-import DiscordIcon from "svg/discord.svg"
-import GatsbyIcon from "svg/gatsby.svg"
-import GithubIcon from "svg/github.svg"
-import InstagramIcon from "svg/instagram.svg"
-import JavascriptIcon from "svg/javascript.svg"
-import LinkIcon from "svg/link.svg"
-import MenuIcon from "svg/menu.svg"
-import NextIcon from "svg/next.svg"
-import NodeIcon from "svg/node.svg"
-import ReactIcon from "svg/reacticon.svg"
-import SvelteIcon from "svg/svelte.svg"
-import TailwindIcon from "svg/tailwind.svg"
-import TwitchIcon from "svg/twitch.svg"
-import TwitterIcon from "svg/twitter.svg"
-import TypescriptIcon from "svg/typescript.svg"
-import YouTubeIcon from "svg/youtube.svg"
 
 type IconProps = {
     name: string
@@ -24,39 +28,43 @@ type IconProps = {
 const Icon: FC<IconProps> = ({name, ...props}) => {
     switch (name) {
         case "close":
-            return <CloseIcon aria-label={name} {...props} />
+            return <CloseIcon {...props} />
         case "discord":
-            return <DiscordIcon aria-label={name} {...props} />
+            return <DiscordIcon {...props} />
         case "gatsby":
-            return <GatsbyIcon aria-label={name} {...props} />
+            return <GatsbyIcon {...props} />
         case "github":
-            return <GithubIcon aria-label={name} {...props} />
+            return <GithubIcon {...props} />
         case "instagram":
-            return <InstagramIcon aria-label={name} {...props} />
+            return <InstagramIcon {...props} />
         case "javascript":
-            return <JavascriptIcon aria-label={name} {...props} />
+            return <JavascriptIcon {...props} />
         case "link":
-            return <LinkIcon aria-label={name} {...props} />
+            return <LinkIcon {...props} />
         case "menu":
-            return <MenuIcon aria-label={name} {...props} />
+            return <MenuIcon {...props} />
+        case "moon":
+            return <MoonIcon {...props} />
         case "next":
-            return <NextIcon aria-label={name} {...props} />
+            return <NextIcon {...props} />
         case "node":
-            return <NodeIcon aria-label={name} {...props} />
+            return <NodeIcon {...props} />
         case "react":
-            return <ReactIcon aria-label={name} {...props} />
+            return <ReactIcon {...props} />
+        case "sun":
+            return <SunIcon {...props} />
         case "svelte":
-            return <SvelteIcon aria-label={name} {...props} />
+            return <SvelteIcon {...props} />
         case "twitch":
-            return <TwitchIcon aria-label={name} {...props} />
+            return <TwitchIcon {...props} />
         case "twitter":
-            return <TwitterIcon aria-label={name} {...props} />
+            return <TwitterIcon {...props} />
         case "typescript":
-            return <TypescriptIcon aria-label={name} {...props} />
+            return <TypescriptIcon {...props} />
         case "tailwind":
-            return <TailwindIcon aria-label={name} {...props} />
+            return <TailwindIcon {...props} />
         case "youtube":
-            return <YouTubeIcon aria-label={name} {...props} />
+            return <YoutubeIcon {...props} />
         default:
             return null
     }

diff --git a/src/components/Icons/CloseIcon.tsx b/src/components/Icons/CloseIcon.tsx
@@ -0,0 +1,24 @@
+import {FC} from "react"
+
+const CloseIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="close"
+            viewBox="0 0 24 24"
+            width="24"
+            fill="none"
+            stroke="currentColor"
+            {...props}
+        >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M6 18L18 6M6 6l12 12"
+            />
+        </svg>
+    )
+}
+
+export default CloseIcon
diff --git a/src/components/Icons/DiscordIcon.tsx b/src/components/Icons/DiscordIcon.tsx
@@ -0,0 +1,24 @@
+import {FC} from "react"
+
+const DiscordIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="discord"
+            viewBox="0 0 71 55"
+            {...props}
+        >
+            <g clipPath="url(#clip0)">
+                <path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" />
+            </g>
+
+            <defs>
+                <clipPath id="clip0">
+                    <rect width="71" height="55" />
+                </clipPath>
+            </defs>
+        </svg>
+    )
+}
+
+export default DiscordIcon
diff --git a/src/components/Icons/GatsbyIcon.tsx b/src/components/Icons/GatsbyIcon.tsx
@@ -0,0 +1,29 @@
+import {FC} from "react"
+
+const GatsbyIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="gatsby"
+            viewBox="0 0 28 28"
+            width="24"
+            {...props}
+        >
+            <g id="monogram">
+                <circle cx="14" cy="14" r="14" style={{fill: "#639"}} />
+                <g>
+                    <path
+                        d="M6.2,21.8C4.1,19.7,3,16.9,3,14.2L13.9,25C11.1,24.9,8.3,23.9,6.2,21.8z"
+                        style={{fill: "#fff"}}
+                    />
+                    <path
+                        d="M16.4,24.7L3.3,11.6C4.4,6.7,8.8,3,14,3c3.7,0,6.9,1.8,8.9,4.5l-1.5,1.3C19.7,6.5,17,5,14,5 c-3.9,0-7.2,2.5-8.5,6L17,22.5c2.9-1,5.1-3.5,5.8-6.5H18v-2h7C25,19.2,21.3,23.6,16.4,24.7z"
+                        style={{fill: "#fff"}}
+                    />
+                </g>
+            </g>
+        </svg>
+    )
+}
+
+export default GatsbyIcon
diff --git a/src/components/Icons/GithubIcon.tsx b/src/components/Icons/GithubIcon.tsx
@@ -0,0 +1,16 @@
+import {FC} from "react"
+
+const GithubIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="github"
+            viewBox="0 0 514 500"
+            {...props}
+        >
+            <path d="M172.328 402.599C172.328 404.667 169.95 406.321 166.952 406.321C163.54 406.631 161.162 404.977 161.162 402.599C161.162 400.531 163.54 398.877 166.539 398.877C169.64 398.567 172.328 400.221 172.328 402.599ZM140.174 397.947C139.45 400.015 141.518 402.392 144.62 403.013C147.308 404.047 150.41 403.013 151.03 400.945C151.65 398.877 149.686 396.499 146.584 395.569C143.896 394.845 140.898 395.879 140.174 397.947ZM185.872 396.189C182.874 396.913 180.806 398.877 181.116 401.255C181.427 403.323 184.115 404.667 187.216 403.943C190.215 403.22 192.283 401.255 191.972 399.187C191.662 397.223 188.871 395.879 185.872 396.189ZM253.903 0C110.501 0 0.804932 108.869 0.804932 252.271C0.804932 366.93 72.9709 465.047 176.05 499.579C189.284 501.957 193.937 493.789 193.937 487.069C193.937 480.658 193.627 445.299 193.627 423.587C193.627 423.587 121.254 439.096 106.056 392.777C106.056 392.777 94.2692 362.691 77.3133 354.937C77.3133 354.937 53.637 338.704 78.9675 339.015C78.9675 339.015 104.712 341.082 118.876 365.689C141.518 405.598 179.462 394.121 194.247 387.298C196.625 370.755 203.345 359.279 210.789 352.455C152.994 346.045 94.6827 337.671 94.6827 238.21C94.6827 209.778 102.54 195.51 119.083 177.313C116.395 170.593 107.606 142.884 121.771 107.112C143.379 100.391 193.11 135.027 193.11 135.027C213.788 129.237 236.016 126.239 258.038 126.239C280.06 126.239 302.289 129.237 322.967 135.027C322.967 135.027 372.697 100.288 394.306 107.112C408.47 142.988 399.682 170.593 396.994 177.313C413.536 195.613 423.669 209.881 423.669 238.21C423.669 337.981 362.772 345.942 304.977 352.455C314.489 360.623 322.554 376.132 322.554 400.428C322.554 435.27 322.243 478.384 322.243 486.862C322.243 493.582 326.999 501.75 340.13 499.372C443.519 465.047 513.618 366.93 513.618 252.271C513.618 108.869 397.304 0 253.903 0ZM101.3 356.591C99.9556 357.625 100.266 360.003 102.023 361.967C103.678 363.621 106.056 364.345 107.4 363.001C108.744 361.967 108.434 359.589 106.676 357.625C105.022 355.971 102.644 355.247 101.3 356.591ZM90.1336 348.216C89.4099 349.56 90.4437 351.215 92.5115 352.249C94.1658 353.282 96.2336 352.972 96.9573 351.525C97.681 350.181 96.6471 348.526 94.5793 347.493C92.5115 346.872 90.8573 347.182 90.1336 348.216ZM123.632 385.023C121.978 386.367 122.598 389.469 124.976 391.433C127.354 393.811 130.352 394.121 131.696 392.467C133.04 391.123 132.42 388.021 130.352 386.057C128.078 383.679 124.976 383.369 123.632 385.023ZM111.845 369.825C110.191 370.859 110.191 373.547 111.845 375.925C113.5 378.303 116.291 379.337 117.635 378.303C119.289 376.959 119.289 374.271 117.635 371.893C116.188 369.515 113.5 368.481 111.845 369.825Z" />
+        </svg>
+    )
+}
+
+export default GithubIcon
diff --git a/src/components/Icons/InstagramIcon.tsx b/src/components/Icons/InstagramIcon.tsx
@@ -0,0 +1,16 @@
+import {FC} from "react"
+
+const InstagramIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="instagram"
+            viewBox="0 0 501 501"
+            {...props}
+        >
+            <path d="M250.154 121.83C179.184 121.83 121.939 179.077 121.939 250.049C121.939 321.021 179.184 378.268 250.154 378.268C321.124 378.268 378.369 321.021 378.369 250.049C378.369 179.077 321.124 121.83 250.154 121.83ZM250.154 333.408C204.291 333.408 166.797 296.025 166.797 250.049C166.797 204.073 204.179 166.69 250.154 166.69C296.128 166.69 333.511 204.073 333.511 250.049C333.511 296.025 296.017 333.408 250.154 333.408ZM413.52 116.585C413.52 133.213 400.129 146.492 383.614 146.492C366.987 146.492 353.708 133.101 353.708 116.585C353.708 100.07 367.099 86.6788 383.614 86.6788C400.129 86.6788 413.52 100.07 413.52 116.585ZM498.439 146.938C496.542 106.877 487.391 71.3908 458.044 42.1538C428.807 12.9167 393.322 3.76622 353.262 1.75757C311.974 -0.585856 188.222 -0.585856 146.934 1.75757C106.986 3.65463 71.5004 12.8051 42.1526 42.0422C12.8048 71.2792 3.76612 106.765 1.75752 146.827C-0.58584 188.116 -0.58584 311.871 1.75752 353.16C3.65453 393.221 12.8048 428.707 42.1526 457.944C71.5004 487.181 106.874 496.332 146.934 498.341C188.222 500.684 311.974 500.684 353.262 498.341C393.322 496.443 428.807 487.293 458.044 457.944C487.28 428.707 496.43 393.221 498.439 353.16C500.782 311.871 500.782 188.227 498.439 146.938ZM445.099 397.462C436.395 419.334 419.546 436.184 397.563 445C364.644 458.056 286.532 455.043 250.154 455.043C213.776 455.043 135.552 457.944 102.745 445C80.8739 436.296 64.024 419.445 55.2085 397.462C42.1526 364.542 45.1655 286.428 45.1655 250.049C45.1655 213.67 42.2642 135.444 55.2085 102.636C63.9124 80.7645 80.7623 63.9141 102.745 55.0984C135.664 42.0422 213.776 45.0551 250.154 45.0551C286.532 45.0551 364.755 42.1538 397.563 55.0984C419.434 63.8025 436.284 80.6529 445.099 102.636C458.155 135.556 455.142 213.67 455.142 250.049C455.142 286.428 458.155 364.654 445.099 397.462Z" />
+        </svg>
+    )
+}
+
+export default InstagramIcon
diff --git a/src/components/Icons/JavascriptIcon.tsx b/src/components/Icons/JavascriptIcon.tsx
@@ -0,0 +1,24 @@
+import {FC} from "react"
+
+const JavascriptIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="javascript"
+            viewBox="0 0 256 256"
+            width="24"
+            {...props}
+        >
+            <path
+                fill="#F8DC1C"
+                d="M228.571 0H27.4286C12.2857 0 0 12.2857 0 27.4286V228.571C0 243.714 12.2857 256 27.4286 256H228.571C243.714 256 256 243.714 256 228.571V27.4286C256 12.2857 243.714 0 228.571 0ZM139.314 199.657C139.314 224.571 124.686 235.943 103.371 235.943C84.1143 235.943 72.9714 226 67.2571 213.943L86.8571 202.114C90.6286 208.8 94.0571 214.457 102.343 214.457C110.229 214.457 115.257 211.371 115.257 199.314V117.543H139.314V199.657V199.657ZM196.229 235.943C173.886 235.943 159.429 225.314 152.4 211.371L172 200.057C177.143 208.457 183.886 214.686 195.714 214.686C205.657 214.686 212.057 209.714 212.057 202.8C212.057 194.571 205.543 191.657 194.514 186.8L188.514 184.229C171.143 176.857 159.657 167.543 159.657 147.943C159.657 129.886 173.429 116.171 194.857 116.171C210.171 116.171 221.143 121.486 229.029 135.429L210.286 147.429C206.171 140.057 201.714 137.143 194.8 137.143C187.771 137.143 183.314 141.6 183.314 147.429C183.314 154.629 187.771 157.543 198.114 162.057L204.114 164.629C224.571 173.371 236.057 182.343 236.057 202.457C236.057 224.057 219.029 235.943 196.229 235.943V235.943Z"
+            />
+            <path
+                fill="#000"
+                d="M67.312 213.932L86.902 202.076C90.682 208.777 94.12 214.447 102.367 214.447C110.272 214.447 115.257 211.355 115.257 199.327V117.529H139.314V199.667C139.314 224.584 124.708 235.926 103.398 235.926C84.153 235.926 72.982 225.959 67.311 213.93L67.312 213.932ZM152.381 211.354L171.969 200.013C177.126 208.434 183.828 214.62 195.684 214.62C205.653 214.62 212.009 209.636 212.009 202.762C212.009 194.514 205.479 191.592 194.481 186.782L188.468 184.202C171.111 176.815 159.598 167.535 159.598 147.945C159.598 129.901 173.345 116.153 194.826 116.153C210.12 116.153 221.118 121.481 229.022 135.4L210.29 147.43C206.165 140.041 201.699 137.12 194.825 137.12C187.779 137.12 183.311 141.588 183.311 147.43C183.311 154.647 187.779 157.57 198.089 162.038L204.103 164.615C224.553 173.38 236.066 182.315 236.066 202.419C236.066 224.073 219.054 235.929 196.199 235.929C173.86 235.929 159.425 225.275 152.38 211.355"
+            />
+        </svg>
+    )
+}
+
+export default JavascriptIcon
diff --git a/src/components/Icons/LinkIcon.tsx b/src/components/Icons/LinkIcon.tsx
@@ -0,0 +1,23 @@
+import {FC} from "react"
+
+const LinkIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="link"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            {...props}
+        >
+            <path
+                d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+            />
+        </svg>
+    )
+}
+
+export default LinkIcon
diff --git a/src/components/Icons/MenuIcon.tsx b/src/components/Icons/MenuIcon.tsx
@@ -0,0 +1,24 @@
+import {FC} from "react"
+
+const MenuIcon: FC = props => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            aria-label="menu"
+            viewBox="0 0 24 24"
+            width="24"
+            fill="none"
+            stroke="currentColor"
+            {...props}
+        >
+            <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 6h16M4 12h16M4 18h16"
+            />
+        </svg>
+    )
+}
+
+export default MenuIcon