제품 아이콘 참조

Visual Studio Code에는 보기 및 편집기에서 사용되는 여러 내장 아이콘 세트가 있으며, 호버, 상태 표시줄 및 확장 프로그램에서도 사용할 수 있습니다. 이러한 아이콘은 UI 전체에서 파일 이름 옆에 사용되는 파일 아이콘과 달리 제품 아이콘입니다.

VS Code와 함께 제공되는 제품 아이콘은 Codicon 아이콘 글꼴에 포함되어 있으며 기본 제품 아이콘 테마를 구성합니다. 확장 프로그램은 새로운 제품 아이콘 테마를 제공하여 이러한 아이콘을 재정의하고 VS Code에 새로운 모양을 부여할 수 있습니다.

이를 허용하기 위해 모든 제품 아이콘은 ID로 식별됩니다. 아이콘 식별자는 레이블($(pencil)), API의 ThemeIcon 및 아이콘이 필요한 기여 지점에서 UI 구성 요소에 사용되는 것입니다.

아이콘 식별자와 실제 아이콘 글꼴 글리프 간의 연결은 제품 아이콘 테마에서 이루어집니다.

레이블의 아이콘

호버의 Markdown 레이블, StatusBarItem 텍스트 및 QuickPickItem 레이블 API에서 아이콘을 사용할 수 있습니다. Markdown에 아이콘을 추가하는 구문은 $(iconIdentifier)입니다.

$(alert);

텍스트를 포함하고 여러 아이콘을 사용할 수도 있습니다.

$(eye) $(heart) $(mark-github) GitHub

레이블에 리터럴 ${...} 텍스트를 포함하려면 백슬래시로 $를 이스케이프합니다.

\$(eye)

애니메이션

아이콘 이름에 ~spin을 추가하여 다음 아이콘에 회전 애니메이션을 적용할 수 있습니다.

• sync
• loading
• gear

$(sync~spin)

아이콘 기여 지점

아이콘 기여 지점을 통해 확장 프로그램은 기본 아이콘과 함께 ID별로 추가 아이콘을 정의할 수 있습니다. 그런 다음 아이콘 ID는 확장 프로그램(또는 확장 프로그램에 의존하는 다른 확장 프로그램)에서 레이블($(iconId)) 또는 ThemeIcon을 사용할 수 있는 모든 곳(new ThemeIcon("iconId"))에서 사용할 수 있습니다.

"contributes": {
  "icons": {
        "distro-ubuntu": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E001"
            }
        },
        "distro-fedora": {
            "description": "Ubuntu icon",
            "default": {
                "fontPath": "./distroicons.woff",
                "fontCharacter": "\\E002"
            }
        }
    }
}

제품 아이콘 테마는 아이콘 ID를 알고 있다면 아이콘을 개별적으로 재정의할 수 있습니다.

아이콘 목록

아래는 식별자별 내장 제품 아이콘 목록입니다.

아이콘의 ID는 아이콘이 사용되는 위치를 식별합니다. 기본 codicon ID는 기본적으로 사용되는 codicon 라이브러리의 아이콘을 설명하며, 미리 보기는 해당 아이콘의 모양을 보여줍니다.

제품 아이콘 테마는 각 아이콘을 개별적으로, 그리고 codicon 라이브러리의 모든 아이콘을 대체할 수 있습니다.