tailwind와 ionicons를 같이 쓰는 법.

요즘 tailwind의 매력에 푹 빠져있다. 기존에 쓰고 있던 ionicons를 같이 쓰고 싶어서, 사용법에 대해 구글링을 하였지만, 찾지를 못하였다.

 

이 글은 공식적인 사용 방법이 아닌 내가 찾은 사용법을 설명하고자 한다. 이로 인해 문제가 생긴다면 책임은 못 집니다.

 

먼저 Ionicons는 아래 사이트에서 이용 가능합니다.

https://ionic.io/ionicons

Ionicons: The premium icon pack for Ionic Framework

 

ionicons를 tailwind와 사용하기 위해서 기존 tailwind 방식대로  className에 코드를 넣으면 작동을 하지 않는다.

<ion-icon name="add-circle" className="text-3xl"></ion-icon>

console에 확인해보니, classname이 class로 변경되지 않고 그대로 나와서 그런 것 같다.

Icon의 class에 보면 md와 hydrated가 있다.

 

왠지 이걸 같이 기입하면 되지 않을까 해서 다음과 같이 기입하였더니 동작을 한다.!

<ion-icon name="add-circle" class="md hydrated text-2xl"></ion-icon>

tailwind 적용 전 적용 후

즉, tailwind에 ionicon을 쓰려면 class attribute에 md와 hydrated를 기입하면 된다. 

 

좋은 방법인지는 모르겠으나, 혹시 다른 방법 아시면 댓글 감사하겠습니다.