Add custom Icon component

src/components/Icon.test.tsx

@@ -0,0 +1,17 @@
+import { toJson } from '@/utils/toJson'
+import { Cog } from 'lucide-react'
+import renderer from 'react-test-renderer'
+import { expect, test } from 'vitest'
+import Icon from './Icon'
+
+test('Icon', () => {
+  const component = renderer.create(<Icon Icon={Cog} />)
+  const tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})
+
+test('Icon with class name', () => {
+  const component = renderer.create(<Icon Icon={Cog} className="test" />)
+  const tree = toJson(component)
+  expect(tree).toMatchSnapshot()
+})

src/components/Icon.tsx

@@ -0,0 +1,8 @@
+import clsx from 'clsx'
+import { LucideIcon } from 'lucide-react'
+
+const Icon = ({ Icon, className }: { Icon: LucideIcon; className?: string }) => {
+  return <Icon className={clsx('size-5 translate-y-1', className)} />
+}
+
+export default Icon

src/components/Tile.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx'
 import { MousePointerClick } from 'lucide-react'
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 import Heading from './Heading'
+import Icon from './Icon'
 
 const Tile = ({
   sub,
@@ -20,7 +21,7 @@ const Tile = ({
       {children}
       {links && (
         <div className="flex items-baseline gap-2">
-          <MousePointerClick className="size-4" />
+          <Icon Icon={MousePointerClick} />
           <div className="flex flex-col gap-1">{links}</div>
         </div>
       )}

src/components/__snapshots__/Icon.test.tsx.snap

@@ -0,0 +1,117 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Icon 1`] = `
+<svg
+  className="lucide lucide-cog size-5 translate-y-1"
+  fill="none"
+  height={24}
+  stroke="currentColor"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={2}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
+  />
+  <path
+    d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+  />
+  <path
+    d="M12 2v2"
+  />
+  <path
+    d="M12 22v-2"
+  />
+  <path
+    d="m17 20.66-1-1.73"
+  />
+  <path
+    d="M11 10.27 7 3.34"
+  />
+  <path
+    d="m20.66 17-1.73-1"
+  />
+  <path
+    d="m3.34 7 1.73 1"
+  />
+  <path
+    d="M14 12h8"
+  />
+  <path
+    d="M2 12h2"
+  />
+  <path
+    d="m20.66 7-1.73 1"
+  />
+  <path
+    d="m3.34 17 1.73-1"
+  />
+  <path
+    d="m17 3.34-1 1.73"
+  />
+  <path
+    d="m11 13.73-4 6.93"
+  />
+</svg>
+`;
+
+exports[`Icon with class name 1`] = `
+<svg
+  className="lucide lucide-cog size-5 translate-y-1 test"
+  fill="none"
+  height={24}
+  stroke="currentColor"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={2}
+  viewBox="0 0 24 24"
+  width={24}
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
+  />
+  <path
+    d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
+  />
+  <path
+    d="M12 2v2"
+  />
+  <path
+    d="M12 22v-2"
+  />
+  <path
+    d="m17 20.66-1-1.73"
+  />
+  <path
+    d="M11 10.27 7 3.34"
+  />
+  <path
+    d="m20.66 17-1.73-1"
+  />
+  <path
+    d="m3.34 7 1.73 1"
+  />
+  <path
+    d="M14 12h8"
+  />
+  <path
+    d="M2 12h2"
+  />
+  <path
+    d="m20.66 7-1.73 1"
+  />
+  <path
+    d="m3.34 17 1.73-1"
+  />
+  <path
+    d="m17 3.34-1 1.73"
+  />
+  <path
+    d="m11 13.73-4 6.93"
+  />
+</svg>
+`;

src/content/Tech.tsx

@@ -1,19 +1,20 @@
 import Em from '@/components/Em'
+import Icon from '@/components/Icon'
 import Tile from '@/components/Tile'
 import { Sparkles } from 'lucide-react'
 
 const skills: { tech: string; description: string }[] = [
   {
     tech: 'React',
-    description: 'TSX, state as minimal as it gets, queries, micro components, API.',
+    description: 'TSX, state, queries, micro components, API.',
   },
-  { tech: 'Tailwind CSS', description: 'Atomic CSS everywhere.' },
-  { tech: 'CSS + Sass', description: 'Where the Tailwind CSS is not enough.' },
+  { tech: 'Tailwind CSS', description: 'Utility first.' },
+  { tech: 'HTML, CSS, Sass', description: 'SEO, a11y, animations, transitions.' },
   {
     tech: 'Theme refactoring',
-    description: 'Reorganization and tuning of front-end parts of large app',
+    description: 'Reorganization and tuning of front-end.',
   },
-  { tech: 'Figma', description: 'Mockups and prototypes.' },
+  { tech: 'Figma', description: 'Mockups and prototypes, design systems, modes.' },
   { tech: '...and more', description: 'Payload CMS, Angular, Vue.js, Vaadin + Java' },
 ]
 
@@ -23,10 +24,10 @@ const Tech = () => {
       <ul className="grid gap-4 md:grid-flow-col-dense md:grid-rows-3">
         {skills.map((skill, i) => (
           <li key={i} className="group flex items-baseline gap-2">
-            <Sparkles className="size-4 opacity-0 group-first:opacity-100" />
+            <Icon Icon={Sparkles} className="opacity-0 group-first:opacity-100" />
             <span className="flex flex-col gap-1">
               <Em>{skill.tech}</Em>
-              <span className="block text-sm">{skill.description}</span>
+              <span className="block text-sm text-zinc-500">{skill.description}</span>
             </span>
           </li>
         ))}