App Icons
플리케이션의 아이콘과 스플래시 스크린을 생성하고 관리하는 데 사용됩니다. Icon Genie는 특히 웹 애플리케이션 뿐만 아니라, Cordova 또는 Capacitor를 사용하는 모바일 애플리케이션, Electron을 사용하는 데스크톱 애플리케이션을 개발할 때 유용합니다.
Icon Genie의 주요 기능
다양한 플랫폼 지원: Icon Genie는 웹, iOS, 안드로이드, macOS, 윈도우 등 다양한 플랫폼을 위한 아이콘과 스플래시 스크린을 자동으로 생성합니다.
간편한 아이콘 생성: 사용자는 단 하나의 소스 이미지를 제공하면, Icon Genie가 이를 이용하여 필요한 모든 해상도와 크기의 아이콘을 생성합니다. 이는 개발자가 각각의 플랫폼 및 디바이스에 맞춰 여러 버전의 아이콘을 일일이 만들 필요가 없게 해줍니다.
맞춤화와 자동화: Icon Genie는 명령줄 인터페이스(CLI)를 통해 사용되며, 개발자가 명령어를 통해 아이콘 생성 프로세스를 세밀하게 제어할 수 있습니다. 이는 빌드 프로세스에 쉽게 통합될 수 있어 자동화가 가능합니다.
프로젝트 통합: Quasar 프로젝트와 긴밀하게 통합되어 있어 Quasar의 설정과 함께 사용될 수 있으며, Quasar의 개발 환경에 맞춰 최적화되어 있습니다.
설치
npm i -g @quasar/icongeniegenerate flags
icongenie generate -h필수 옵션
--icon, -i: 아이콘 생성에 사용될 소스 이미지의 경로를 지정합니다. 이 이미지는 .png 파일이어야 하며, 최소 64x64 픽셀 해상도를 가져야 합니다. 투명도가 있고, 최대의 품질을 얻기 위해 1024x1024 픽셀 크기를 권장합니다. 이미지는 자동으로 크롭될 수 있습니다.
선택적 옵션
--background, -b: 스플래시 스크린 생성에 사용할 배경 이미지의 경로를 지정합니다. 이 이미지도 .png 파일이어야 하며, 최소 128x128 픽셀 해상도를 가져야 합니다. 투명도는 선택적입니다.
--mode, -m: 아이콘과 스플래시 스크린을 생성할 Quasar 모드를 지정합니다. 여러 모드를 쉼표로 구분하여 지정할 수 있습니다. 기본값은 모든 모드에 대해 생성합니다. [all|spa|pwa|ssr|bex|cordova|capacitor|electron]
--filter, -f: 생성할 자산 유형을 필터링합니다. 예를 들어, png 또는 splashscreen만 생성하고 싶을 때 사용합니다. [png|ico|icns|splashscreen|svg]
--quality: 생성된 파일의 품질을 지정합니다. 값은 1에서 12 사이이며, 높을수록 파일 크기가 커지고 생성 시간이 늘어납니다.
--skip-trim: 아이콘 소스 파일을 자동으로 크롭하지 않도록 합니다.
--padding: 아이콘에 패딩을 적용합니다. <horiz: number>,<vert: number> 형식으로 지정하며, 좌우 및 상하 패딩을 설정할 수 있습니다.
--theme-color: 모든 생성기에서 사용할 테마 색상을 지정합니다. 헥스 코드 형식으로 입력해야 하며, # 기호는 포함하지 않습니다.
--svg-color: 생성된 단색 SVG의 색상을 지정합니다. 테마 색상이 지정되지 않은 경우 기본값으로 사용됩니다.
--png-color: PNG 생성기에서 사용할 배경색을 지정합니다. 이는 특히 iOS 아이콘 생성 시 유용합니다.
--splashscreen-color: 스플래시 스크린 생성기에서 사용할 배경색을 지정합니다.
--splashscreen-icon-ratio: 스플래시 스크린에 아이콘이 차지할 비율을 지정합니다. 0에서 100 사이의 값을 가지며, 0은 아이콘을 추가하지 않음을 의미합니다.
프로파일 사용
--profile, -p: JSON 프로파일 파일 또는 파일이 들어 있는 폴더의 경로를 지정합니다. 이 파일을 통해 사용자 정의 자산 목록과 파라미터를 지정할 수 있습니다.
verify flags
icongenie verify -h사용 방법
- 기본적으로, icongenie verify는 모든 설치된 Quasar 모드에 대해 아이콘과 스플래시 스크린을 검증합니다.
- 특정 모드만 검증하려면 -m 옵션을 사용하여 모드를 지정할 수 있습니다.
- 특정 유형의 자산만 검증하려면 -f 옵션으로 필터를 적용할 수 있습니다.
- 프로파일 파일을 사용하여 검증할 자산 목록을 지정할 수도 있습니다.
옵션설명
--mode, -m: 검증할 Quasar 모드를 지정합니다. 가능한 모드는 spa, pwa, ssr, bex, cordova, capacitor, electron 등이 있으며, 쉼표로 구분하여 여러 모드를 지정할 수 있습니다. 기본값은 모든 모드입니다.
[all|spa|pwa|ssr|bex|cordova|capacitor|electron]--filter, -f: 검증할 자산 유형을 필터링합니다. 가능한 필터는 png, ico, icns, splashscreen, svg 등이 있습니다. 이 옵션을 사용하면 지정된 유형의 자산만 검증합니다.
[png|ico|icns|splashscreen|svg]--profile, -p: JSON 프로파일 파일을 사용하여 검증할 자산 목록을 지정합니다. 이 파일은 단일 JSON 파일이거나 JSON 프로파일 파일을 포함하는 폴더 경로일 수 있습니다. 프로파일 파일은 자산 및 추가 파라미터에 대한 상세 설정을 포함할 수 있습니다.