自定义图标而不进行全局替换

功能
1

您好，我想咨询一下是否可以允许自定义图标，但不是全局替换图标。例如，如果我想将发送消息的“加号”图标 + 更改为“纸飞机”图标，我最终会替换掉网站上所有的“加号”图标，除非我在文档中遗漏了此选项。我非常希望能够指定一个 ID/Class 或项目来专门替换图标。

1 个赞
2

您可以使用 CSS 来定位和替换图标的特定实例。

此主题似乎包含一些信息：

3

我已经试过了，但对于我最近安装的 discourse 来说，这不起作用。其次，这似乎并没有替换单个图标实例，因为它会根据指定的图标选择器替换所有图标。

目前，我通过以下方式替换“新主题”图标：

  api.onPageChange(() => {
    const button = document.querySelector("#create-topic");

    if (button) {
      const oldSvg = button.querySelector("svg");
      if (oldSvg) {
        oldSvg.remove();
      }
      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("xmlns", ns);
      svg.setAttribute("viewBox", "10 10 30 30");
      svg.setAttribute("width", "28");
      svg.setAttribute("height", "28");
      svg.setAttribute("class", "svg-icon custom-icon");
      svg.innerHTML = `
        (svg icon code here)
      `;

      button.insertBefore(svg, button.firstChild);
    }
  });

虽然我可以为我想要替换的区域复制此代码，但它在 composer 图标上效果不佳，我不得不进行全局图标替换，正如您分享的链接中所述。

4

目前无法实现，除非是一些特殊情况。

此主题是重复请求，因此我将关闭此主题，优先处理 https://meta.discourse.org/t/change-single-instance-of-icon/336356，其中还包含一个通过 CSS 添加图标 的示例。

如果您需要，请随时在那个主题上投票并添加更多详细信息！

3 个赞
5

Change single instance of icon 的重复内容