대체 아이콘

문서 개발자 가이드
,
1

기본적으로 Discourse는 훌륭한 FontAwesome 라이브러리에서 아이콘을 번들링합니다. 하지만 무료 사용이 가능한 아이콘 라이브러리는 많이 있습니다. 이 주제는 대체 아이콘 세트의 집합소입니다. 지금 바로 시도해 볼 수 있는 테마 컴포넌트를 나열하는 동시에, Discourse가 다른 아이콘 세트를 지원하도록 기여하는 방법에 대해서도 설명합니다.

대체 아이콘 세트

다른 아이콘 세트를 시도해 보려면, 다음 목록의 테마 컴포넌트를 사용해 볼 수 있습니다:

(이 저장소 중 하나를 Discourse 사이트에 설치하는 방법은 테마 또는 테마 컴포넌트 설치 방법을 참고하세요.)

이 컴포넌트들은 아직 개발 중인 상태입니다. 사용할 수는 있지만, 코어 아이콘 중 일부는 적절한 대체 아이콘이 없을 수 있습니다. (다만, 아래에 설명된 대로 기여는 환영합니다.)

일부 스크린샷:

image
image1824×1158 41.6 KB

Feather 아이콘 (WCAG Dark 색상 스킴 사용)

image
image1926×1282 41.8 KB

Heroicons (WCAG Light 색상 스킴 사용)

image
image1732×1256 42 KB

Unicons (Grey Amber 색상 스킴 사용)

image
image1726×1256 43.1 KB

Phosphor Duotone (WCAG Light 색상 스킴 사용)

기여하기

테마 개발자와 디자이너분들을 위한 섹션입니다.

위에서 나열된 컴포넌트들은 discourse-alt-icons 유틸리티 저장소를 사용하여 생성됩니다. 이 저장소는 Discourse 코어의 아이콘을 다른 오픈소스 아이콘 세트의 아이콘으로 교체하는 과정을 단순화합니다. 이 저장소의 핵심은 아이콘 이름 매핑 JSON 파일로부터 테마 컴포넌트를 생성하는 빌드 스크립트입니다.

기여는 환영하며 장려됩니다. Discourse는 FontAwesome의 아이콘을 많이 사용하며, 다른 아이콘 세트에서 매칭을 찾는 것은 재미있는 작업이지만 시간이 많이 걸립니다. 도움이 되고 싶다면 discourse-alt-icons를 가져와(readme의 단계를 따르세요) 아직 매칭이 없는 아이콘에 대한 매칭을 추가할 수 있습니다.

다른 아이콘 세트 지원

다른 아이콘 세트에 대한 지원을 추가하려면 아래 답변을 이용해 제안해 주세요. 또는, 조금만 노력하면 discourse-alt-icons 저장소에 풀 리퀘스트를 보낼 수도 있습니다. 참고로, 매우 관대한 라이선스(즉, 수정, 배포, 개인 사용을 허용해야 함)를 가진 아이콘 세트만 고려됩니다.

이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안해 주세요.

30개의 좋아요
Harmonizing Discourse icons and emojis
2

아이콘 세트를 기여하고 싶지만 아직 정해진 것이 없는 분들을 위해:

MIT 라이선스로 제공되며, tailwindlabs.com 팀에서 디자인했습니다.

4개의 좋아요
3

도움이 되길 바랍니다. 사용할 수 있는 아이콘을 몇 가지 소개합니다.

https://www.flaticon.com/

4

좋은 제안이에요. 이걸 추가해서 원포스트에 스크린샷도 업데이트했습니다. 아이콘이 아주 많지는 않아요. 예를 들어, 작성 도구 모음에는 아이콘이 없지만, 있는 아이콘들은 꽤 깔끔합니다. 감사합니다!

2개의 좋아요
5

이것은 Google Fonts가 불가능하다는 뜻인가요?

6

구글의 Material Icons 라이선스는 충분히 관대합니다. 하지만 저장소가 매우 방대해서 각 아이콘의 경로를 찾는 데 시간이 많이 걸릴 수 있습니다.

1개의 좋아요
7

네, 하지만 한 번만 하면 다시 할 필요가 없어요. :slight_smile:

1개의 좋아요
8

혹시 Phosphor Regular Icons도 함께 받을 수 있을까요?

2개의 좋아요
9

조금만 손보면, 여러분(또는 누구든)이 듀오톤 리포지토리를 기반으로 Phosphorus Regular 리포지토리를 만들 수 있을 겁니다. 리포지토리가 준비되면 검토하고 여기에 있는 목록에 포함해 드리겠습니다.

2개의 좋아요
10

정말 멋진 아이디어네요. FontAwesome가 좀 추하니까 /admin에서 기본적으로 아이콘 세트 목록을 제공하는 게 좋겠어요. :ok_man:

11

추잡함은 취향의 문제입니다. 하지만 요즘 Font Awesome이 제공하는 무료 아이콘은 정말로 제한적입니다.

다른 한편으로 — 실제로 몇 개의 아이콘이 괜찮아 보이나요? :joy:

13

어떤 세트를 불러올 때, 누락된 아이콘이 기본 Font Awesome 아이콘으로 대체되지 않는 것 같습니다. 그래서 그냥 빈 공간으로 보이는데, 사용성이 좋지 않네요… :thinking:

feather 세트를 좋아하지만, 유용한 아이콘이 많이 부족합니다.

저는 저장소에 PR을 올렸습니다. 일부 변경 사항은 완벽하지가 않지만, 나쁜 아이콘이 아이콘이 전혀 없는 것보다는 낫습니다 :smiling_face_with_tear:

새로 추가된 모든 아이콘을 여기에 올립니다 (코딩을 대충 해서 만든 페이지, “대안” 열은 최신 상태가 아님)
https://canapin.dev/discourse/feather-icons/

주요 변경 사항과 그다지 만족스럽지 않은 변경 사항들:

image
신용카드 아이콘이 모양 면에서 address-card와 가장 비슷합니다. 다른 대안으로는 닫힌 책이나 열린 책이 될 수 있겠죠…

image
제 생각에는 crosshair가 가장 좋습니다. 단순한 펜 아이콘도 모양이 꽤 비슷하지만, 이건 펜이고 이미 편집용으로 사용 중이기도 합니다.

image
비슷한 아이콘이 없습니다. 제 의견으로는 CPU 아이콘이 가장 잘 어울립니다. 제 PR에서 실수로 Zap 아이콘을 사용했는데, 이 문제를 해결하기 위해 다른 PR을 보내겠습니다.

2개의 좋아요
14

방금 Lucide 아이콘을 발견했습니다:

이것은 최신 상태로 유지되는 Feather의 포크입니다. Feather에는 아이콘이 287개만 있는 반면, Lucide에는 1,701개(물론 빠진 아이콘 대부분 또는 전부가 포함되어 있음)가 있습니다.

두 세트 모두 MIT 라이선스 하에 있습니다.

따라서 이 경우 Feather 지원은 중단하고 Lucide로 교체해야 한다고 생각합니다.

제 풀 리퀘스트는 이제 의미가 없어 보입니다 :lolsob:

팀이 승인해 주신다면 이 아이콘 세트를 위한 저장소를 만들어 볼 수도 있겠습니다…

3개의 좋아요
15

상관없는 이야기인데, https://canapin.dev에 접속해서 맨 아래로 스크롤한 뒤 Virtualmin 포럼을 클릭하면 Discourse :discourse: 였습니다!

1개의 좋아요
16

디스코어용 Lucide 아이콘 세트의 거의 전부를 만들었지만, 디스코어 코어에서 사용하는 아이콘의 전체 목록을 어디서 찾을 수 있을까요? 아이콘을 하나도 놓치지 않고 모두 확인하고 싶습니다.

이 템플릿 discourse-alt-icons/mappings/template.json at main · discourse/discourse-alt-icons · GitHub 에는 일부가 빠져 있습니다. 예를 들어 팔레트 같은 경우입니다.

17

이 파일이 도움이 될 수 있습니다.

플러그인과 컴포넌트는 추가 아이콘을 등록할 수 있습니다. 거기서 인기 있는 아이콘을 찾는 방법은 정확히 모르겠습니다. #included-in-core에 포함된 플러그인들을 살펴보는 것이 의미가 있을 수 있습니다. 따라서 Code search results · GitHub 와 같은 쿼리로 검색하면 작동할 수 있습니다.

1개의 좋아요
18

레포지토리는 다음과 같습니다:

공식 플러그인으로 등록해 주셔도 좋습니다.

Font-Awesome

image
image2560×1271 263 KB

Lucide

image
image2560×1271 265 KB

3개의 좋아요
19

설정에서 다른 아이콘을 추가할 수 있나요? 신문, 마이크, 게임패드 아이콘이 없는 것 같습니다.

20

네. 컴포저의 font-size 아이콘도 수정해야 합니다.

수정: 제가 오해한 것 같고, 컴포넌트 외부에서 새로운 세트 중 하나로 discourse 아이콘을 교체할 수 있는지 확실하지 않습니다. :thinking:

1개의 좋아요
21

아, 물론이죠.

Discourse에 포함된 아이콘의 전체 목록을 보려면 Discourse 인스턴스에서 /styleguide로 이동하세요.

출처: GitHub - discourse/discourse-alt-icons · GitHub

아, AI가 저를 이렇게 만든 거구나. 이제 RTFM(Read The F***ing Manual)조차 안 하고 있네요 :person_facepalming:

/styleguide나 discourse/lib/svg_sprite.rb at main · discourse/discourse · GitHub 에서도 찾을 수 없습니다. Discourse의 어디에서 이 아이콘들이 사용되고 있나요?

3개의 좋아요