Add custom SVG icons to salesforcedx-vscode-services for font generation. Use when adding new icons to media/icons-src, creating SVG icons for VS Code extension, or defining font-based icons.
packages/salesforcedx-vscode-services/media/icons-src/
0 0 24 24 only (enables better upscaling)http://www.w3.org/2000/svgcurrentColor on inner <g> so VS Code themes control color<g fill="currentColor" transform="scale(X)"> — adjust scale so glyph fits 24×24External sources (Wikipedia, Illustrator, etc.) may be too complex for font generation. Simplify in vector editor or substitute alternative.
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g fill="currentColor" transform="scale(0.75)">
<path d="..."></path>
</g>
</svg>
fill="#000") — breaks theme supportstroke="currentColor" if usedAdd SVG — media/icons-src/<name>.svg (name = lowercase, no spaces)
Add manifest entry — media/icons-src/icons.json:
"<name>": { "id": "sf-org-<id>", "description": "..." }
Run build — npm run build:icons -w salesforcedx-vscode-services (updates contributes.icons in package.json)
Add ICONS constant — src/vscode/mediaService.ts and ICON_DESCRIPTION_KEYS; add i18n key in messages if needed
Regenerate types — if services-types consumes ICONS, run its generate script
{
"leaf": { "id": "sf-org-leaf", "description": "Leaf icon for default scratch org" },
"tree": { "id": "sf-org-tree", "description": "Tree icon for default dev hub" }
}
0xe001, 0xe002, … code point assignments).svgid = VS Code icon ID (use sf-org-* for custom icons)description = human-readable, used in contributes.icons| Artifact | Add | Remove |
|---|---|---|
media/icons-src/<name>.svg | create | delete |
media/icons-src/icons.json | add entry | remove entry |
package.json → contributes.icons | auto (build:icons) | auto |
resources/icons-font/* | auto (build:icons) | auto |
src/vscode/mediaService.ts → ICONS, ICON_DESCRIPTION_KEYS | manual | manual |
src/messages/* (i18n) | manual if needed | manual |
salesforcedx-vscode-services-types (icons.ts) | manual (generate script) | manual |
Run npm run test -w salesforcedx-vscode-services — iconConsistency.test.ts validates SVG ↔ icons.json ↔ contributes.icons ↔ ICONS constant.