在nextjs中不能更改图标元素的高度。

Question

我一直试着用顺风和nextjs搭配。

除了h-5之外，我无法给我的HomeIcon元素任何其他高度。如果我试图给它任何其他高度，它会填满所有的屏幕。

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

以上代码占据了整个屏幕。

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

工作很好

Answer 1

如果您想给元素提供所需的height，请将width设置为相同的值，它应该可以工作。当然，嵌入图标的context也是超级重要的。此外，阅读有关尾风和英雄人物中的height属性--这些图标有一些limitations，当正确使用它们时，您需要意识到它们。

​

​

试试这个：

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

我的示例代码：

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;

输出：

​

​

测试：“@英雄主义者/反应”："^1.0.2“、”@尾风/线夹“："^0.2.1”、“下一步”："11.0.1“、”反应“："17.0.2”

Answer 2

我也有这个问题，我的问题是我错过了拼写"components“目录，而tailwind.config.js没有捡到它

tailwind.config.js文件：

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