Ikony plików i folderów

File icons i Interface icons są niezależnymi wyborami w Settings > Themes. Motyw ikon jest pakietem danych z natywnym plikiem opisowym i dokumentem ikon w formacie VS Code.

Prosty motyw ikon plików

Kompletny pakiet znajduje się w examples/plain-file-icons. Zawiera theme.jsonc, icons.json i file.svg.

theme.jsonc:

{
  "version": 2,
  "name": "Plain file icons",
  "iconTheme": { "kind": "file", "path": "icons.json" }
}

icons.json:

{
  "iconDefinitions": {
    "document": { "iconPath": "./file.svg" }
  },
  "file": "document",
  "fileExtensions": { "md": "document", "mdx": "document" }
}

file.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#7a8fa6" stroke-width="1.5">
  <path d="M6 3h8l4 4v14H6zM14 3v5h4M9 12h6M9 16h6" />
</svg>

Zaimportuj folder, przejdź do File icons i wybierz Plain file icons. Powiązanie file ustawia domyślną ikonę pliku. Powiązania rozszerzeń pokazują, jak wskazać pliki Markdown jawnie.

Ścieżki w dokumencie ikon są względne wobec tego dokumentu. Wszystkie wskazane obrazy i fonty muszą pozostać w pakiecie. Plik opisowy z iconTheme nie może jednocześnie zawierać sekcji kolorów ani resources.

Powiązania plików

Aplikacja obsługuje powiązania nazw plików i folderów nadrzędnych, rozszerzenia wieloczłonowe, ID języków, foldery główne, foldery rozwinięte oraz warianty jasne i wysokiego kontrastu. Dopasowanie stosuje obsługiwane reguły pierwszeństwa VS Code, a przy jednakowej szczegółowości znaczenie ma kolejność deklaracji.

Obsługiwane pola powiązań obejmują:

file, folder, folderExpanded, rootFolder, rootFolderExpanded,
fileNames, fileExtensions, languageIds,
folderNames, folderNamesExpanded,
rootFolderNames, rootFolderNamesExpanded

light i highContrast dostarczają warianty powiązań. jsonc korzysta z powiązania języka json, jeśli brak własnego powiązania JSONC. hidesExplorerArrows ukrywa dekoracyjną strzałkę, zachowując dostępną kontrolkę rozwijania.

Ikony plików pojawiają się w Explorerze i pozostałych widokach zasobów, w tym na kartach, folderach projektów, wynikach wyszukiwania i w komunikatach o plikach. Niedopasowane zasoby zachowują ikony wbudowane.

Aplikacja nie instaluje rozszerzeń językowych VS Code. Rejestrowane przez nie osobno ikony trybów językowych są niedostępne, choć metadane showLanguageModeIcons pozostają zachowane do eksportu.

Ikony interfejsu

Dla ikon interfejsu użyj iconTheme.kind: "product". Takie motywy korzystają z fontów ikon i definicji fontCharacter. Najprościej zacząć od Interface icons > Create icon theme lub Duplicate przy zestawie wbudowanym. Kopia zawiera działający font i definicje do edycji.

Obsługiwane identyfikatory semantyczne obejmują terminal, search, settings-gear, close, add, save i git-branch. Pełne mapowanie oraz aliasy znajdują się w product-icons.ts.

Brak definicji przywraca wbudowaną ikonę Lucide. Motywy product zmieniają mapowane kontrolki aplikacji. Nie zastępują ikon stron internetowych, dowolnych komponentów pluginów ani osobnego motywu ikon plików.

Edycja i eksport

Open icon definitions otwiera folder zainstalowanego pakietu. Zmień dokument ikon i zasoby, a w razie potrzeby użyj Refresh. Zmiany wybranego pakietu są obserwowane; błąd zasobu zachowuje ostatni działający wygląd.

Export to VS Code dołącza wybrany dokument i wszystkie wskazane obrazy oraz fonty do pakietu VSIX zawierającego wyłącznie dane. Nieużywane definicje i obsługiwane nieznane metadane pozostają zachowane. Wbudowane ikony plików i interfejsu również można wyeksportować wraz z dołączoną licencją.

Limity

Dokument ikon może mieć do 2 MiB. Plik zasobu może mieć do 20 MiB, a cały pakiet do 64 MiB. Motyw może deklarować do 32 fontów, każdy z 1 do 8 źródeł. Obsługiwane formaty to WOFF, WOFF2, TTF i OTF. Brak pliku, ścieżka poza pakietem lub niepoprawna definicja fontu blokują zastosowanie motywu.

Kompletny przykład skojarzeń

Pakiet Workspace file icons zawiera manifest, siedem SVG i poniższy icons.json. Zaimportuj cały folder. ID definicji wybierasz samodzielnie; wartości skojarzeń muszą wskazywać istniejącą definicję.

{
  "iconDefinitions": {
    "document": {
      "iconPath": "./file.svg"
    },
    "folder": {
      "iconPath": "./folder.svg"
    },
    "open": {
      "iconPath": "./folder-open.svg"
    },
    "code": {
      "iconPath": "./code.svg"
    },
    "declaration": {
      "iconPath": "./declaration.svg"
    },
    "readme": {
      "iconPath": "./readme.svg"
    },
    "light": {
      "iconPath": "./light-file.svg"
    }
  },
  "file": "document",
  "folder": "folder",
  "folderExpanded": "open",
  "rootFolder": "folder",
  "rootFolderExpanded": "open",
  "fileExtensions": {
    "ts": "code",
    "d.ts": "declaration",
    "src/ts": "code"
  },
  "fileNames": {
    "readme.md": "readme"
  },
  "languageIds": {
    "json": "code"
  },
  "folderNames": {
    "src": "folder"
  },
  "folderNamesExpanded": {
    "src": "open"
  },
  "light": {
    "file": "light"
  }
}

Zasób	Wybrana definicja
notes.txt w ciemnym trybie	document
notes.txt w jasnym trybie	light
lib/main.ts	code
lib/types.d.ts	declaration
src/main.ts	code, przez skojarzenie z folderem nadrzędnym
README.md	readme, również w jasnym trybie
settings.jsonc w ciemnym trybie	code, przez zapasowe skojarzenie języka JSON
Złożony / rozwinięty src	folder / open

Szczegółowe reguły dopasowania

Dopasowanie kluczy nie rozróżnia wielkości liter. Rozszerzenia zapisuj bez pierwszej kropki: ts lub d.ts. src/ts ogranicza rozszerzenie do bezpośredniego folderu nadrzędnego o nazwie src; nie jest wzorcem glob. fileNames przyjmuje dokładne nazwy plików i postać folder/nazwa. folderNames i folderNamesExpanded przyjmują nazwy z opcjonalnym bezpośrednim rodzicem; mapy folderów głównych dopasowują nazwę korzenia.

Zwykle wygrywa bardziej szczegółowe skojarzenie: domyślny plik, język, rozszerzenie, rozszerzenie wieloczłonowe, a następnie dokładna nazwa pliku. Folder nadrzędny zwiększa szczegółowość. Skojarzenie rozwiniętego folderu może przeważyć nazwane skojarzenie folderu złożonego, dlatego dla własnych folderów dodaj również folderNamesExpanded. Foldery główne używają skojarzeń root, z domyślnymi ikonami zwykłych folderów jako zapasowymi.

Skojarzenia jasne i o wysokim kontraście uczestniczą w tej samej ocenie szczegółowości; nie zastępują bezwarunkowo wszystkich skojarzeń bazowych. Remisy rozstrzyga kolejność definicji wyprowadzona z przechodzenia skojarzeń, a nie po prostu ostatnie tekstowe pole JSON. Pasujące deklaracje łączą się właściwość po właściwości, co ma znaczenie dla rozmiaru i koloru fontu. Dla przewidywalnego wyniku unikaj konkurencyjnych reguł o tej samej szczegółowości.

highContrast działa, gdy aktywny zaimportowany motyw kolorów ma vscode.type równe hcDark lub hcLight. Zastępuje wtedy warstwę skojarzeń light. Ikony nie mają osobnego przełącznika wysokiego kontrastu.

Obrazy i glify

Definicja ikony pliku może używać iconPath do obrazu albo fontCharacter z fontem z fonts. fontId wskazuje zadeklarowany font; bez niego używany jest pierwszy. Strukturę i limity opisuje deklaracja fontów. Definicje fontowe mogą dziedziczyć atrybuty z innych dopasowanych skojarzeń; unikaj mieszania obrazów i glifów dla tego samego zasobu bez sprawdzenia rezultatu.

Dla glifów plików fontColor renderuje kolory szesnastkowe. fontSize nadpisuje size fontu; obsługiwane rozmiary renderowania to procenty lub całkowite wartości w pikselach, domyślnie 150%. Ikony interfejsu mają inne zasady koloru i rozmiaru.

usesCurrentColor: true renderuje obrazy jako maskę w kolorze kontrolki. Użyj tego do jednobarwnych sylwetek; pomiń dla obrazów kolorowych. hidesExplorerArrows dotyczy dekoracji strzałki, a nie możliwości rozwijania folderu. Wszystkie flagi logiczne wymagają rzeczywistych wartości JSON true lub false.

Symbole kontrolek i pełną listę ID opisują Ikony interfejsu.

Kod źródłowy: typy i dopasowanie ikon, natywna walidacja ikon.