Icon을 사용하는 방식은 다양하다. 이번에 회사에서 디자인시스템 관려하여 아이콘을 정리해야 할 필요가 생겼다. 간단히 정리해보자.
아이콘을 사용하는 방법은 총 3가지가 존재한다.
현재 회사는 1번의 방식을 SVG로 구현하는 방법을 채택하고 있다. 즉 SVG파일을 활용하여 css의 background로 지정하고, x, y 포지션을 사용하여 이미지를 바꾸어주고 있다. 보통 x포지션은 아이콘의 색상을, y포지션은 아이콘의 모양을 바꾸는 데에 활용하고 있는데, 설정하기가 매우 복잡할 뿐만 아니라 일관성을 유지하기도 어려워 현재 사용이 매우 불편한 상태이다.
요즈음에 가장 많이 사용되는 방식은 아이콘 폰트 방식이다. 이건 일종의 hack이라고 한다. 아이콘 폰트는 아이콘 자체는 벡터 그래픽 기반이기는 하나, 아이콘이 텍스트로 전달되기 때문에 웹킷 기반 브라우저에서는 흐릿해 보일 수 있다(무슨 소린지는 잘 모르겠지만). 또한 폰트로 제작을 해야 하기 때문에 폰트 제작 서비스에 의존해야 하는 번거로움도 있는 등 여러모로 불편한 점이 많다고 한다.
이러한 문제들 때문에 최근에는 아이콘 폰트를 걷어내고 SVG를 직접 아이콘으로 사용하는 추세라고 한다. SVG는 2차원 벡터 그래픽을 표현한 XML기반의 파일 형식으로 W3C 주도하에 개발된 오픈 그래픽 표준이다. IE8을 제외한 대부분의 브라우저에서도 호환된다.