Cant seem to change height the Icon element in nextjs

user_16934625 0
Viewed 578

i have been trying to use tailwind with nextjs.

I am unable to give any other height to my HomeIcon element from heroicons other than h-5. if i try to give it any other height it fills all the screen.

<div >
   <HomeIcon className='w-5 h-9'/>
</div>

the above code occupies the Whole screen.

<div >
   <HomeIcon className='w-5 h-5'/>
</div>

works fine

tailwind-css reactjs
2 Answers

If you want to give the element the desired height, set the width to the same value and it should work. Of course, the context in which you embed the icons is also super important. In addition, read about the height property in tailwindcss and heroicons These icons have some limitations that you need to be aware of when using them correctly.

enter image description here

Try this:

<HomeIcon className="h-20 w-20" />

My example code:

import { HomeIcon } from "@heroicons/react/solid";

function icons() {
  return (
    <div className="flex items-center justify-center gap-10 h-screen">
      <div className="">
        <HomeIcon className="h-6 w-6" />
        <small>height 6</small>
      </div>
      <div className="">
        <HomeIcon className="h-10 w-10" />
        <small>height 10</small>
      </div>
      <div className="">
        <HomeIcon className="h-12 w-12" />
        <small>height 12</small>
      </div>
      <div className="">
        <HomeIcon className="h-14 w-14" />
        <small>height 14</small>
      </div>
      <div className="">
        <HomeIcon className="h-16 w-16" />
        <small>height 16</small>
      </div>
      <div className="">
        <HomeIcon className="h-20 w-20" />
        <small>height 20</small>
      </div>
    </div>
  );
}

export default icons;

Output:

enter image description here

Tested: "@heroicons/react": "^1.0.2","@tailwindcss/line-clamp": "^0.2.1","next": "11.0.1","react": "17.0.2"

user_137059790

I also just had this issue and my problem was that i miss spelt the "components" directory and tailwind.config.js wasn't picking it up

tailwind.config.js file:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
user_196872530
Related