Phlex::Icons의 탄생 배경과 목적
저자는 프로젝트를 ERB에서 Phlex로 마이그레이션하면서 Heroicons, Bootstrap, Flag 아이콘 등 다양한 SVG 라이브러리를 수동으로 통합하는 과정에서 불편함을 느꼈습니다. 이를 자동화하기 위해 phlexing 젬을 활용하여 7개의 주요 소스로부터 12,000개 이상의 아이콘을 Phlex 컴포넌트로 자동 생성하는 Phlex::Icons를 개발하게 되었습니다. 이 젬은 개발자가 복잡한 SVG 코드를 직접 다루지 않고도 Ruby 클래스 형태로 아이콘을 호출할 수 있게 합니다.
주요 기능 및 기술적 특징
Phlex::Icons는 단순한 아이콘 모음을 넘어 개발 효율성을 극대화하는 여러 기능을 제공합니다.
- 중앙 집중식 접근 및 방대한 라이브러리: Bootstrap, Flag, Heroicons, Lucide, Radix, Remix, Tabler 등 7가지 소스를 통합하여 제공합니다.
- 자동 업데이트 시스템: GitHub Actions 워크플로우를 통해 매주 소스 라이브러리의 최신 상태를 확인하고 새로운 아이콘을 자동으로 업데이트하여 반영합니다.
- 유연한 패키지 구성: 전체 아이콘을 로드하지 않고
phlex-icons-bootstrap,phlex-icons-hero등 필요한 팩만 선택적으로 설치하여 애플리케이션의 메모리 점유율을 최적화할 수 있습니다. - 지연 로딩(Lazy Loading): 아이콘 컴포넌트를 실제로 호출할 때만 메모리에 로드하여 대규모 아이콘 팩 사용 시 발생할 수 있는 성능 저하를 방지합니다.
- Phlex::Kit 통합:
Phlex::Kit을 활용하여 UI 컴포넌트 내에서 간결한 DSL 문법으로 아이콘을 렌더링할 수 있는 환경을 제공합니다.
설치 및 실무 활용 방법
Rails 프로젝트에서 bundle add phlex-icons 명령어로 간단히 설치할 수 있습니다. 전역 설정을 통해 모든 아이콘에 공통적으로 적용될 CSS 클래스를 지정할 수 있어 디자인 일관성을 유지하기 편리합니다.
ruby
Phlex::Icons.configure do |config|
config.default_classes = 'size-4'
end
사용자는 뷰 템플릿 내에서 include Phlex::Icons를 선언한 후, Bootstrap::House(classes: 'size-4')와 같은 방식으로 아이콘을 즉시 삽입할 수 있습니다. 또한 render Phlex::Icons::Hero::Home.new와 같이 명시적인 렌더링 방식도 지원하여 개발자의 선호에 맞는 코딩 스타일을 선택할 수 있습니다.
커스텀 아이콘 및 확장성
제공되는 기본 아이콘 외에도 사용자가 직접 제작한 SVG 아이콘을 Phlex::Icons 시스템에 통합할 수 있습니다. 특정 디렉토리에 Phlex::Icons::Base를 상속받는 클래스를 정의하면, 기존 젬이 제공하는 전역 설정과 구성 옵션을 그대로 상속받는 커스텀 아이콘 컴포넌트를 만들 수 있습니다. 이는 기업 고유의 브랜드 아이콘을 시스템화하는 데 매우 유용합니다.