앱 아이콘

Tauri는 Tauri 로고를 기반으로 한 기본 아이콘 세트가 포함되어 공개되지만, 자신의 애플리케이션을 출시할 때는 그렇게 하고 싶지 않을 수 있습니다. 이 기본 처리를 피하기 위해 Tauri는 받은 입력 파일(기본적으로 "./app-icon.png")에서 다양한 플랫폼에 필요한 모든 아이콘을 만드는 “icon 명령”을 제공합니다.

Note

AppX Windows 애플리케이션 설치에 필요한 모든 파일(메타데이터, 파일, 자격 증명 포함)을 포함한 애플리케이션 배포 및 설치에 사용되는 배포 가능한 패키지 파일 형식. [참고]

명령 사용법

npm run tauri icon

yarn tauri icon

pnpm tauri icon

deno task tauri icon

cargo tauri icon

> pnpm tauri icon --help

Generate various icons for all major platforms
[주요 플랫폼용 다양한 아이콘 생성]

Usage: pnpm run tauri icon [OPTIONS] [INPUT]
[사용법: pnpm run tauri icon [OPTION 지정] [인수 INPUT]]

Arguments:[인수]
  [INPUT]  Path to the source icon (squared PNG or SVG file with transparency) [default: ./app-icon.png]
  [소스 아이콘 경로(투명 배경의 정사각형 PNG 또는 SVG 파일) [기본 경로 설정: ./app-icon.png]]

Options:[옵션 지정]
  -o, --output <OUTPUT>        Output directory. Default: 'icons' directory next to the tauri.conf.json file
  [-o, 출력 대상]              출력 디렉토리. 기본값: tauri.conf.json 파일 옆의 'icons' 디렉토리]
  -v, --verbose...             Enables verbose logging
  [-v, 상세 보고서 표시]        상세 로깅 활성화]
  -p,
      --png <PNG>              Custom PNG icon sizes to generate. When set, the default icons are not generated
      [-p, --png, PNG]             생성할 PNG 아이콘 크기를 사용자 정의합니다. 설정하면 기본 아이콘이 생성되지 않습니다.]
      --ios-color <IOS_COLOR>  The background color of the iOS icon - string as defined in the W3C's CSS Color Module Level 4 <https://www.w3.org/TR/css-color-4/> [default: #fff]
      [-p, --ios, IOS_COLOR]   iOS 아이콘의 배경색. W3C의 CSS 색상 모듈 레벨 4에 정의된 문자열. 기본값: #fff(흰색)]
  -h, --help                   Print help
  [-h, 도움말]                   도움말 인쇄]
  -V, --version                Print version
  [-V, 버전]                     버전 인쇄]

“데스크톱 아이콘”은 모두 기본적으로 src-tauri/icons 폴더에 배치되며, 빌드된 앱에 자동으로 포함됩니다. 아이콘을 다른 위치에서 가져오려면 tauri.conf.json 파일의 다음 부분을 편집하십시오:

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

“모바일 아이콘”은 Xcode 및 Android Studio 프로젝트 내에 직접 배치됩니다.

아이콘 직접 만들기

아이콘을 직접 만들고 싶다면, 예를 들어 작은 크기용으로 간단한 디자인을 원하거나 CLI의 내부 이미지 크기 조정에 의존하고 싶지 않은 경우, 직접 만든 아이콘이 몇 가지 요구 사항을 충족해야 한다는 점에 유의하십시오:

icon.icns: icns 파일(Apple Icon Image format)에 필요한 레이어의 “크기와 이름”은 Tauri 리포지토리(영어 사이트)에 기재되어 있습니다.
icon.ico: ico 파일(ICO file format)에는 16, 24, 32, 48, 64, 256 픽셀의 각 레이어가 포함되어 있어야 합니다. 개발 중인 ICO 이미지를 최적으로 표시하려면 32 픽셀 레이어를 첫 번째 레이어로 해야 합니다.
png: PNG 아이콘의 요구 사항은 “너비 == 높이”, “RGBA”(RGB + 투명도), “픽셀당 32비트”(각 채널당 8비트)입니다. 데스크톱용으로 일반적으로 요구되는 크기는 32, 128, 256, 512 픽셀입니다. 최소한 tauri icon의 출력 크기인 “32x32.png”, “128x128.png”, “128x128@2x.png”, “icon.png”를 준비해 두는 것이 좋습니다.

Android용

Android용으로도 위와 동일한 요구 사항을 충족하는 PNG 아이콘(단, 크기가 다른 것)이 필요합니다. 아이콘은 Android Studio 프로젝트 안에 직접 배치해야 합니다:

src-tauri/gen/android/app/src/main/res/
- mipmap-hdpi/
  - ic_launcher.png & ic_launcher_round.png: 49x49px
  - ic_launcher_foreground.png: 162x162px
- mipmap-mdpi/
  - ic_launcher.png & ic_launcher_round.png: 48x48px
  - ic_launcher_foreground.png: 108x108px
- mipmap-xhdpi/
  - ic_launcher.png & ic_launcher_round.png: 96x96px
  - ic_launcher_foreground.png: 216x216px
- mipmap-xxhdpi/
  - ic_launcher.png & ic_launcher_round.png: 144x144px
  - ic_launcher_foreground.png: 324x324px
- mipmap-xxxhdpi/
  - ic_launcher.png & ic_launcher_round.png: 192x192px
  - ic_launcher_foreground.png: 432x432px

tauri icon을 사용할 수 없는 경우, 대신 Android Studio의 Image Asset Studio를 확인하는 것이 좋습니다.

iOS용

iOS용으로도 위 요구 사항을 충족하는 PNG 아이콘이 필요하지만, 투명도 없이 크기도 다릅니다. 또한 Xcode 프로젝트 내의 src-tauri/gen/apple/Assets.xcassets/AppIcon.appiconset/에 직접 배치해야 합니다. 다음 아이콘이 필요합니다:

20px의 1x, 2x, 3x 버전과 2x 버전의 추가 아이콘
29px의 1x, 2x, 3x 버전과 2x 버전의 추가 아이콘
40px의 1x, 2x, 3x 버전과 2x 버전의 추가 아이콘
60px의 2x, 3x 버전
76px의 1x, 2x 버전
83.5px의 2x 버전
512px의 2x 버전을 AppIcon-512@2x.png로 저장

파일 이름은 AppIcon-{size}x{size}@{scaling}{extra}.png 형식이 됩니다. 20px 아이콘의 경우, 20x20, 40x40, 60x60 크기의 아이콘을 각각 AppIcon-20x20@1x.png, AppIcon-20x20@2x.png, AppIcon-20x20@3x.png라는 이름으로 저장하고, 2x 버전을 추가로 AppIcon-20x20@2x-1.png(“추가 아이콘”)로 저장해야 합니다.

Support on Open Collective Sponsor on GitHub