안녕하세요, 특정 아이콘만 커스터마이징할 수 있는 기능에 대해 문의드립니다. 현재는 전역적으로 아이콘을 교체하는 방식만 가능한 것 같습니다. 예를 들어, 메시지 전송 버튼의 ‘+’ 아이콘만 종이비행기 아이콘으로 변경하려고 하면, 사이트 전체의 ‘+’ 아이콘이 모두 교체되어 버립니다. 문서에서 이 기능이 있는지 제가 놓쳤다면 죄송합니다. 특정 ID/클래스나 항목을 지정하여 해당 위치의 아이콘만 선택적으로 교체할 수 있는 기능이 정말 필요할 것 같습니다.
1개의 좋아요
CSS를 사용하면 아이콘의 특정 인스턴스를 대상 지정하여 교체할 수 있습니다.
이 주제에는 관련 정보가 있습니다.
해당 방법을 시도해 보았지만, 제가 현재 설치해 둔 최신 버전의 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) 아이콘의 경우에는 그렇게 잘 작동하지 않습니다.
현재 일부 특수한 경우를 제외하고는 불가능합니다.
이 주제는 중복 요청이므로, CSS를 사용하여 아이콘을 추가하는 예시도 포함된 Change single instance of icon 을 대신 유지하기 위해 이 주제를 닫겠습니다.
필요하다면 해당 주제에 업보팅을 하거나 추가 정보를 남겨주세요!
3개의 좋아요
Change single instance of icon 의 중복입니다