버튼에 들어간 아이콘의 크기가 아이콘 컴포넌트의 기본 크기와 다를 때, 이를 효율적으로 관리하는 방법이 궁금합니다.
답변
아이콘 컴포넌트의 기본 크기와 다른 크기의 아이콘이 필요한 경우, 다음과 같은 방법으로 효율적으로 관리할 수 있습니다.
아이콘 컴포넌트의 스케일링: 먼저, 아이콘 자체의 메인 컴포넌트는 `Scale` 제약 조건(Constraints)을 사용하여 크기 조절에 유연하게 대응할 수 있도록 설정합니다. 이렇게 하면 인스턴스에서 크기를 자유롭게 조절할 수 있습니다.
버튼 컴포넌트의 Variants 활용: 다양한 크기의 아이콘이 들어가는 버튼을 만들 때는, 버튼 컴포넌트 세트 내에서 `Variants`를 활용하여 관리하는 것이 좋습니다. 예를 들어, 'Size' 속성을 가진 Variant를 만들어 `Size=Large` (24px 아이콘 포함)와 `Size=Small` (16px 아이콘 포함) 등으로 구분할 수 있습니다.
Auto Layout과 함께 사용: 버튼 컴포넌트에 Auto Layout을 적용하고, 아이콘 인스턴스의 크기를 고정(Fixed)으로 설정하여 원하는 크기(예: 24px 또는 16px)를 지정하면, 버튼의 패딩이나 다른 요소들이 자동으로 조정되어 일관된 디자인을 유지할 수 있습니다.