아이콘을 전역으로 변경

문서 개발자 가이드
22

네, 이 가이드를 따르세요: Replace Discourse's default SVG icons with custom icons in a theme

2개의 좋아요
23

부탁드립니다. 저도 같은 질문이 있습니다.

기본적으로 Discourse는 게시물 하단의 링크 아이콘을 “공유” 버튼으로 사용합니다(단순 링크가 아니라 소셜 미디어 공유 기능도 제공하죠). 그런데 에디터에서는 같은 아이콘을 링크 편집에 사용하고 있습니다.

이 둘은 기능이 다르므로 아이콘도 달라야 합니다. 아니면 게시물 에디터의 전역 설정을 덮어쓰는 방법이 있다면 알려주시면 감사하겠습니다.

2개의 좋아요
24

최근 좋아요 아이콘을 "heart"에서 "book-reader"로 변경했습니다.

알림의 드롭다운 목록에 있는 아이콘을 제외한 모든 좋아요 아이콘을 성공적으로 변경했습니다.

Capture166

다음과 같이 헤더를 사용하여 생각할 수 있는 모든 옵션을 추가했습니다:

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  // 알림 
        api.replaceIcon('notification.liked_2', 'book-reader');  // 알림 
        api.replaceIcon('notification.liked_many', 'book-reader');  // 알림 

    </script>

알림 드롭다운 목록을 제외한 플랫폼의 모든 곳에서 하트가 교체되었습니다…

어떤 생각이 드시나요?

1개의 좋아요
25

아래도 추가해 보세요

api.replaceIcon('notification.liked_consolidated', 'book-reader');

1개의 좋아요
26

답변해 주셔서 감사합니다, Daniela님!

추가했는데도 여전히 변화가 없습니다. 하트가 여전히 알림 아이콘으로 표시되고 있습니다.

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  
        api.replaceIcon('notification.liked_2', 'book-reader');  
        api.replaceIcon('notification.liked_many', 'book-reader');  
        api.replaceIcon('notification.liked_consolidated', 'book-reader');  

    </script>

이 인스턴스를 제외하면, book-reader 아이콘이 모든 곳에서 하트 아이콘을 대체했습니다.

아이콘 충돌일 것 같아서, 알림에서 해당 아이콘을 사용할 수 있다는 것을 알고 있으므로 "book-reader"를 "pencil"로 변경해 보았습니다. 하지만 작동하지 않았고, 여전히 하트로 표시됩니다.

어떤 생각이 드시나요?

27

envelope 아이콘을 inbox 아이콘으로 교체하려고 했는데, 사용자 메뉴 패널 안의 아이콘에는 변경 사항이 적용되지 않습니다. 특정 방식으로 지정해야 하나요?

제 스니펫:

// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("envelope", "inbox");
});
28

안녕하세요 @jrgong :waving_hand:

알림이 포함된 아이콘 대체 항목을 여기서 찾을 수 있습니다.

다음 줄을 스니펫에 추가하세요:

api.replaceIcon("notification.private_message", "inbox");
1개의 좋아요