vercel
Chapter 1 - login arrow is enormous
Steps to reproduce
Following https://nextjs.org/learn/dashboard-app/getting-started
- run
npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" cd nextjs-dashboard npm i npm run dev - go to http://localhost:3000/
The arrow icon is not scaled correctly:
system info
OS - windows 11 Browser - Chrome Version 123.0.6312.105 (Official Build) (64-bit)
> node -v
v20.11.1
> npm -v
npm -v
10.2.4
> npm list
+-- @heroicons/[email protected]
+-- @tailwindcss/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @vercel/[email protected]
+-- @vercel/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
Related to https://github.com/tailwindlabs/heroicons/discussions/1120
I had the same issue. I found that the cause of this is that the global styles are not included. However, chapter 2 of the tutorial prompts us to include the global styles, and that fixes the issue. I'd suggest that <ArrowRightIcon className="w-5 md:w-6" /> is removed from page.tsx so that it looks ok prior to the global styles being included (and this will mean that the app will reflect the expected result from step 1.
For all following the tutorial, what you get in the setup is a starter project. Ignore any error (like arrow, font, etc). You have to go through the tutorial and you'll find the fix for all those initial issues. So, be patient and follow the tutorial you'll find answers.
