Tag Icons

[TheBestPessimist]

불릿 태그 + 태그 색상

불릿 스타일 태그를 사용하면서

• _태그 아이콘_과 _태그 텍스트_의 색상을 동일하게 설정하고 싶거나
• _태그 아이콘_이 설정되지 않은 경우에만 불릿을 표시하고 싶다면

books와 science-fiction 태그에 대해 제가 적용한 방법은 다음과 같습니다:

최종 결과:

1. Tag icons 컴포넌트 설정 (이 컴포넌트)

2. Tag Icons와 동기화되어야 하는 보조 컴포넌트 설정
   이 컴포넌트에서는 다음 두 가지를 수행합니다:
   1. 특정 태그에 대한 불릿 숨기기
   2. 아이콘과 동일한 색상으로 태그 텍스트 색상 설정

이것이 작동하려면 새로운 테마 컴포넌트인 Tag Icons extra를 생성합니다.
Common/CSS section에서:

1. 다음 믹신을 추가합니다 (한 번만 필요함):

@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}

2. 수정하려는 각 태그에 대해 아래 내용을 붙여넣고 REPLACEMETAG를 태그 이름으로, REPLACEMECOLOR를 아이콘과 동일한 색상으로 교체하세요:

[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}