제품 아이콘 테마
Visual Studio Code에는 보기 및 편집기에서 사용되는 기본 아이콘 세트가 있지만, 호버, 상태 표시줄 및 확장 프로그램에서도 참조할 수 있습니다. 예를 들어 필터 작업 단추 및 보기 아이콘, 상태 표시줄, 중단점, 트리 및 편집기의 접기 아이콘 등이 있습니다.
제품 아이콘 테마를 사용하면 확장에서 이러한 아이콘을 다시 정의하여 VS Code에 사용자 지정 모양을 부여할 수 있습니다. 제품 아이콘 테마에서 다루지 않는 것은 파일 아이콘(파일 아이콘 테마에서 다룸)과 확장에서 제공하는 아이콘입니다.
VS Code는 아이콘이 아이콘 글꼴의 글리프로 정의되어야 하며 (현재) 제품 아이콘은 단일 색상으로 구성하도록 제한합니다. 아이콘에 사용되는 색상은 표시되는 위치에 따라 다르며 활성 색상 테마에 의해 정의됩니다.
새로운 제품 아이콘 테마 추가
자신만의 제품 아이콘 테마를 정의하려면 VS Code 확장을 만들고 확장 프로그램의 package.json에 productIconThemes 기여 지점을 추가하는 것으로 시작하세요.
{
"contributes": {
"productIconThemes": [
{
"id": "aliensAreBack",
"label": "Aliens Are Back",
"path": "./producticons/aliens-product-icon-theme.json"
}
]
}
}
id는 제품 아이콘 테마의 식별자입니다. 설정에서 사용되므로 고유하지만 읽기 쉽게 만드세요. label은 제품 아이콘 테마 선택기 드롭다운에 표시됩니다. path는 아이콘 세트를 정의하는 확장 프로그램의 파일을 가리킵니다. 파일 이름이 *product-icon-theme.json 명명 규칙을 따르는 경우 VS Code에서 제품 아이콘 테마 파일을 편집할 때 완성 지원 및 호버를 받을 수 있습니다.
제품 아이콘 정의 파일
제품 아이콘 정의 파일은 하나 이상의 아이콘 글꼴과 아이콘 정의 세트를 정의하는 JSON 파일입니다.
글꼴 정의
fonts 섹션을 사용하면 사용하려는 글리프 글꼴 수를 선언할 수 있지만, 하나 이상의 글꼴 정의는 정의해야 합니다.
이 글꼴은 나중에 아이콘 정의에서 참조할 수 있습니다. 아이콘 정의에 글꼴 ID가 지정되지 않은 경우 첫 번째로 선언된 글꼴이 기본값으로 사용됩니다.
글꼴 파일을 확장 프로그램으로 복사하고 경로를 적절하게 설정하세요.
WOFF 글꼴을 사용하는 것이 좋습니다.
{
"fonts": [
{
"id": "alien-font",
"src": [
{
"path": "./alien.woff",
"format": "woff"
}
],
"weight": "normal",
"style": "normal"
}
]
}
아이콘 정의
VS Code는 보기에서 아이콘을 참조하는 아이콘 ID 목록을 정의합니다. 제품 아이콘의 iconDefinitions 섹션은 이러한 ID에 새 아이콘을 할당합니다.
각 정의는 fontId를 사용하여 fonts 섹션에 정의된 글꼴 중 하나를 참조합니다. fontId가 생략되면 글꼴 정의에 나열된 첫 번째 글꼴이 사용됩니다.
{
"iconDefinitions": {
"dialog-close": {
"fontCharacter": "\\43",
"fontId": "alien-font"
}
}
}
모든 아이콘 식별자 목록은 아이콘 참조에서 찾을 수 있습니다.
개발 및 테스트
VS Code에는 package.json 파일과 제품 아이콘 테마 파일에 대한 기본 편집 지원이 내장되어 있습니다. 이를 얻으려면 테마 파일 이름이 product-icon-theme.json으로 끝나야 합니다. 이렇게 하면 알려진 아이콘 ID를 포함한 모든 속성에 대한 코드 완성과 호버 및 유효성 검사가 가능해집니다.
제품 아이콘 테마를 시험해 보려면 VS Code에서 확장 폴더를 열고 F5를 누릅니다. 그러면 확장 개발 호스트 창에서 확장이 실행됩니다. 이 창에는 확장이 활성화되어 있으며 확장은 자동으로 첫 번째 제품 아이콘 테마로 전환됩니다.
또한 테마 파일은 변경 사항을 감시하며 테마 파일이 수정될 때마다 아이콘 업데이트가 자동으로 적용됩니다. 제품 아이콘 정의 파일을 작업하면서 저장할 때마다 변경 사항을 실시간으로 볼 수 있습니다.
제품 아이콘 테마 간에 전환하려면 환경설정: 제품 아이콘 테마 명령을 사용합니다.
VS Code UI의 특정 위치에서 어떤 아이콘이 사용되는지 알아내려면 도움말 > 개발자 도구 토글을 실행하여 개발자 도구를 열고 다음을 수행하세요.
- 왼쪽 상단의 개발자 도구 검사 도구를 클릭하세요.
- 검사할 아이콘 위로 마우스를 이동하세요.
- 아이콘의 클래스 이름이
codicon.codicon-remote인 경우 아이콘 ID는remote입니다.
샘플
제품 색상 테마 샘플을 플레이그라운드로 사용할 수 있습니다.