안녕하세요 
이 주제에는 두 가지 테마 구성 요소가 포함되어 있습니다.
Discourse Easy SVG Icon CSS
이 테마 구성 요소는 템플릿으로 기능하므로, Github에서 포크하거나 코드를 프로젝트에 사용해 주세요. SCSS에서 사용하지 않는 아이콘 SVG 코드를 삭제하고 실제로 사용하는 것만 유지할 수 있습니다…
mixin파일을common.scss파일에 가져왔으므로, 해당 줄 아래에 코드를 추가하거나 데스크톱 또는 모바일 섹션에 별도로 추가할 수 있습니다.
이 테마 구성 요소는 CSS에서 SVG 아이콘을 유지보수하고 쉽게 편집할 수 있는 기능을 추가합니다. 이 구성 요소에는 다음에서 찾을 수 있는 모든 SVG 아이콘이 포함되어 있습니다: discourse/vendor/assets/svg-icons/fontawesome at main · discourse/discourse · GitHub
사용 방법
고정 매개변수:
$icon-set: brands, regular, solid
$icon-name: 아이콘 이름
$icon-color: 아이콘 색상 (currentColor, hex 또는 색상 변수)
$width and $height: 추가된 아이콘의 크기
다음과 같이 보입니다:
@include svg-icon($icon-set, $icon-name, $icon-color, $width, $height);
currentColor 사용
Latest 내비게이션 바 항목 앞에 solid 로켓 아이콘을 추가하는 예시입니다.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(solid, rocket, currentColor, 1em, 1em);
}
}
}
}
}
var(--gold) 색상 변수 사용
Top 내비게이션 바 앞에 regular 금성 아이콘을 추가하는 예시입니다.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include svg-icon(regular, star, var(--gold), 1em, 1em);
}
}
}
}
}
호버 시 아이콘 세트, 색상 또는 아이콘 자체를 쉽게 변경할 수 있습니다… 확인해 봅시다!
이제 버튼을 호버할 때 regular 아이콘을 solid로 변경합니다.
#navigation-bar {
li.nav-item {
&_top {
a {
gap: 0.5em;
&:hover,
&:focus,
&.active {
&:before {
@include svg-icon(solid, star, currentColor, 1em, 1em);
}
}
&:before {
content: "";
@include svg-icon(regular, star, currentColor, 1em, 1em);
}
}
}
}
}
Discourse Easy Emoji CSS
mixin파일을common.scss파일에 가져왔으므로, 해당 줄 아래에 코드를 추가하거나 데스크톱 또는 모바일 섹션에 별도로 추가할 수 있습니다.
사용 방법
사용법은 SVG 버전과 유사합니다.
고정 매개변수:
$emoji-set: apple, google, twitter, win10, google_classic, facebook_messenger
$emoji-name: 이모지 이름
$width and $height: 추가된 이모지의 크기
@include emoji($emoji-set, $emoji-name, $width, $height);
Latest 앞에 facebook_messenger rocket 이모지와 Top 앞에 twitter star 이모지를 추가하는 예시입니다.
#navigation-bar {
li.nav-item {
&_latest {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(facebook_messenger, rocket, 1em, 1em);
}
}
}
&_top {
a {
gap: 0.5em;
&:before {
content: "";
@include emoji(twitter, star, 1em, 1em);
}
}
}
}
}
결국 성공하셨나요? 이 기능을 사용하고 싶은 구체적인 사용 사례가 있나요? 세부 정보를 공유해 주시면, 설정으로 쉽게 수정할 수 있도록 해당 기능을 기반으로 별도의 테마 컴포넌트를 만들어드릴 수 있습니다.
.
