Update to use a new icon package

Use react-icons library over hericons. There is a greater variety of icons available; including heroicons as a part of it. Using this so I can use stuff like a github logo SVG and others.
This commit is contained in:
Nick Bland 2022-05-14 16:47:40 +10:00
parent 4337801152
commit 0a4263dfac
No known key found for this signature in database
GPG Key ID: B46CF88E4DAB4A2C
3 changed files with 21 additions and 21 deletions

View File

@ -1,6 +1,6 @@
import React, {Fragment, ReactNode, useState} from "react";
import {Disclosure, Transition} from "@headlessui/react";
import {XIcon, MenuIcon} from "@heroicons/react/outline"
import {HiX, HiMenu} from "react-icons/hi"
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
@ -65,9 +65,9 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
>
<span className="sr-only">Open Mobile Menu</span>
{!isOpen ? (
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
<HiMenu className="block h-6 w-6" aria-hidden="true" />
) : (
<XIcon className="block h-6 w-6" aria-hidden="true" />
<HiX className="block h-6 w-6" aria-hidden="true" />
)}
</button>
</div>

32
package-lock.json generated
View File

@ -9,11 +9,11 @@
"version": "0.1.0",
"dependencies": {
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.6",
"next": "12.1.4",
"next-themes": "^0.1.1",
"react": "18.0.0",
"react-dom": "18.0.0"
"react-dom": "18.0.0",
"react-icons": "^4.3.1"
},
"devDependencies": {
"@types/node": "17.0.23",
@ -84,14 +84,6 @@
"react-dom": "^16 || ^17 || ^18"
}
},
"node_modules/@heroicons/react": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
"integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
"peerDependencies": {
"react": ">= 16"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.9.5",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@ -2943,6 +2935,14 @@
"react": "^18.0.0"
}
},
"node_modules/react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -3543,12 +3543,6 @@
"integrity": "sha512-aaRnYxBb3MU2FNJf3Ut9RMTUqqU3as0aI1lQhgo2n9Fa67wRu14iOGqx93xB+uMNVfNwZ5B3y/Ndm7qZGuFeMQ==",
"requires": {}
},
"@heroicons/react": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
"integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
"requires": {}
},
"@humanwhocodes/config-array": {
"version": "0.9.5",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
@ -5537,6 +5531,12 @@
"scheduler": "^0.21.0"
}
},
"react-icons": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
"integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

View File

@ -10,11 +10,11 @@
},
"dependencies": {
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.6",
"next": "12.1.4",
"next-themes": "^0.1.1",
"react": "18.0.0",
"react-dom": "18.0.0"
"react-dom": "18.0.0",
"react-icons": "^4.3.1"
},
"devDependencies": {
"@types/node": "17.0.23",