iconify 에서 icon size 변경 방법

서론

iconify 에서 icon을 사용하고 있었는데 크기를 조절하는 상황이였다.

icon-size

여러가지 방법이 있었는데 그 중에서 나는 style="font-size: 32px;" 를 이용하여 tag 안에 속성을 추가해주었다. 다른 방법을 써보기도 했는데 왜 안먹히는지는 의문 😥

<p>Sample wide icon: "fa-battery-3". Default dimensions: 2304x1280.</p>
<p>Sample square icon: "ion-ios-refresh". Default dimensions: 512x512.</p>
<p>Sample thin icon: "whh-business". Default dimensions: 386x1024.</p>
<p>
   1em height:
   <iconify-icon data-icon="fa-battery-3"></iconify-icon>
   <iconify-icon data-icon="ion-ios-refresh"></iconify-icon>
   <iconify-icon data-icon="whh-business"></iconify-icon>
</p>
<!--
 Correct usage: multiple ways to set height to 32px, width to dynamic value.
-->
<br />
<p>
   32px height (attribute):
   <iconify-icon data-icon="fa-battery-3" data-height="32"></iconify-icon>
   <iconify-icon data-icon="ion-ios-refresh" data-height="32"></iconify-icon>
   <iconify-icon data-icon="whh-business" data-height="32"></iconify-icon>
</p>
<p>
   32px height (inline style with font-size):
   <iconify-icon
       data-icon="fa-battery-3"
       style="font-size: 32px;"
   ></iconify-icon>
   <iconify-icon
       data-icon="ion-ios-refresh"
       style="font-size: 32px;"
   ></iconify-icon>
   <iconify-icon
       data-icon="whh-business"
       style="font-size: 32px;"
   ></iconify-icon>
</p>
<p>
   32px height (css with font-size):
   <iconify-icon class="font-32" data-icon="fa-battery-3"></iconify-icon>
   <iconify-icon class="font-32" data-icon="ion-ios-refresh"></iconify-icon>
   <iconify-icon class="font-32" data-icon="whh-business"></iconify-icon>
</p>
<!--
 Incorrect usage: setting height with inline style or stylesheet, but not setting width.
-->
<br />
<p>Examples of incorrect usage:</p>
<p>
   32px height (inline style with height):
   <iconify-icon data-icon="fa-battery-3" style="height: 32px;"></iconify-icon>
   <iconify-icon
       data-icon="ion-ios-refresh"
       style="height: 32px;"
   ></iconify-icon>
   <iconify-icon data-icon="whh-business" style="height: 32px;"></iconify-icon>
</p>
<p>
   32px height (css with height):
   <iconify-icon class="height-32" data-icon="fa-battery-3"></iconify-icon>
   <iconify-icon class="height-32" data-icon="ion-ios-refresh"></iconify-icon>
   <iconify-icon class="height-32" data-icon="whh-business"></iconify-icon>
</p>

결론

icon 사이즈 조절하는 방법을 구글에 검색해봤는데 아이콘 사이트마다 방법이 다른 것 같다. fontawesome, iconify , material icon 등등 .. 그래서 잘 찾아서 검색해야 하는게 중요함!

출처 : https://docs.iconify.design/implementations/iconify1/custom-dimensions.html