기존 SVG 아이콘을 사용자 지정 아이콘으로 교체하는 방법?

개발
1

좋아요 아이콘을 엄지손가락으로 변경하는 컴포넌트에 관한 스레드에 이 질문을 올렸습니다. 이 주제를 다시 꺼내 죄송하지만, 정말로 당황스러운 상태입니다.

원하는 것은 여기의 맞춤형 좋아요 아이콘을 사용하는 것입니다 - Font Awesome에서 아웃라인 버전을 안 좋아요 아이콘으로 사용하려는 것입니다. 이것이 가능한가요? Pro 아이콘이므로 다운로드를 해야 하는지, 아니면 직접 만들어 커스텀 아이콘이나 이모지로 추가한 후 좋아요 아이콘 컴포넌트에 적용해야 하는지 모르겠습니다. 어떻게 해야 하는지도 모르겠네요.

Change Like Icon 컴포넌트를 설치하여 사용하지 않는 테마에서 테스트해 보았고, 의도대로 작동합니다.

컴포넌트를 사용하면서 나만의 커스텀 아이콘을 가질 수는 없을 것 같다는 추측을 하고 있습니다. 엄지손가락이 모든 것을 덮어쓰는 것 같거든요. 그래서 컴포넌트를 제거하고 해당 테마의 커스텀 HTML 헤더 영역에 이 코드를 추가했습니다.

  api.replaceIcon('d-liked', 'fa-pig');
  api.replaceIcon('d-unliked', 'fal-pig');
  api.replaceIcon('notification.liked', 'fa-pig');
  api.replaceIcon('notification.liked_2', 'fa-pig');
  api.replaceIcon('notification.liked_many', 'fa-pig');
  api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
  api.replaceIcon('d-unliked', 'fal-pig');
  api.replaceIcon('notification.liked', 'fa-pig');
  api.replaceIcon('notification.liked_2', 'fa-pig');
  api.replaceIcon('notification.liked_many', 'fa-pig');
  api.replaceIcon('notification.liked_consolidated', 'fa-pig');      
  api.replaceIcon('heart', 'fa-pig');

SVG 아이콘 서브셋에 fa-pig와 fal-pig를 추가했지만 미리보기에서 좋아요 아이콘이 비어 있습니다. 실제로 돼지 아이콘이 설치되어 있지 않아서 그런 것 같습니다. 그래서 무료라고 알려진 돼지 저금통 아이콘을 시도해 보고 아이콘 서브셋에 추가했는데, 역시 좋아요 아이콘이 비어 있습니다.

분명 제가 무언가를 잘못하고 있는 것입니다. 이 테스트 테마에 이름을 icons-sprite로 하는 SVG 에셋을 업로드해 봤는데, 하나는 업로드할 수 있지만 동일한 Icons-sprite 변수 이름으로 두 개의 다른 업로드를 올릴 수는 없습니다. 어쨌든 하나의 업로드만 해도 여전히 비어 있습니다.

저는 IT 분야에서 일하지만, 이 고급 백엔드 Discourse 관련 프로그래밍은 초보자에 불과합니다.

도움이 되면 좋겠습니다. 감사합니다.

2

저는 그쪽에 전문가가 아니에요…

아마 Discourse FontAwesome Pro 를 참고해 보세요.

3

piggy-bank 아이콘은 작동해야 하지만, SVG 아이콘 하위 집합 사이트 설정과 JS 오버라이드 함수에 접두사(prefix) 없이 추가해야 합니다.

Pro 아이콘은 코어에 포함되지 않으므로, Pro 전용 pig 아이콘의 경우 위에 Jay가 제안한 플러그인을 사용하거나 직접 스프라이트를 만들 수 있습니다. OP에 링크된 예시 SVG 스프라이트 파일을 꼭 확인하세요. 스프라이트는 심볼과 ID를 포함한 특정 구조가 필요하며(그리고 JS API 호출에서는 이 ID를 사용합니다).

4

그래서 다시 시도해서 ‘piggy-bank’ 아이콘을 SVG 아이콘 서브셋에 추가했습니다. JS를 헤더에 다시 넣고 'Piggy-Bank’를 참조했는데, 마침내 제대로 작동했습니다! 감사합니다! 그런데 그 특정 아이콘의 유일한 문제는 좋아요를 누른 게시물과 누르지 않은 게시물이 똑같이 보이는 것입니다. 좋아요를 누르지 않은 게시물용 아웃라인 버전이 없거든요. Font Awesome 사이트를 다시 열어서 보니 아이콘의 아웃라인 버전은 PRO 전용이라는 걸 알게 되었습니다. 그래서 그 아이디어는 무산되었네요. 연간 100달러를 1개 아이콘에 쓰기는 어렵습니다. 우리는 비영리 단체이고 회원 가입비를 받지 않으니까요.

그래서 결국 제 아이콘을 직접 만들어야 할 것 같습니다. 그 설명서를 다시 한번 확인해 보겠습니다.

5

둘 다 추가하신 건가요? (제가 여러분이 하시는 일을 해본 적이 없어서 이 답변이 도움이 되지 않을 수도 있습니다). 좋아요를 누를 때 엄지손가락을 위로 치켜드는 효과를 만들어주는 테마 컴포넌트가 있으니, 좋아요 상태를 변경하는 데 필요한 모든 것을 추가하고 있는지 확인해 보시는 게 좋겠습니다. (아니면 그 아이콘이 아예 작동하지 않는 것일 수도 있고요.)

6

네, 그래서 직접 만들어 보려고 몇 가지 시도를 해봤습니다. 불행히도, OP(첫 게시물)에서 SVG 스프라이트 파일의 포맷 예시를 보여준 링크는 빈 페이지일 뿐이어서 로딩이 되지 않습니다. 그래서 제 식대로 해보았습니다. Illustrator에서 SVG 두 개를 모두 생성하고 내보낸 후, Chrome으로 열어 '요소 검사’를 통해 경로(Path) 파일 정보를 가져왔습니다.

저는 Mac을 사용하므로 TextEdit을 열어 스프라이트 파일에 들어가야 할 것으로 생각되는 정보를 복사해 넣었습니다. 그런 다음 확장자를 svg로 변경했습니다. 테마에 업로드하고 JS 코드를 헤더에 추가했습니다.

다시 한번 말하지만, 이 과정이 올바른지 확신이 서지 않으며, 사이트 테마를 미리 볼 때 사이트가 완전히 충돌하기 때문에 아마도 그렇지 않을 것 같습니다. 'Ooops Error - 이 토론 포럼을 구동하는 소프트웨어에서 예상치 못한 문제가 발생했습니다.'라는 오류가 표시됩니다. 업로드한 아이콘 스프라이트 SVG를 제거하고 잠시 기다리면 사이트가 다시 정상적으로 로드됩니다.

아래는 파일의 SVG 정보와 JSON 코드입니다.

감사합니다!

관심 있는 분들을 위해 Google Drive에 스프라이트 파일을 올려두었습니다 - Drive

그리고 코드입니다 -

Screen Shot 2021-03-19 at 4.32.51 PM
Screen Shot 2021-03-19 at 4.32.51 PM499×408 30.8 KB

7

icons-sprite를 두 번 추가하면 안 됩니다.

SVG 경로를 코드 블록으로 게시해 주시겠어요? 아이콘을 스프라이트에 넣는 과정에서 문제가 발생하는 것 같은데, 그 부분은 도와드릴 수 있습니다.

8

감사합니다! 이 내용이 찾고 있는 것인가요?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ViewBox and Polygon taken from "SVGpig.svg" -->
  <symbol id=“ids-SVGpig” width="616px” height="425px”  viewBox="0 0 616 425">
    <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233    c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456    c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4    c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93    c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03    c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062    c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C86.532,113.189,82.366,121.266,77.21,126.644z"/>
  </symbol>

  <!-- ViewBox and Polygon taken from “SVGpigout.svg" -->
  <symbol id=“ids-SVGpigout”  width="621px" height="430px" viewBox="0 0 621 430">
    <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405    c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942    c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525    c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935    c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882    l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759    c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449    c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499    c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354    c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453    c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92    c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784    c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907    C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033    c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159    c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658    c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755    c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562    c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624    C89.532,115.189,85.366,123.266,80.21,128.644z"/>
  </symbol>


</svg>
9

Discourse Gifs는 예시로 사용할 수 있는 사용자 지정 GIF 아이콘을 제공합니다:

10

음, 이걸 사용해보세요: Dropbox

저는 d-liked에 replaceIcon 호출만 추가했습니다. 다른 줄들은 인스턴스에서 해당 컴포넌트를 직접 편집해서 추가해야 합니다. svg 파일에 있는 ID를 사용하도록 하세요. 지금은 단순히 SVGpig와 SVGpigout입니다.

11

훌륭합니다! 감사합니다, 잘 작동했습니다. 이제 정상적으로 실행 중입니다. 우리 커뮤니티가 정말 감사해합니다. 정말 감사합니다!!

Screen Shot 2021-03-25 at 12.29.27 PM
Screen Shot 2021-03-25 at 12.29.27 PM304×121 5.13 KB