해당 지침(Replace Discourse's default SVG icons with custom icons in a theme)에 따라 사이드바를 열거나 닫을 때 사용되는 bars 아이콘을 교체하려고 시도하고 있지만, 잘 되지 않고 있습니다.
사용하고 싶은 사이드바 아이콘(프로 FontAwesome 아이콘이라 흐리게 처리함)으로 스프라이트 시트를 만들었습니다.
컴포넌트를 생성하고 스프라이트 시트를 업로드했습니다:
다음 코드를 사용했습니다(데스크톱에서만 변경되기를 원합니다)
하지만 아이콘이 전혀 표시되지 않습니다:
아무런 아이디어가 있을까요? 분명 제가 놓치고 있는 사소한 실수일 것 같습니다! 감사합니다!
대신 소문자 자산 파일명(예: npn_spritesheet.svg)을 사용해 보셨나요?
그렇지 않다면, 동작해야 할 것 같습니다(v5 아이콘으로는 쉽게 할 수 있지만, v6 pro 아이콘이 없기 때문입니다).
아니면, 이것이 단순히 이유일 수도 있습니다:
사이트 로고 왼쪽의 <span class="header-sidebar-toggle"> 요소를 검사하면 무엇이 보이나요?
예를 들어, symbol 태그에 viewbox가 선언되어 있지 않으면 아이콘이 화면 밖에 있을 수 있습니다.
..아이콘 코드를 보려면 svg 요소와 모든 중첩 요소를 확장해야 합니다.
따라서 스프라이트 시트의 아이콘 코드가 렌더링되지 않습니다. 아이콘의 id를 대시(-)가 없는 이름, 예를 들어 npnsidebar로 변경해 보는 것도 방법입니다. 테마에서 변수 이름과 관련된 문제를 가끔 겪는데, 그 근본 원인을 파악하지 못해도 작은 조정으로 해결되는 경우가 있습니다.
그렇지 않으면 SVG 파일을 공유해 주셔도 됩니다. 실제 코드를 픽셀 처리하신 것 같지만, 라이브 사이트에서 사용하게 되면 결국 공개적으로 접근 가능해지므로요. (수정: 아, 프로 플랜에서 가져온 거였군요..)
감사합니다. 스프라이트시트와 코드에서 이름을 npnsidebar로 변경해 보았지만, 스프라이트시트를 제대로 교체할 수 있었음에도 불구하고 문제가 해결되지 않았습니다. 제 작업을 다시 확인해 주실 수 있도록 스프라이트시트와 SVG 파일을 다이렉트 메시지로 보내 드릴 수 있습니다. 도움을 주셔서 감사합니다!
어제 기본 아이콘(코드 아이콘)으로 이렇게 교체해 봤는데 작동했기 때문에, 말씀하신 대로 viewBox 속성 문제인 것 같습니다.
