질문사항
아이콘 버튼 컴포넌트에서 아이콘 디자인을 변경하거나 추가한 후, 다른 프로젝트에서 해당 컴포넌트의 기본 아이콘을 다른 아이콘으로 변경하거나 `disabled` 상태로 설정했을 때 아이콘 색상이 적용되지 않습니다. 이 문제의 원인이 무엇일까요?
답변
아이콘 컴포넌트에서 색상이 제대로 적용되지 않는 문제는 여러 가지 원인이 있을 수 있지만, 주로 아이콘 자체의 구조나 컴포넌트 설정과 관련이 있습니다.
확인해볼 사항:
아이콘의 벡터 구조: Flatten (오브젝트화) 여부: 아이콘이 `Flatten` (오브젝트화) 되어 단일 벡터 레이어로 되어 있는지 확인하세요. 여러 개의 레이어나 그룹으로 복잡하게 구성되어 있으면 색상 오버라이드가 제대로 작동하지 않을 수 있습니다. Fill 속성: 아이콘의 각 벡터 레이어에 `Fill` 속성이 적용되어 있는지 확인하세요. `Stroke`만 있거나 `Fill`이 없는 경우 색상 변경이 어렵습니다. 색상 스타일 연결: 아이콘 내부의 `Fill` 색상이 디자인 시스템의 색상 스타일(Color Style)에 연결되어 있다면, 해당 스타일이 올바르게 정의되어 있고 컴포넌트에서 오버라이드 가능한 상태인지 확인해야 합니다.컴포넌트의 색상 오버라이드 설정: 색상 변수/스타일 연결: 아이콘 컴포넌트의 `Fill` 속성이 `Variables`나 `Color Styles`에 연결되어 있고, 이들이 `disabled` 상태에 따라 적절히 변경되도록 설정되어 있는지 확인하세요. Variant 속성: `disabled` 상태를 `Variant`로 관리하고 있다면, 해당 `disabled` Variant 내의 아이콘 `Fill` 색상이 올바르게 설정되어 있는지 확인해야 합니다. Nested Instance: 아이콘이 중첩된 인스턴스(Nested Instance)인 경우, 최상위 컴포넌트에서 색상 오버라이드가 가능하도록 하위 컴포넌트의 색상 속성이 노출(Expose)되어 있어야 합니다.아이콘 제작 방식의 일관성: 모든 아이콘이 동일한 방식으로 제작되었는지 확인하세요. 예를 들어, 어떤 아이콘은 `Fill`로, 어떤 아이콘은 `Stroke`로만 되어 있다면 색상 적용 방식이 달라질 수 있습니다.과거에 비슷한 오류가 있었을 때, 아이콘들의 구조를 전수 검토하고 일관된 방식으로 정리한 후 문제가 해결된 사례가 많습니다. 아이콘의 벡터 구조를 단순화하고, `Fill` 속성을 명확히 설정하며, 컴포넌트의 색상 오버라이드 설정을 다시 한번 점검해보시길 권장합니다.