switch to lucide-react icons

package-lock.json

@@ -14,11 +14,11 @@
         "@yaireo/relative-time": "^1.0.2",
         "file-saver": "^2.0.5",
         "framer-motion": "^8.5.4",
+        "lucide-react": "^0.108.0",
         "next": "13.1.6",
         "next-themes": "^0.2.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-feather": "^2.0.10",
         "remark": "^14.0.2",
         "remark-gfm": "^3.0.1",
         "remark-html": "^15.0.1",
@@ -9613,6 +9613,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.108.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.108.0.tgz",
+      "integrity": "sha512-dL8F1DZibvqcWRhCrMghFSYpovsKLcoAcLbh1oZNWo1UxadrDesl8K8Eh6qYrWJwvj95bdSA69ZKc8k+KRxrvg==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -10815,6 +10823,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11421,6 +11430,7 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -11430,7 +11440,8 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
     },
     "node_modules/property-information": {
       "version": "6.1.1",
@@ -11562,17 +11573,6 @@
         "react": "^18.2.0"
       }
     },
-    "node_modules/react-feather": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
-      "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.6"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -29,11 +29,11 @@
     "@yaireo/relative-time": "^1.0.2",
     "file-saver": "^2.0.5",
     "framer-motion": "^8.5.4",
+    "lucide-react": "^0.108.0",
     "next": "13.1.6",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-feather": "^2.0.10",
     "remark": "^14.0.2",
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.1",

src/components/Icon/index.tsx

@@ -1,71 +1,54 @@
-// https://featherstyles.com
+// https://lucide.dev
-// import * as Feather from 'react-feather'
 import {
   ArrowDownCircle,
-  Award,
-  BookOpen,
-  Briefcase,
   Check,
   ChevronDown,
   Compass,
-  Dribbble,
+  Contrast,
-  Edit,
+  Feather,
   FileText,
-  GitHub,
+  Github,
   Globe,
   Image,
   Info,
-  Key,
   Mail,
-  MapPin,
-  Monitor,
   Moon,
-  Rss,
   Star,
   Sun,
   Twitter
-} from 'react-feather'
+} from 'lucide-react'
 import Mastodon from '../../images/mastodon.svg'
 import styles from './index.module.css'
 
 export default function Icon({ name, ...props }: { name: string }) {
   const components = {
-    Dribbble,
     Email: Mail,
     Link: Compass,
     Download: ArrowDownCircle,
     'Info & Download': ArrowDownCircle,
     Styleguide: FileText,
-    Blog: Edit,
+    Blog: Feather,
-    Keybase: Key,
     ArrowDownCircle,
-    Edit,
+    GitHub: Github,
-    GitHub,
     Twitter,
-    Rss,
     Sun,
     Moon,
     Compass,
     FileText,
-    Key,
     Image,
     Mail,
-    MapPin,
     Globe,
-    Briefcase,
-    Award,
-    BookOpen,
     Star,
     Info,
     Mastodon,
     ChevronDown,
     Check,
-    Monitor
+    Contrast
   }
 
   const IconMapped = components[name]
-  // const IconComp = Feather[name]
-  if (!IconMapped) return null
 
-  return <IconMapped className={`${styles.icon} ${styles[name]}`} {...props} />
+  return IconMapped ? (
+    <IconMapped className={`${styles.icon} ${styles[name]}`} {...props} />
+  ) : null
 }

src/components/ThemeSwitch/index.tsx

@@ -7,7 +7,7 @@ import { Item } from './Item'
 import styles from './index.module.css'
 
 export function getIconName(theme: string) {
-  return theme === 'light' ? 'Sun' : theme === 'dark' ? 'Moon' : 'Monitor'
+  return theme === 'light' ? 'Sun' : theme === 'dark' ? 'Moon' : 'Contrast'
 }
 
 export default function ThemeSwitch() {