Ikony interfejsu

Ikony interfejsu zastępują symbole przycisków i innych kontrolek Lomi. Wybierasz je w Settings > Themes > Interface icons, niezależnie od kolorów i ikon plików.

Najszybszy początek

Otwórz kategorię Interface icons.
Wybierz Create icon theme albo Duplicate na Lomi interface icons.
W otwartym folderze zmień name w theme.jsonc i definicje w icons.json.
Zapisz pliki, wybierz Refresh, a następnie Use theme przy swojej kopii.

Starter zawiera działający font i jego licencję. Open icon definitions otwiera folder z plikami; nie jest graficznym edytorem ikon. Edytuj lokalną kopię, ponieważ pakiety pluginów są tylko do odczytu.

Kompletny mały pakiet

examples/plain-interface-icons zawiera poniższe dokumenty, lucide.woff2 i LICENSE.txt. Skopiuj cały folder. Pozostawione pięć definicji używa fontu Lucide; pozostałe kontrolki korzystają z wbudowanych ikon.

theme.jsonc:

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

icons.json:

{
  "fonts": [
    {
      "id": "lomi-lucide",
      "src": [
        {
          "path": "lucide.woff2",
          "format": "woff2"
        }
      ],
      "weight": "normal",
      "style": "normal"
    }
  ],
  "iconDefinitions": {
    "terminal": {
      "fontCharacter": "\ue181",
      "fontId": "lomi-lucide"
    },
    "search": {
      "fontCharacter": "\ue151",
      "fontId": "lomi-lucide"
    },
    "settings-gear": {
      "fontCharacter": "\ue154",
      "fontId": "lomi-lucide"
    },
    "add": {
      "fontCharacter": "\ue13d",
      "fontId": "lomi-lucide"
    },
    "close": {
      "fontCharacter": "\ue1b2",
      "fontId": "lomi-lucide"
    }
  }
}

fontCharacter to znak z dołączonego fontu, a nie dowolny numer ikony. JSON "\ue196" jest zapisem znaku Unicode. Możesz także użyć literalnego znaku albo tekstowego escape CSS, np. "\\e196", jeżeli taki glif istnieje w wybranym foncie. Przy wymianie fontu dopasuj kody do jego mapy znaków.

Pola definicji i fontu

Pole	Reguła
`iconDefinitions`	Mapa obsługiwanego identyfikatora na definicję glifu; maksymalnie 8192 definicje.
`fontCharacter`	Wymagany dla każdej ikony interfejsu; niepusty tekst, maksymalnie 16 znaków, bez znaków sterujących.
`fontId`	ID fontu z `fonts`; bez niego używany jest pierwszy font. Nieistniejące ID jest błędem.
`iconPath`	Niedozwolony dla ikon interfejsu. Obrazy są obsługiwane w ikonach plików.
`fonts[].id`	Unikatowe, niepuste ID, maksymalnie 128 bajtów.
`fonts[].src`	1-8 lokalnych źródeł `{ path, format }`, względnych do dokumentu ikon.
`format`	`woff`, `woff2`, `truetype` dla TTF lub `opentype` dla OTF.
`weight`, `style`, `size`	Opcjonalne tekstowe właściwości fontu. Dla fontu zwykłego pomiń je lub użyj `normal` dla `weight` i `style`.

Motyw interfejsu musi zawierać co najmniej jeden font, maksymalnie 32. Kontrolki narzucają rozmiar glifu i dziedziczą kolor tekstu. Pola fontColor, fontSize i fonts[].size nie zmieniają ich wyglądu tak jak w ikonach plików.

Obsługiwane identyfikatory

Pierwszy identyfikator jest preferowany; kolejne są aliasami sprawdzanymi po kolei. Jeśli motyw nie dostarcza definicji, Lomi używa wskazanej ikony wbudowanej. Tabela obejmuje pełną mapę bieżącej implementacji.

Ikona wbudowana	Identyfikatory w kolejności
`ArrowDown`	`arrow-down`
`ArrowLeft`	`arrow-left`
`ArrowRight`	`arrow-right`
`ArrowUp`	`arrow-up`
`Camera`	`device-camera`
`CaseSensitive`	`search-case-sensitive`, `case-sensitive`
`Check`	`check`
`ChevronDown`	`chevron-down`
`ChevronLeft`	`chevron-left`
`ChevronRight`	`chevron-right`
`ChevronsDownUp`	`collapse-all`
`ChevronsUpDown`	`expand-all`
`CircleAlert`	`error`
`Circle`	`circle-outline`
`Code`	`code`
`Columns2`	`split-horizontal`
`Command`	`symbol-key`
`Copy`	`copy`
`Download`	`cloud-download`
`Ellipsis`	`more`
`ExternalLink`	`link-external`
`Eye`	`eye`
`EyeOff`	`eye-closed`
`File`	`file`
`FileCode`	`file-code`
`FileDiff`	`diff`
`FileJson`	`json`
`FilePlus2`	`explorer-new-file`, `new-file`
`FileText`	`file-text`
`Folder`	`folder`
`FolderOpen`	`folder-opened`
`GitBranch`	`git-branch`
`GitCommitHorizontal`	`git-commit`
`Globe`	`globe`
`History`	`history`
`Import`	`import`
`Info`	`info`
`Keyboard`	`keyboard`
`Layers`	`layers`
`LayoutGrid`	`layout`
`ListX`	`clear-all`
`Maximize2`	`screen-full`
`Menu`	`menu`
`Minimize2`	`screen-normal`
`Minus`	`remove`
`Monitor`	`device-desktop`
`Moon`	`moon`
`Palette`	`color-mode`
`PanelLeft`	`layout-sidebar-left`
`PanelRight`	`layout-sidebar-right`
`Pencil`	`edit`
`Pin`	`pin`
`PinOff`	`pinned-dirty`, `pin`
`Play`	`play`
`Plus`	`add`
`Power`	`power`
`Puzzle`	`extensions`
`Redo2`	`redo`
`RefreshCw`	`refresh`
`Regex`	`search-regex`, `regex`
`RotateCcw`	`discard`
`RotateCw`	`refresh`
`Save`	`save`
`Search`	`search`
`Settings`	`settings-gear`, `gear`
`ShieldCheck`	`shield`
`Smartphone`	`device-mobile`
`Square`	`primitive-square`
`SquareArrowRight`	`sign-out`
`SquareDot`	`record-small`
`SquareMinus`	`diff-removed`
`SquarePlus`	`diff-added`
`Sun`	`lightbulb`
`Terminal`	`terminal`
`Trash2`	`trash`
`Undo2`	`undo`
`WholeWord`	`search-whole-word`, `whole-word`
`WrapText`	`word-wrap`
`X`	`close`

Identyfikatory zależne od kontrolki

Te definicje mają pierwszeństwo dla konkretnego przycisku. Jeśli ich brakuje, kontrolka korzysta z ogólnych identyfikatorów powyżej.

ID	Zapasowa ikona
`chrome-minimize`	`Minus`
`chrome-maximize`	`Square`
`chrome-close`	`X`
`dialog-close`	`X`
`tab-close`	`X`

Granice i sprawdzenie efektu

Sprawdź przyciski wyszukiwania, ustawień, terminala, dodawania i zamykania. Zmień kolory aplikacji i potwierdź, że glify nadal dziedziczą kolor kontrolki. Brak glifu w istniejącym foncie może wyglądać jak pusty symbol mimo poprawnej definicji.

Motyw nie podmienia ikon narysowanych przez plugin, zawartości stron internetowych ani oddzielnego zestawu ikon plików. Nie dodaje też funkcji VS Code odpowiadających nieznanym identyfikatorom. Ładowanie wymaganego fontu ma limit czasu; przy błędzie pozostaje ostatni działający wygląd.

Import folderu, obserwowanie zmian, limity zasobów i eksport działają tak jak dla ikon plików. Eksportuj przyciskiem Export to VS Code i zachowaj licencję fontu przy udostępnianiu.

Źródła: product-icons.ts, IconGlyph.tsx, icons.rs.