CSS로 d-icon 아이콘 변경

개발
1

여러분 안녕하세요!

Discourse Follow 의 스타일링을 하던 중, 다음 요소에 대한 변경을 고려하기 시작했습니다.

button[aria-label="Follow"] 또는 button[aria-label="Following"]

CSS를 통해 아이콘을 변경할 수 있는 방법이 있는지 아시는 분이 있을까요? 이렇게 하면 “user-plus”(팔로우)에서 “user-check”(팔로잉)으로 아이콘을 변경하는 것이 가능할 것 같습니다.

Screen Shot 2020-11-13 at 11.56.36
Screen Shot 2020-11-13 at 11.56.36138×108 726 Bytes

Screen Shot 2020-11-13 at 11.54.03
Screen Shot 2020-11-13 at 11.54.03934×336 16.2 KB

여러분이 제게 도움을 줄 수 있기를 바랍니다!

감사합니다,
Felipe

수정(해결 방법):
우와! user 객체 참조를 조작했습니다.

{{follow-toggle icon=(if user.following 'user-check' 'user-plus') user=user}}

Screen Shot 2020-11-13 at 12.07.31
Screen Shot 2020-11-13 at 12.07.31696×248 11.8 KB

다시 한번 감사합니다!!

4

@feabila, 정말 좋은 아이디어네요.

정말 훌륭해서, 이미 그 내용 중 일부를 저장소에 커밋해 두었습니다:

잘하셨네요! :+1: :tada:

실제로는 제안하신 대로 기능적으로는 유지하되, 기존 Computed Property에 의존하도록 단순화할 예정입니다:

대안 구현에 관심이 있으시다면 확인해 주시면 좋겠습니다.

감사합니다!