diff --git a/package-lock.json b/package-lock.json index 30f20b3..549023e 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e2ffc2f..2f39362 100644 --- a/package.json +++ b/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", diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index cc32677..40667ef 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,71 +1,54 @@ -// https://featherstyles.com -// import * as Feather from 'react-feather' +// https://lucide.dev import { ArrowDownCircle, - Award, - BookOpen, - Briefcase, Check, ChevronDown, Compass, - Dribbble, - Edit, + Contrast, + 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, - Keybase: Key, + Blog: Feather, 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 + return IconMapped ? ( + + ) : null } diff --git a/src/components/ThemeSwitch/index.tsx b/src/components/ThemeSwitch/index.tsx index 7291237..d021e4d 100644 --- a/src/components/ThemeSwitch/index.tsx +++ b/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() {