파일 아이콘 테마

Visual Studio Code는 UI 전체에 파일 이름 옆에 아이콘을 표시하며, 확장 프로그램은 사용자가 선택할 수 있는 새로운 파일 아이콘 세트를 기여할 수 있습니다.

새로운 파일 아이콘 테마 추가하기

아이콘(가급적 SVG)과 아이콘 폰트로 자신만의 파일 아이콘 테마를 만들 수 있습니다. 예시로, 두 가지 내장 테마인 Minimal과 Seti를 확인해 보세요.

시작하려면 VS Code 확장을 만들고 iconTheme 기여 지점을 추가하세요.

{
  "contributes": {
    "iconThemes": [
      {
        "id": "turtles",
        "label": "Turtles",
        "path": "./fileicons/turtles-icon-theme.json"
      }
    ]
  }
}

id는 아이콘 테마의 식별자입니다. 설정을 위한 식별자로 사용되므로 고유하면서도 읽기 쉬운 이름으로 지정하세요. label은 파일 아이콘 테마 선택기 드롭다운에 표시됩니다. path는 확장 프로그램 내에서 아이콘 세트를 정의하는 파일을 가리킵니다. 아이콘 세트 이름이 *icon-theme.json 명명 규칙을 따르는 경우 VS Code에서 자동 완성 지원 및 호버 정보를 얻을 수 있습니다.

파일 아이콘 세트 파일

파일 아이콘 세트 파일은 파일 아이콘 연결 및 아이콘 정의로 구성된 JSON 파일입니다.

아이콘 연결은 파일 유형('file', 'folder', 'json-file'...)을 아이콘 정의에 매핑합니다. 아이콘 정의는 아이콘의 위치를 정의합니다. 이는 이미지 파일이거나 폰트의 글리프일 수도 있습니다.

아이콘 정의

iconDefinitions 섹션에는 모든 정의가 포함됩니다. 각 정의에는 해당 정의를 참조하는 데 사용될 id가 있습니다. 하나의 정의는 여러 파일 연결에서 참조될 수도 있습니다.

{
  "iconDefinitions": {
    "_folder_dark": {
      "iconPath": "./images/Folder_16x_inverse.svg"
    }
  }
}

위의 이 아이콘 정의에는 _folder_dark 식별자를 가진 정의가 포함되어 있습니다.

다음 속성을 지원합니다.

iconPath: SVG/PNG를 사용할 때: 이미지 경로입니다.
fontCharacter: 글리프 폰트를 사용할 때: 사용할 폰트의 문자입니다.
fontColor: 글리프 폰트를 사용할 때: 글리프에 사용할 색상입니다.
fontSize: 폰트를 사용할 때: 폰트 크기입니다. 기본적으로 폰트 사양에 지정된 크기가 사용됩니다. 부모 폰트 크기에 대한 상대적 크기(예: 150%)여야 합니다.
fontId: 폰트를 사용할 때: 폰트의 id입니다. 지정하지 않으면 폰트 사양 섹션에 지정된 첫 번째 폰트가 선택됩니다.

파일 연결

아이콘은 폴더, 폴더 이름, 파일, 파일 확장자, 파일 이름 및 언어 ID에 연결될 수 있습니다.

추가적으로 이러한 연결 각각은 'light' 및 'highContrast' 색상 테마에 대해 더 세밀하게 조정될 수 있습니다.

각 파일 연결은 아이콘 정의를 가리킵니다.

{
  "file": "_file_dark",
  "folder": "_folder_dark",
  "folderExpanded": "_folder_open_dark",
  "folderNames": {
    ".vscode": "_vscode_folder"
  },
  "fileExtensions": {
    "ini": "_ini_file"
  },
  "fileNames": {
    "win.ini": "_win_ini_file"
  },
  "languageIds": {
    "ini": "_ini_file"
  },
  "light": {
    "folderExpanded": "_folder_open_light",
    "folder": "_folder_light",
    "file": "_file_light",
    "fileExtensions": {
      "ini": "_ini_file_light"
    }
  },
  "highContrast": {}
}

file은 확장자, 파일 이름 또는 언어 ID와 일치하지 않는 모든 파일에 표시되는 기본 파일 아이콘입니다. 현재 파일 아이콘 정의에 의해 정의된 모든 속성은 상속됩니다(폰트 글리프에만 관련되며 fontSize에 유용함).
folder는 접힌 폴더의 폴더 아이콘이며, folderExpanded가 설정되지 않은 경우 펼쳐진 폴더의 아이콘이기도 합니다. 특정 폴더 이름에 대한 아이콘은 folderNames 속성을 사용하여 연결될 수 있습니다. 폴더 아이콘은 선택 사항입니다. 설정되지 않으면 폴더에 아이콘이 표시되지 않습니다.
folderExpanded는 펼쳐진 폴더의 폴더 아이콘입니다. 펼쳐진 폴더 아이콘은 선택 사항입니다. 설정되지 않으면 folder에 대해 정의된 아이콘이 표시됩니다.
folderNames는 폴더 이름을 아이콘에 연결합니다. 세트의 키는 폴더 이름이며, 선택적으로 단일 부모 경로 세그먼트(*)로 접두사가 붙을 수 있습니다. 패턴이나 와일드카드는 지원되지 않습니다. 폴더 이름 일치는 대소문자를 구분하지 않습니다.
folderNamesExpanded는 펼쳐진 폴더에 대한 아이콘을 폴더 이름에 연결합니다. 세트의 키는 폴더 이름이며, 선택적으로 단일 부모 경로 세그먼트(*)로 접두사가 붙을 수 있습니다. 패턴이나 와일드카드는 지원되지 않습니다. 폴더 이름 일치는 대소문자를 구분하지 않습니다.
rootFolder는 접힌 작업 영역 루트 폴더의 폴더 아이콘이며, rootFolderExpanded가 설정되지 않은 경우 펼쳐진 작업 영역 루트 폴더의 아이콘이기도 합니다. 설정되지 않으면 작업 영역 루트 폴더에 대해 folder에 대해 정의된 아이콘이 표시됩니다.
rootFolderExpanded는 펼쳐진 작업 영역 루트 폴더의 폴더 아이콘입니다. 설정되지 않으면 펼쳐진 작업 영역 루트 폴더에 대해 rootFolder에 대해 정의된 아이콘이 표시됩니다.
rootFolderNames는 루트 폴더 이름을 아이콘에 연결합니다. 세트의 키는 폴더 이름입니다. 패턴이나 와일드카드는 지원되지 않습니다. 루트 폴더 이름 일치는 대소문자를 구분하지 않습니다.
rootFolderNamesExpanded는 펼쳐진 폴더에 대한 아이콘을 루트 폴더 이름에 연결합니다. 세트의 키는 폴더 이름입니다. 패턴이나 와일드카드는 지원되지 않습니다. 루트 폴더 이름 일치는 대소문자를 구분하지 않습니다.
languageIds는 언어를 아이콘에 연결합니다. 세트의 키는 언어 기여 지점에 정의된 언어 ID입니다. 파일의 언어는 언어 기여에 정의된 파일 확장자 및 파일 이름을 기반으로 평가됩니다. 언어 기여의 '첫 줄 일치'는 고려되지 않습니다.
fileExtensions는 파일 확장자를 아이콘에 연결합니다. 세트의 키는 파일 확장자 이름입니다. 확장자 이름은 점 뒤의 파일 이름 세그먼트입니다(점 포함 안 함). lib.d.ts와 같이 여러 점이 있는 파일 이름은 여러 확장자와 일치할 수 있습니다. 'd.ts' 및 'ts'입니다. 선택적으로 파일 확장자 이름에 단일 부모 경로 세그먼트(*)로 접두사가 붙을 수 있습니다. 확장자는 대소문자를 구분하지 않고 비교됩니다.
fileNames는 파일 이름을 아이콘에 연결합니다. 세트의 키는 전체 파일 이름이며 경로 세그먼트는 포함되지 않습니다. 선택적으로 파일 확장자 이름에 단일 부모 경로 세그먼트(*)로 접두사가 붙을 수 있습니다. 패턴이나 와일드카드는 지원되지 않습니다. 파일 이름 일치는 대소문자를 구분하지 않습니다. 'fileName' 일치는 가장 강력한 일치이며, 파일 이름에 연결된 아이콘은 일치하는 파일 확장자 및 일치하는 언어 ID의 아이콘보다 선호됩니다.

(*) 일부 속성 키(folderNames, folderNamesExpanded, fileExtensions, fileNames)에는 단일 부모 경로 세그먼트로 접두사가 붙을 수 있습니다. 아이콘은 리소스의 직접 부모 폴더가 부모 경로 폴더와 일치하는 경우에만 사용됩니다. 이를 통해 특정 폴더(예: system)의 리소스에 다른 모양을 부여할 수 있습니다.

  "fileNames": {
    "system/win.ini": "_win_ini_file"
  },

system/win.ini는 해당 연결이 system 폴더 바로 안에 있는 win.ini라는 파일을 일치시킨다는 것을 의미합니다.

  "fileExtensions": {
    "system/ini": "_ini_file"
  },

system/ini는 해당 연결이 system 폴더 바로 안에 있는 *.ini라는 파일을 일치시킨다는 것을 의미합니다.

파일 확장자 일치는 언어 일치보다 선호되지만, 파일 이름 일치보다 약합니다. 부모 경로 세그먼트가 있는 일치는 해당 종류의 부모 경로 세그먼트가 없는 일치보다 선호됩니다.

부모가 있는 파일 이름 일치 > 파일 이름 일치 > 부모가 있는 파일 확장자 일치 > 파일 확장자 일치 > 언어 일치 ...

light 및 highContrast 섹션에는 방금 나열된 것과 동일한 파일 연결 속성이 있습니다. 이를 통해 해당 테마에 대한 아이콘을 재정의할 수 있습니다.

글꼴 정의

fonts 섹션을 사용하면 사용하려는 글리프 폰트의 수를 선언할 수 있습니다. 나중에 아이콘 정의에서 이러한 폰트를 참조할 수 있습니다. 아이콘 정의에 폰트 id가 지정되지 않은 경우 먼저 선언된 폰트가 기본값으로 사용됩니다.

폰트 파일을 확장 프로그램으로 복사하고 경로를 적절하게 설정하세요. WOFF 폰트를 사용하는 것이 좋습니다.

형식으로 'woff'를 설정하세요.
weight 속성 값은 여기에서 정의됩니다.
style 속성 값은 여기에서 정의됩니다.
크기는 아이콘이 사용되는 폰트 크기에 대한 상대적이어야 합니다. 따라서 항상 백분율을 사용하세요.

{
  "fonts": [
    {
      "id": "turtles-font",
      "src": [
        {
          "path": "./turtles.woff",
          "format": "woff"
        }
      ],
      "weight": "normal",
      "style": "normal",
      "size": "150%"
    }
  ],
  "iconDefinitions": {
    "_file": {
      "fontCharacter": "\\E002",
      "fontColor": "#5f8b3b",
      "fontId": "turtles-font"
    }
  }
}

파일 아이콘 테마의 폴더 아이콘

파일 아이콘 테마는 폴더 아이콘이 폴더의 확장 상태를 나타낼 만큼 충분히 좋으면 파일 탐색기에서 기본 폴더 아이콘(회전하는 삼각형 또는 "트위스티")을 표시하지 않도록 지시할 수 있습니다. 이 모드는 파일 아이콘 테마 정의 파일에서 "hidesExplorerArrows":true를 설정하여 활성화됩니다.

언어 기본 아이콘

언어 기여자들은 언어에 대한 아이콘을 정의할 수 있습니다.

{
  "contributes": {
    "languages": [
      {
        "id": "latex",
        // ...
        "icon": {
          "light": "./icons/latex-light.png",
          "dark": "./icons/latex-dark.png"
        }
      }
    ]
  }
}

파일 아이콘 테마에 해당 언어에 대한 일반 파일 아이콘만 있는 경우 이 아이콘이 사용됩니다.

언어 기본 아이콘은 다음의 경우에만 표시됩니다.

파일 아이콘 테마에 특정 파일 아이콘이 있는 경우. 예: Minimal은 특정 파일 아이콘이 없으므로 언어 기본 아이콘을 사용하지 않습니다.
파일 아이콘 테마에 해당 언어, 파일 확장자 또는 파일 이름에 대한 아이콘이 포함되어 있지 않은 경우.
파일 아이콘 테마가 "showLanguageModeIcons":false를 정의하지 않은 경우.

언어 기본 아이콘은 항상 표시됩니다.

파일 아이콘 테마가 "showLanguageModeIcons":true를 정의하는 경우.

12/10/2025