### Author:  [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [15.Ноябрь.2024 15:31:57 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/1 "2024-11-15T15:31:57Z")
Верните к жизни этот старый пост: [Changing a single instance of an icon](https://meta.discourse.org/t/changing-a-single-instance-of-an-icon/251514)
Мне нужно изменить отдельные вхождения иконок на всём сайте. Я не хочу использовать `replaceIcon()` и заменять все экземпляры этой иконки. Судя по прошлому опыту, это было возможно для конкретных областей сайта, или, по крайней мере, так я это понимаю, но не для всего сайта в целом.
Например, я хочу изменить ОДНУ иконку шестерёнки в поиске, чтобы она лучше отражала то, что произойдёт при клике пользователя. Я не хочу менять все иконки шестерёнок.
Спасибо!
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [15.Ноябрь.2024 15:42:28 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/2 "2024-11-15T15:42:28Z")
Посмотрите на этот PR — возможно, вы сможете сделать что-то подобное, используя только CSS:
>
>
> Extending @merefield's PR a bit (https://github.com/discourse/discourse/pull/285…93)
>
> This gives the ranked choice polls a distinctive preview style, rather than the default radio buttons. This more closely mimics the button styles in the live post:
>
> The live poll:
>
> !\[image\](https://github.com/user-attachments/assets/672c0b2d-c79f-43d6-a355-71a1e7ae1d2b)
>
>
>
> Preview before:
>
> !\[image\](https://github.com/user-attachments/assets/876ef249-be1f-4dd7-90f8-c7b10cc90121)
>
>
> Preview after:
>
> !\[image\](https://github.com/user-attachments/assets/3223f06e-e9c6-4acb-af20-805f4c720273)
>
> !\[image\](https://github.com/user-attachments/assets/d6acaa36-79c5-4384-8e96-d3f449393a16)
---
### Author:  [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [15.Ноябрь.2024 15:47:18 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/3 "2024-11-15T15:47:18Z")
Это выглядит как костыль. Как это работает при навигации с помощью клавиатуры?
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [15.Ноябрь.2024 15:51:43 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/4 "2024-11-15T15:51:43Z")
Когда ты в пустыне и, казалось бы, нет воды, хаки могут очень пригодиться!
---
### Author:  [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [15.Ноябрь.2024 15:54:26 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/5 "2024-11-15T15:54:26Z")
Увы, мы не в пустыне… мы платим за использование платформы для размещения публичного сайта.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [15.Ноябрь.2024 18:58:55 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/6 "2024-11-15T18:58:55Z")
Какая конкретно это иконка (где она отображается)? Если есть разумные основания полагать, что это может быть полезно другим, мы можем создать для неё алиас, чтобы разрешить её отдельную замену.
---
### Author:  [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [15.Ноябрь.2024 19:23:11 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/7 "2024-11-15T19:23:11Z")
Вот один пример, где шестеренка не отражает действие кнопки открытия расширенной страницы поиска:
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [19.Ноябрь.2024 21:37:43 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/8 "2024-11-19T21:37:43Z")
По умолчанию здесь используется иконка “sliders” (и это единственное её использование в Discourse по умолчанию), поэтому в данном случае безопасно использовать `replaceIcon()`.
Поскольку у нас нет API для замены отдельных иконок, лучший способ поддержки этой функции сегодня — это рассмотрение запросов на добавление новых алиасов, объединяющих схожие случаи использования.
Например, мы используем `d-liked` как алиас для `heart`, чтобы `replaceIcon()` можно было применить к `d-liked` и изменить иконку в контексте лайков, вместо того чтобы заменять каждое вхождение иконки сердца во всём приложении.
>
Будет здорово иметь возможность заменять любое отдельное вхождение, так как это не редкая ситуация в темах — надеемся, что однажды у нас появится для этого API.
---
### Author:  [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [19.Ноябрь.2024 21:54:08 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/9 "2024-11-19T21:54:08Z")
Круто, похоже, команда Discourse изменила нашу иконку на шестерёнку настроек, так что я всё исправил! Спасибо 🙏
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [14.Май.2025 13:35:27 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/10 "2025-05-14T13:35:27Z")
Хорошо, теперь, кажется, понял, каков вердикт по этому вопросу. Грустно осознавать, что это станет доступно только после обновления API, поэтому пока мне придётся использовать тот метод, который я применял ранее.
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [15.Май.2025 15:10:02 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/11 "2025-05-15T15:10:02Z")
@awesomerobot Вот обновлённый код того, что я сделал, чтобы изменить иконку создания темы на «+», не затрагивая все остальные «+»:
```plaintext
```
Нужно немного доработать его для замены нескольких иконок:
```plaintext
```
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [15.Май.2025 20:41:48 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/12 "2025-05-15T20:41:48Z")
Вы также можете использовать `iconHTML` вместо ручного добавления иконки.
Что-то вроде этого должно сработать:
```js
import { apiInitializer } from "discourse/lib/api";
import { iconHTML } from "discourse/lib/icon-library";
export default apiInitializer((api) => {
api.onPageChange(() => {
const btnIcon = document.querySelector("#create-topic .d-icon");
if (btnIcon) {
btnIcon.outerHTML = iconHTML("plus");
}
});
});
```
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [15.Май.2025 20:50:21 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/13 "2025-05-15T20:50:21Z")
Это может оказаться ненадёжным.
Полагаю, api.onPageChange срабатывает при смене маршрута.
Это происходит задолго до рендеринга.
Следовательно, существует риск, что элементы не успеют отрендериться, прежде чем вы попытаетесь найти и переопределить их.
Вам может повезти, но это не гарантировано. Именно поэтому awesomerobot предложил, что было бы неплохо иметь отдельный API…
(@Don, ваше решение, как я полагаю, имеет схожую проблему)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [16.Май.2025 06:18:24 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/14 "2025-05-16T06:18:24Z")
Да, ты прав! Это не слишком стабильно. Может быть, с помощью `requestAnimationFrame` или `MutationObserver` это станет стабильнее? 🤔 Но да, лучшим решением было бы наличие отдельного API, как ты и упоминал.
---
### Author:  [@digitaldominica](https://meta.discourse.org/u/digitaldominica)
#### Post date: [16.Май.2025 22:18:37 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/15 "2025-05-16T22:18:37Z")
Спасибо, что обратили на это внимание — вы абсолютно правы. Использование только api.onPageChange может быть ненадёжным, так как оно срабатывает при смене маршрута, а не после рендеринга DOM. Это создаёт риск состояния гонки, когда кнопка #create-topic может ещё не существовать в момент, когда скрипт пытается получить к ней доступ.
```plaintext
api.onPageChange(() => {
const targetSelector = "#create-topic";
const tryEnhanceButton = () => {
const button = document.querySelector(targetSelector);
if (button) {
// Отключаем наблюдатель после нахождения элемента
observer.disconnect();
// Временно скрываем кнопку, пока мы заменяем иконку
button.style.display = "none";
// Удаляем старую иконку, если она есть
const oldIcon = button.querySelector("svg");
if (oldIcon) oldIcon.remove();
// Создаём и вставляем новую SVG-иконку Font Awesome
const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
newIcon.setAttribute("class", "fa d-icon d-icon-feather-pointed svg-icon svg-string");
newIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
newIcon.innerHTML = '';
button.insertBefore(newIcon, button.firstChild);
// Снова показываем кнопку
button.style.display = "block";
}
};
// Наблюдаем за изменениями в DOM и пытаемся улучшить кнопку, когда она появится
const observer = new MutationObserver(() => tryEnhanceButton());
observer.observe(document.body, { childList: true, subtree: true });
// Также пробуем сразу, на случай если элемент уже существует
tryEnhanceButton();
});
```
@Don Я добавил MutationObserver, чтобы гарантировать, что скрипт выполнится только после того, как целевой элемент действительно появится в DOM. После выполнения своей задачи наблюдатель отключается, чтобы избежать лишних накладных расходов. Также сохраняется попытка немедленной проверки на случай, если элемент уже существует.
Мне не удалось получить нужную SVG-иконку из системы иконок Discourse, хотя я зарегистрировал её в подмножестве административных SVG-иконок, поскольку, похоже, она есть в Font Awesome, но отсутствует в Discourse.