Настройка иконки без глобальной замены

Внести вклад Функция
1

Привет! Я хотел бы узнать о возможности кастомизации иконок без их глобальной замены. Например, если я захочу изменить иконку плюса (+) на иконку бумажного самолетика только для отправки сообщения, в результате у меня заменятся все иконки плюса на всём сайте. Если я упустил упоминание об этой опции в документации, то мне бы очень хотелось иметь возможность указывать ID, класс или элемент, для которого можно заменить иконку конкретно.

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 здесь)
      `;

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

Хотя я мог бы повторить это для нужных мне областей, это не очень хорошо работает для иконок в композере, где мне пришлось выполнить глобальную замену иконок, как упоминается в ссылке, которую вы прислали.

4

В данный момент это невозможно, за исключением некоторых особых случаев.

Эта тема дублирует существующий запрос, поэтому я закрою её в пользу Change single instance of icon, где также приведён пример добавления иконки через CSS.

Не стесняйтесь проголосовать за эту тему и добавить любые дополнительные детали, если это необходимо!

3 лайка
5

Дубликат Change single instance of icon