Skip to content

fix(icons): clean up icon font usage and update the font#1990

Merged
bajrangCoder merged 3 commits intoAcode-Foundation:mainfrom
bajrangCoder:icon-updates
Mar 28, 2026
Merged

fix(icons): clean up icon font usage and update the font#1990
bajrangCoder merged 3 commits intoAcode-Foundation:mainfrom
bajrangCoder:icon-updates

Conversation

@bajrangCoder
Copy link
Copy Markdown
Member

  • normalize icon references after merging li icons into icons.ttf
  • restore inline alignment for plugin meta icons
  • keep dragged tab icons at the correct size
  • bust icons.ttf cache after glyph updates
  • attached the icomoon project for easily adding new icons in future

- normalize icon references after merging li icons into icons.ttf
- restore inline alignment for plugin meta icons
- keep dragged tab icons at the correct size
- bust icons.ttf cache after glyph updates
- attached the icomoon project for easily adding new icons in future
@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 28, 2026

Greptile Summary

This PR consolidates the two icon fonts (icons.ttf + li-icon.ttf) into a single updated icons.ttf, removing the separate .licons CSS class and migrating all usage sites to the unified .icon class. It also fixes icon sizing inside dragged tabs, restores inline alignment for plugin meta icons, and adds an Icomoon project file for easier future icon management.

Key changes:

  • src/res/icons/style.css: Removed @font-face for li-icon, removed all .licons.* rules, added the merged glyphs (zap, verified, terminal, tag, scale, cart, lightbulb, pin, pin-off, square-terminal, and more) to the .icon.* namespace with a cache-busting ?v2 query string
  • All callsites (codeActions.ts, lspInfoDialog, terminalManager.js, editorFile.js, selectionMenu.js, main.js, mainSettings.js, plugin.view.js, plugins/item.js, file-menu.hbs, menu.hbs, openFolder.js) migrated from licons xxx to the correct format for their rendering context
  • src/components/tile/style.scss: Added .file, .icon size rules inside &.drag to keep dragged-tab icons at the correct 24 × 24 px size
  • src/pages/plugin/plugin.scss: Moved inline-flex / align-items to the parent .meta-item and added flex-shrink: 0 to nested .icon elements, restoring visual alignment in the plugin detail page
  • utils/code-editor-icon.icomoon.json: New Icomoon project file committed for easier future glyph additions
  • src/res/icons/li-icon.ttf: Font file is no longer referenced but remains in the repository

Confidence Score: 5/5

Safe to merge — all remaining findings are minor style/cleanup suggestions with no runtime impact.

No P0 or P1 issues found. The icon migration is thorough (zero remaining licons references in src/), glyph codepoints are consistent between style.css and the updated font, and the two rendering-context patterns (full class string for direct className vs. bare name for components that prepend "icon") are applied correctly across all callsites. Only two P2 items: a pre-existing inconsistency in getCodeActionIcon's fallback string format, and the dead li-icon.ttf binary file still in the repo.

No files require special attention; src/cm/lsp/codeActions.ts has a minor cosmetic inconsistency worth a one-line fix.

Important Files Changed

Filename Overview
src/res/icons/style.css Removed the separate li-icon @font-face declaration and all .licons.* classes; merged glyphs into icons.ttf under unified .icon.* selectors. Cache-busting query string updated to ?v2. Glyph codepoints for scale and lightbulb changed (swapped relative to old li-icon.ttf) — consistent with the new font layout. Several new glyphs added (square-terminal, funnel, user-round, house, etc.).
src/cm/lsp/codeActions.ts Updated fallback icon class from "licons zap" to "icon zap". Minor inconsistency: CODE_ACTION_ICONS entries use bare names (e.g. "build") while the fallback includes the "icon" prefix, resulting in class="icon icon zap" when rendered through select.js. Functionally fine (selector still matches) but inconsistent.
src/components/tile/style.scss Added .file, .icon size rules (24px × 24px, font-size: 1em, flex-shrink: 0) inside the &.drag context so that icon-based tab icons (now using .icon instead of .licons) are correctly sized in dragged tabs.
src/components/terminal/terminalManager.js Updated terminal tab icon from "licons terminal" to "icon square-terminal". Uses the new square-terminal glyph added to icons.ttf, correctly passed as a full class string for direct className assignment.
src/lib/openFolder.js Both context menu "Open in Terminal" entries updated from "licons terminal" to "terminal". Correct — select.js prepends "icon " to produce class="icon terminal", matching the new CSS definition.
src/pages/plugin/plugin.scss Restructured .meta-item to include display: inline-flex; align-items: center; gap: 4px; vertical-align: middle (previously only on .author-name), and added flex-shrink: 0 for .icon inside it. Restores inline alignment for plugin meta icons.
src/settings/mainSettings.js Updated icon values from "licons terminal" / "licons zap" to "terminal" / "zap". Correct — settingsPage.js wraps these as class="icon ${item.icon}", consistent with all other icon entries in this file.
src/views/file-menu.hbs LSP info menu item icon migrated from <span class="licons zap"> to <span class="icon zap">. Matches the new unified icon class system.
src/views/menu.hbs Terminal menu item icon migrated from <span class="licons terminal"> to <span class="icon terminal">. Correct.
utils/code-editor-icon.icomoon.json New Icomoon project file attached for maintainability; allows future icon additions via the Icomoon web app. No code impact.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Icon usage site] --> B{Rendering context}
    B -->|direct className assignment| C["Full class string: 'icon square-terminal'"]
    B -->|select.js dialog icon property| D["Bare name: 'terminal'"]
    B -->|settingsPage.js icon property| E["Bare name: 'terminal'"]
    B -->|Handlebars template| F["Full class string: 'icon pin'"]
    C --> G["class='icon square-terminal'"]
    D --> H["select.js prepends 'icon ' → class='icon terminal'"]
    E --> I["settingsPage prepends 'icon ' → class='icon terminal'"]
    F --> J["class='icon pin'"]
    G --> K[icons.ttf via .icon CSS class]
    H --> K
    I --> K
    J --> K
    style K fill:#3499fe,color:#fff
Loading

Reviews (2): Last reviewed commit: "fix" | Re-trigger Greptile

@bajrangCoder

This comment was marked as outdated.

@bajrangCoder bajrangCoder merged commit 2005f2e into Acode-Foundation:main Mar 28, 2026
6 checks passed
@bajrangCoder bajrangCoder deleted the icon-updates branch March 28, 2026 16:54
@bajrangCoder bajrangCoder mentioned this pull request Mar 28, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant