如何在GrapesJs面板按钮中添加自定义图标？

方法一：直接插入img标签（推荐，支持src引入） #

GrapesJS的按钮配置允许label字段传入HTML字符串，直接把img标签写进去就能替换原有文本：

const sidebarTools = panelManager.addPanel({
  id: "sidebar-panel",
  el: ".sidebar__tools",
  buttons: [
    {
      id: "add-block",
      className: "tool__add-block",
      // 用img标签替代文本，src填你的图标路径
      label: '<img src="./path/to/your-icon.png" alt="Add Block" class="btn-icon">',
      command: "show-blocks",
    },
  ],
});

再加点CSS让图标适配按钮尺寸：

.btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

方法二：CSS背景图实现 #

如果不想改动JS逻辑，也可以通过CSS隐藏文本并设置背景图标：
先把按钮的label清空：

const sidebarTools = panelManager.addPanel({
  id: "sidebar-panel",
  el: ".sidebar__tools",
  buttons: [
    {
      id: "add-block",
      className: "tool__add-block",
      label: "", // 清空原有文本
      command: "show-blocks",
    },
  ],
});

然后添加CSS样式：

.tool__add-block {
  font-size: 0; /* 隐藏残留文本 */
  width: 20px;
  height: 20px;
  background-image: url("./path/to/your-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

注意：把代码里的./path/to/your-icon.png替换成你实际的图标文件路径即可。

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