Discourse 아이콘을 전역적으로 변경하는 쉬운 방법입니다.
-
변경하려는 아이콘을 마우스 오른쪽 버튼으로 클릭하고 “요소 검사” 또는 “검사”(브라우저에 따라 다름)를 선택합니다.
-
아이콘 이름을 찾습니다.
-
Find Icons with the Perfect Look & Feel | Font Awesome 에서 새 아이콘을 검색합니다. 예: external-link-alt
-
admin > customize > themes > edit code -> JS탭에서 코드를 커스터마이징하고 추가합니다.
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
api.replaceIcon("link", "external-link-tab");
});
- Discourse에서 기본적으로 사용되지 않는 아이콘은 사이트 설정의
svg icon subset에 추가한 후, 브라우저의 강제로 새로 고침을 통해 변경 사항이 적용되었는지 확인해야 합니다.
결과:
모든 “link” 아이콘이 "external-link-tab"으로 대체됩니다.
배지(badge)와 같은 다른 페이지의 여러 요소에서 아이콘이 사용되는 경우, 해당 위치에서도 아이콘이 대체됩니다.
예외
이미 “좋아요(Like)” 아이콘을 변경할 수 있는 테마 컴포넌트가 존재합니다. 이 경우를 예시로 사용합니다.
"좋아요(Like)"를 위해 사용되는 “heart” 아이콘은 다른 이름('d-liked' 및 'd-unliked')으로 하드코딩되어 있어 다른 아이콘과 다르게 처리되어야 합니다. 따라서 
아이콘을 
아이콘으로 변경하려면:
api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");
하지만 배지 페이지에서는 아이콘이 여전히 "heart"입니다:
따라서 해당 페이지에서 변경하려면 다음을 추가합니다:
api.replaceIcon("heart", "thumbs-up");
또 다른 예시:
api.replaceIcon("d-watching", "eye");
관심(watching) 아이콘을 변경합니다:
추적 상태, 확장/축소, 알림 및 좋아요를 포함하는 기타 예외를 여기를 참조하세요.
const REPLACEMENTS = {
"d-tracking": "bell",
"d-muted": "discourse-bell-slash",
"d-regular": "far-bell",
"d-watching": "discourse-bell-exclamation",
"d-watching-first": "discourse-bell-one",
"d-drop-expanded": "caret-down",
"d-drop-collapsed": "caret-right",
"d-unliked": "far-heart",
"d-liked": "heart",
"d-post-share": "link",
"d-topic-share": "link",
"notification.mentioned": "at",
"notification.group_mentioned": "users",
"notification.quoted": "quote-right",
"notification.replied": "reply",
"notification.posted": "reply",
"notification.edited": "pencil-alt",
"notification.bookmark_reminder": "discourse-bookmark-clock",
"notification.liked": "heart",
"notification.liked_2": "heart",
"notification.liked_many": "heart",
"notification.liked_consolidated": "heart",
"notification.private_message": "far-envelope",
"notification.invited_to_private_message": "far-envelope",
"notification.invited_to_topic": "hand-point-right",
"notification.invitee_accepted": "user",
"notification.moved_post": "sign-out-alt",
"notification.linked": "link",
"notification.granted_badge": "certificate",
"notification.topic_reminder": "far-clock",
"notification.watching_first_post": "discourse-bell-one",
"notification.group_message_summary": "users",
"notification.post_approved": "check",
"notification.membership_request_accepted": "user-plus",
"notification.membership_request_consolidated": "users",
"notification.reaction": "bell",
"notification.votes_released": "plus",
"notification.chat_quoted": "quote-right",
};
참고: discourse/icon-library.js at main · discourse/discourse (github.com)
다른 테마 컴포넌트를 자유롭게 생성하여 Customization > Theme component 카테고리에 공유해 주세요!
이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안해 주세요.
