ApexCharts自定义图标无法显示在汉堡菜单左侧问题求助

我在ApexCharts的工具栏中添加了自定义的编辑和删除图标，这些图标仅在hover时显示。现在想把它们定位到汉堡菜单（默认的菜单图标）左侧，但始终无法实现。查阅官方文档后，没找到能重新排列现有图标的配置项。

相关代码 #

const customIcons = showIcons
  ? [
      {
        icon: `<div onmouseover="style.color='#333333'" onmouseleave="style.color='#6e8192'">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="22" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
</svg>
</div>`,
        index: 1,
        title: "Edit",
        class: "custom-edit-icon",
        click: function () {
          handleEditClick(chartDataToEdit);
        },
      },
      {
        icon: `<div onmouseover="style.color='#EE4B2B'" onmouseleave="style.color='#6e8192'">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="21" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
</svg>
</div>`,
        index: 2,
        title: "Delete",
        class: "custom-delete-icon",
        click: handleOpenModalClick,
      },
    ]
  : [];

const options: ApexOptions = {
    title: {
      text: dataAtIndex.displayName || "",
      style: { color: alpha(theme.palette.text.primary, 0.9) },
    },
    chart: {
      type: "pie",
      toolbar: {
        show: true,
        tools: {
          download: true,
          customIcons: customIcons,
        },
      },
    },
    labels: dataAtIndex.columns || [],
    dataLabels: {
      enabled: true,
    },
    legend: { labels: { colors: alpha(theme.palette.text.primary, 0.9) } },
    colors: dataAtIndex?.color || [],
};

解决方案：通过CSS调整图标顺序 #

ApexCharts官方没有提供调整工具栏图标顺序的配置项，我们可以通过自定义CSS实现需求：

1. 添加核心样式

/* 将工具栏设置为flex布局，反转子元素排列顺序 */
.apexcharts-toolbar {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* 调整自定义图标与汉堡菜单的间距，和默认样式保持一致 */
.apexcharts-custom-icon {
  margin-left: 8px;
}

2. 优化图标hover效果（可选）

把代码中inline的onmouseover/onmouseleave事件替换为CSS控制，更简洁易维护：

• 修改自定义图标代码，移除inline事件：

const customIcons = showIcons
  ? [
      {
        icon: `<div class="custom-edit-icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="22" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
</svg>
</div>`,
        index: 1,
        title: "Edit",
        class: "custom-edit-icon",
        click: function () {
          handleEditClick(chartDataToEdit);
        },
      },
      {
        icon: `<div class="custom-delete-icon">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="21" fill="none" viewBox="0 0 24 24">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 7h14m-9 3v8m4-8v8M10 3h4a1 1 0 0 1 1 1v3H9V4a1 1 0 0 1 1-1ZM6 7h12v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7Z"/>
</svg>
</div>`,
        index: 2,
        title: "Delete",
        class: "custom-delete-icon",
        click: handleOpenModalClick,
      },
    ]
  : [];

• 添加对应的CSS hover样式：

/* 默认状态颜色 */
.custom-edit-icon, .custom-delete-icon {
  color: #6e8192;
}

/* hover状态颜色 */
.custom-edit-icon:hover {
  color: #333333;
}
.custom-delete-icon:hover {
  color: #EE4B2B;
}

原理说明 #

通过将工具栏的flex方向设置为row-reverse，再用justify-content: flex-end保持整体在右侧，自定义图标就会自动排列到汉堡菜单左侧。这种方式无需修改ApexCharts源码，纯前端样式调整即可实现需求。

内容的提问来源于stack exchange，提问作者Tim van Dam