如何将React图标FiChevronDown置于导航栏按钮文本右侧？

我正在使用FiChevronDown图标在导航栏下拉菜单中显示向下箭头，当前无序列表的列表项代码如下：

<li>
  <div className="dropdown">
    <button className="dropbtn">Accessories <FiChevronDown />
    </button>
    <div className="dropdown-content">
      <NavLink to="/category/golf-balls">Golf Balls</NavLink>
      <NavLink to="/category/golf-shoes">Golf Shoes</NavLink>
      <NavLink to="/category/golf-accessories">Golf Accessories</NavLink>
    </div>
  </div>
</li>

请问有没有办法将该图标放在‘Accessories’文字的右侧？

当然可以，你代码里图标已经写在文字后方，视觉上没呈现右侧效果大概率是CSS布局问题，以下几种方法可以解决：

• Flexbox布局（推荐）
  给.dropbtn添加flex属性，让文字靠左、图标自动靠右，同时保证垂直居中：

.dropbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 保留你原有按钮样式，比如 padding、背景色、字体大小等 */
}

这种方式适配性强，不管按钮宽度怎么变化，图标都会固定在右侧。

• 绝对定位方案
  如果按钮宽度固定，用定位精准控制图标位置：

.dropbtn {
  position: relative;
  /* 给图标留出右侧空间，根据图标大小调整 */
  padding-right: 24px;
}

/* FiChevronDown 渲染后是svg元素，直接选中它 */
.dropbtn svg {
  position: absolute;
  right: 8px;
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
}

• 快速调整间距
  如果只是需要图标和文字保持一点距离并紧跟右侧，给图标加左外边距即可：

.dropbtn svg {
  margin-left: 8px;
}

内容的提问来源于stack exchange，提问作者aknahin