아이콘 테마

Visual Studio Code는 UI를 통해 파일명 옆에 아이콘을 표시하며, 익스텐션을 통해서 사용자가 선택 할 수 있는 새로운 아이콘들을 제공 할 수 있습니다.

새 아이콘 테마 추가

여러분은 원하는 아이콘(보통 SVG)과 아이콘 폰트를 이용하여 원하는 아이콘 테마를 생성 할 수 있습니다. 예시로, 아래의 2가지 빌트인 테마를 확인하십시오: Minimal 과 Seti.

{
  "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: 폰트를 사용하는 경우: 폰트의 식별자입니다. 지정되지 않았다면, 폰트 지정 섹션의 첫번째 폰트가 사용됩니다.

파일 구성

아이콘은 폴더, 폴더이름, 파일, 파일 익스텐션, 파일명 그리고 language ids에 사용 될수 있습니다.

추가적으로 각각의 구성은 ‘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은 어느 익스텐션, 파일명, 혹은 language id와 일치 하지 않는 모든 파일을 위한 파일 아이콘 기본 값입니다. 현재 파일 아이콘 정의에 지정 된 모든 속성들이 상속 됩니다.(폰트 글리프에만 해당하여 폰트크기에 유용합니다.)
folder는 접힌 폴더를 위한 아이콘 이며, 만약 folderExpanded가 설정 되지 않았을때는 확장된 폴더에도 적용 됩니다. 특정 폴더 이름을 위한 아이콘은 folderNames속성을 통해 구성 될 수 있습니다.
folderExpanded는 확장된 폴더를 위한 아이콘입니다. 이는 옵션이며, 만약 설정 되지 않은 경우 folder에 설정된 아이콘이 사용 될것입니다.
folderNames는 폴더 이름에 아이콘을 설정 합니다. 구성 내용은 경로 단위를 포함하지 않은 폴더 이름입니다. 패턴이나 와일드카드(*)는 지원되지 않으며, 대소문자를 구분 하지 않습니다.
folderNamesExpanded는 확장된 폴더를 위한 아이콘 구성입니다. 구성 내용은 경로 단위를 포함하지 않은 폴더 이름입니다. 패턴이나 와일드카드(*)는 지원되지 않으며, 대소문자를 구분 하지 않습니다.
rootFolder 는 접힌 작업공간 루트 폴더를 위한 아이콘 입니다. 만약 rootFolderExpanded가 설정 되지 않았을 경우 확장된 루트 폴더 아이콘에도 적용됩니다. 만약 rootFolder가 설정 되지 않을 경우 folder에 설정된 아이콘이 작업공간 루트 폴더에 나타날 것입니다.
rootFolderExpanded는 확장된 루트 폴더 아이콘을 위한 구성입니다. 만약 설정 되지 않았을 경우 rootFolder에 적용된 아이콘이 사용 될 것입니다.
languageIds는 아이콘의 언어를 설정합니다. language id의 구성 내용은 language contribution point에 정의되어 있습니다. 파일의 언어는 파일 익스텐션과 language contribution에 정의된 파일명을 기준으로 평가 됩니다. language contribution 의 ‘first line match’는 적용 되지 않는것에 주의하십시오.
fileExtensions는 파일 익스텐션에 아이콘을 설정합니다. 구성 내용은 파일 익스텐션의 이름입니다. 익스텐션 이름은 점(.) 이후의 파일명입니다. 여러개의 점을 포함한 lib.d.ts와 같은 파일 이름은 d.ts, ts 와 같이 여러개의 익스텐션에서 인식될 수 있습니다. 익스텐션은 대소문자를 구분하지 않습니다.
fileNames는 파일 이름에 아이콘을 구성합니다. 구성 내용은 경로를 포함하지 않은 완전한 파일 이름 입니다. 패턴이나 와일드카드(*)는 지원되지 않으며, 대소문자를 구분하지 않습니다. ‘fileName’은 가장 우선으로 인식되어, 일치하는 파일 익스텐션이나 language Id에도 우선으로 아이콘을 지정합니다.

파일 익스텐션 은 language 보다 높은 우선순위를 가지지만 파일명에 비해서는 낮은 우선순위를 가집니다.

light와 highContrast는 위의 목록과 동일한 속성을 가집니다. 그러나 해당하는 테마로 아이콘을 오버라이드합니다.

폰트 정의

fonts주제는 여러분이 어떤 수의 글리프 폰트라도 사용 할 수 있게 합니다. 여러분은 이러한 폰트들을 아이콘 정의에 나중에 리퍼런스 할 수 있습니다. 만약 아이콘 정의에서 폰트 id를 명시 하지 않은 경우, 제일 처음 선언된 폰트가 기본값으로 사용됩니다.

폰트 파일을 익스텐션에 복사하여 해당하는 경로를 설정하십시오. WOFF 폰트를 사용하는 것이 권장됩니다.

‘woff’를 포맷으로 설정하십시오.
weight 속성 값은 여기에 설명 되어 있습니다.
style 속성 값은 여기에 설명 되어 있습니다.
size는 아이콘이 사용된 폰트 사이즈에 대해 상대적인 값을 가져야 하므로 퍼센티지 값을 사용하십시오.

{
  "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"
    }
  }
}

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

파일 아이콘 테마는 파일 탐색기에서 폴더 아이콘으로 폴더의 열림 상태를 표현하기에 충분할 경우 기본 폴더 아이콘 (회전하는 삼각형 혹은 “twisties”) 을 보이지 않게 설정 합니다. 이 기능은 파일 아이콘 테마 설정 파일의 "hidesExplorerArrows":true를 설정하여 사용 할 수 있습니다.