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 React, {Fragment, ReactNode, useState} from "react";
import {Disclosure, Transition} from "@headlessui/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 Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; 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> <span className="sr-only">Open Mobile Menu</span>
{!isOpen ? ( {!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> </button>
</div> </div>

32
package-lock.json generated
View File

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

View File

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