Improves icon usage and generation

.fantasticonrc.js

@@ -12,10 +12,12 @@ const config = {
 	fontTypes: ['woff2'],
 	normalize: true,
 	// @ts-ignore
-	assetTypes: ['html', 'scss', 'json'],
+	assetTypes: ['html', 'scss', 'json', 'sass', 'css'],
 	templates: {
 		html: './images/icons/template/icons-contribution.hbs',
 		scss: './images/icons/template/styles.hbs',
+		sass: './images/icons/template/sass-map.hbs',
+		css: './images/icons/template/component-map.hbs',
 	},
 	formatOptions: {
 		json: {
@@ -25,8 +27,10 @@ const config = {
 	pathOptions: {
 		woff2: './dist/glicons.woff2',
 		scss: './dist/glicons.scss',
+		sass: './dist/glicons-map.scss',
 		html: './dist/icons-contribution.json',
 		json: './images/icons/template/mapping.json',
+		css: './dist/glicons-map.ts',
 	},
 };
 

.prettierignore

@@ -4,8 +4,14 @@ out
 node_modules
 git.d.ts
 glicons.scss
+images/icons/template/component-map.hbs
 images/icons/template/icons-contribution.hbs
 images/icons/template/mapping.json
+images/icons/template/sass-map.hbs
 images/icons/template/styles.hbs
 src/emojis.generated.ts
+src/webviews/apps/shared/components/icons/codicons-map.ts
+src/webviews/apps/shared/components/icons/glicons-map.ts
+src/webviews/apps/shared/styles/icons/codicons-map.scss
+src/webviews/apps/shared/styles/icons/glicons-map.scss
 pnpm-lock.yaml

images/icons/template/component-map.hbs

@@ -0,0 +1,10 @@
+// This file is generated by (vscode-gitlens)/scripts/export-codicons.js
+// Do not edit this file directly
+
+export const iconFontFamily = '{{ name }}';
+
+export const iconMap = Object.freeze({
+{{#each codepoints}}
+	'{{ @key }}': '\\\{{ codepoint this }}',
+{{/each}}
+});

images/icons/template/mapping.json

@@ -27,7 +27,6 @@
   "switch": 61720,
   "expand": 61721,
   "list-auto": 61722,
-  "repo-force-push": 61723,
   "pinned-filled": 61724,
   "clock": 61725,
   "provider-azdo": 61726,
@@ -46,11 +45,6 @@
   "repository-filled": 61739,
   "gitlens-filled": 61740,
   "code-suggestion": 61741,
-  "diff-multiple": 61742,
-  "diff-single": 61743,
-  "repo-fetch": 61744,
-  "repo-pull": 61745,
-  "repo-push": 61746,
   "provider-jira": 61747,
   "play-button": 61748,
   "rocket-filled": 61749,

images/icons/template/sass-map.hbs

@@ -0,0 +1,10 @@
+// This file is generated by (vscode-gitlens)/scripts/export-codicons.js
+// Do not edit this file directly
+
+$icon-font-family: '{{ name }}';
+
+$icon-map: (
+{{#each codepoints}}
+	'{{@key}}': '\\{{ codepoint this }}',
+{{/each}}
+);

package.json

@@ -7014,21 +7014,21 @@
 				"command": "gitlens.fetchRepositories",
 				"title": "Fetch",
 				"category": "GitLens",
-				"icon": "$(gitlens-repo-fetch)",
+				"icon": "$(repo-fetch)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.pullRepositories",
 				"title": "Pull",
 				"category": "GitLens",
-				"icon": "$(gitlens-repo-pull)",
+				"icon": "$(repo-pull)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.pushRepositories",
 				"title": "Push",
 				"category": "GitLens",
-				"icon": "$(gitlens-repo-push)",
+				"icon": "$(repo-push)",
 				"enablement": "!operationInProgress"
 			},
 			{
@@ -7112,7 +7112,7 @@
 			{
 				"command": "gitlens.views.fetch",
 				"title": "Fetch",
-				"icon": "$(gitlens-repo-fetch)",
+				"icon": "$(repo-fetch)",
 				"enablement": "!operationInProgress"
 			},
 			{
@@ -7130,19 +7130,19 @@
 			{
 				"command": "gitlens.views.pull",
 				"title": "Pull",
-				"icon": "$(gitlens-repo-pull)",
+				"icon": "$(repo-pull)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.views.push",
 				"title": "Push",
-				"icon": "$(gitlens-repo-push)",
+				"icon": "$(repo-push)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.views.pushWithForce",
 				"title": "Push (force)",
-				"icon": "$(gitlens-repo-force-push)",
+				"icon": "$(repo-force-push)",
 				"enablement": "!operationInProgress"
 			},
 			{
@@ -7482,7 +7482,7 @@
 			{
 				"command": "gitlens.views.pushToCommit",
 				"title": "Push to Commit...",
-				"icon": "$(gitlens-repo-push)",
+				"icon": "$(repo-push)",
 				"enablement": "!operationInProgress"
 			},
 			{
@@ -8829,25 +8829,25 @@
 			{
 				"command": "gitlens.graph.push",
 				"title": "Push",
-				"icon": "$(gitlens-repo-push)",
+				"icon": "$(repo-push)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.graph.pull",
 				"title": "Pull",
-				"icon": "$(gitlens-repo-pull)",
+				"icon": "$(repo-pull)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.graph.pushWithForce",
 				"title": "Push (force)",
-				"icon": "$(gitlens-repo-force-push)",
+				"icon": "$(repo-force-push)",
 				"enablement": "!operationInProgress"
 			},
 			{
 				"command": "gitlens.graph.fetch",
 				"title": "Fetch",
-				"icon": "$(gitlens-repo-fetch)",
+				"icon": "$(repo-fetch)",
 				"enablement": "!operationInProgress"
 			},
 			{
@@ -9513,13 +9513,6 @@
 					"fontCharacter": "\\f11a"
 				}
 			},
-			"gitlens-repo-force-push": {
-				"description": "repo-force-push icon",
-				"default": {
-					"fontPath": "dist/glicons.woff2",
-					"fontCharacter": "\\f11b"
-				}
-			},
 			"gitlens-pinned-filled": {
 				"description": "pinned-filled icon",
 				"default": {
@@ -9646,41 +9639,6 @@
 					"fontCharacter": "\\f12d"
 				}
 			},
-			"gitlens-diff-multiple": {
-				"description": "diff-multiple icon",
-				"default": {
-					"fontPath": "dist/glicons.woff2",
-					"fontCharacter": "\\f12e"
-				}
-			},
-			"gitlens-diff-single": {
-				"description": "diff-single icon",
-				"default": {
-					"fontPath": "dist/glicons.woff2",
-					"fontCharacter": "\\f12f"
-				}
-			},
-			"gitlens-repo-fetch": {
-				"description": "repo-fetch icon",
-				"default": {
-					"fontPath": "dist/glicons.woff2",
-					"fontCharacter": "\\f130"
-				}
-			},
-			"gitlens-repo-pull": {
-				"description": "repo-pull icon",
-				"default": {
-					"fontPath": "dist/glicons.woff2",
-					"fontCharacter": "\\f131"
-				}
-			},
-			"gitlens-repo-push": {
-				"description": "repo-push icon",
-				"default": {
-					"fontPath": "dist/glicons.woff2",
-					"fontCharacter": "\\f132"
-				}
-			},
 			"gitlens-provider-jira": {
 				"description": "provider-jira icon",
 				"default": {
@@ -19559,7 +19517,7 @@
 		"build:extension": "webpack --mode development --config-name extension:node",
 		"build:extension:browser": "webpack --mode development --config-name extension:webworker",
 		"build:webviews": "webpack --mode development --config-name webviews",
-		"build:icons": "pnpm run icons:svgo && pnpm fantasticon && pnpm run icons:apply",
+		"build:icons": "pnpm run icons:svgo && pnpm fantasticon && pnpm run icons:apply && pnpm run icons:export",
 		"build:tests": "node ./scripts/esbuild.tests.mjs --mode development",
 		"generate:docs:telemetry": "node ./scripts/generate-telemetry-docs.mjs",
 		"generate:emoji": "node ./scripts/generateEmojiShortcodeMap.mjs",
@@ -19576,6 +19534,7 @@
 		"graph:unlink": "pnpm unlink @gitkraken/gitkraken-components && pnpm install --force",
 		"graph:unlink:main": "pnpm graph:unlink && pushd \"../GitKrakenComponents\" && pnpm unlink && popd",
 		"icons:apply": "node ./scripts/applyIconsContribution.mjs",
+		"icons:export": "node ./scripts/export-codicons.mjs",
 		"icons:svgo": "svgo -q -f ./images/icons/ --config svgo.config.js",
 		"lint": "pnpm run clean:lint && eslint .",
 		"lint:fix": "pnpm run clean:lint && eslint . --fix",

scripts/applyIconsContribution.mjs

@@ -8,6 +8,10 @@ const packageJSONPromises = Promise.all([
 const scssPromises = Promise.all([
 	fs.promises.readFile('./dist/glicons.scss', 'utf8'),
 	fs.promises.readFile('./src/webviews/apps/shared/glicons.scss', 'utf8'),
+	fs.promises.readFile('./dist/glicons-map.scss', 'utf8'),
+	fs.promises.readFile('./src/webviews/apps/shared/styles/icons/glicons-map.scss', 'utf8'),
+	fs.promises.readFile('./dist/glicons-map.ts', 'utf8'),
+	fs.promises.readFile('./src/webviews/apps/shared/components/icons/glicons-map.ts', 'utf8'),
 ]);
 
 let pending = [];
@@ -22,11 +26,24 @@ if (JSON.stringify(packageJSON.contributes.icons) !== JSON.stringify(icons.icons
 }
 
 // Update the scss file
-const [newScss, scss] = await scssPromises;
+const [newScss, scss, newSassMap, sassMap, newTsMap, tsMap] = await scssPromises;
 
 if (scss !== newScss) {
 	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/glicons.scss', newScss));
 }
 
-pending.push(fs.promises.rm('./dist/icons-contribution.json'), fs.promises.rm('./dist/glicons.scss'));
+if (sassMap !== newSassMap) {
+	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/styles/icons/glicons-map.scss', newSassMap));
+}
+
+if (tsMap !== newTsMap) {
+	pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/icons/glicons-map.ts', newTsMap));
+}
+
+pending.push(
+	fs.promises.rm('./dist/icons-contribution.json'),
+	fs.promises.rm('./dist/glicons.scss'),
+	fs.promises.rm('./dist/glicons-map.scss'),
+	fs.promises.rm('./dist/glicons-map.ts'),
+);
 await Promise.allSettled(pending);

scripts/export-codicons.mjs

@@ -0,0 +1,46 @@
+import fs from 'fs';
+
+function numberToCssContent(number, escape = '\\\\') {
+	return `${escape}${number.toString(16)}`;
+}
+
+console.time('Exported codicons');
+
+const { default: iconConfig } = await import('../node_modules/@vscode/codicons/.fantasticonrc.js');
+const { name, codepoints: icons } = iconConfig;
+
+const headerText = `// This file is generated by (vscode-gitlens)/scripts/export-codicons.js
+// Do not edit this file directly
+`;
+
+const sassMapEntries = [];
+const tsMapEntries = [];
+for (const [key, value] of Object.entries(icons)) {
+	sassMapEntries.push(`	'${key}': '${numberToCssContent(value, '\\')}'`);
+	tsMapEntries.push(`	'${key}': '${numberToCssContent(value)}'`);
+}
+
+// create a sass map of codicons and a ts file with a frozen object
+const scss = `${headerText}
+$icon-font-family: '${name}';
+
+$icon-map: (
+${sassMapEntries.join(',\n')}
+);
+`;
+
+const ts = `${headerText}
+export const iconFontFamily = '${name}';
+
+export const iconMap = Object.freeze({
+${tsMapEntries.join(',\n')}
+});
+`;
+
+const pending = [];
+
+pending.push(fs.promises.writeFile('./src/webviews/apps/shared/styles/icons/codicons-map.scss', scss));
+pending.push(fs.promises.writeFile('./src/webviews/apps/shared/components/icons/codicons-map.ts', ts));
+
+await Promise.allSettled(pending);
+console.timeEnd('Exported codicons');

src/commands/quickCommand.buttons.ts

@@ -73,7 +73,7 @@ export const FeedbackQuickInputButton: QuickInputButton = {
 };
 
 export const FetchQuickInputButton: QuickInputButton = {
-	iconPath: new ThemeIcon('gitlens-repo-fetch'),
+	iconPath: new ThemeIcon('repo-fetch'),
 	tooltip: 'Fetch',
 };
 

src/webviews/apps/commitDetails/components/gl-status-nav.ts

@@ -140,7 +140,7 @@ export class GlStatusNav extends LitElement {
 			<div class="group">
 				<gl-tooltip hoist content="Fetch">
 					<a href="#" class="commit-action" @click=${(e: MouseEvent) => this.handleAction(e, 'fetch')}
-						><code-icon icon="gl-repo-fetch"></code-icon></a
+						><code-icon icon="repo-fetch"></code-icon></a
 				></gl-tooltip>
 			</div>
 		`;

src/webviews/apps/commitDetails/components/gl-wip-details.ts

@@ -205,7 +205,7 @@ export class GlWipDetails extends GlDetailsBase {
 		if (ahead === 0 && behind === 0) return undefined;
 
 		const fetchLabel = behind > 0 ? 'Pull' : ahead > 0 ? 'Push' : 'Fetch';
-		const fetchIcon = behind > 0 ? 'gl-repo-pull' : ahead > 0 ? 'gl-repo-push' : 'gl-repo-fetch';
+		const fetchIcon = behind > 0 ? 'repo-pull' : ahead > 0 ? 'repo-push' : 'repo-fetch';
 
 		return html`<p class="button-container">
 			<span class="button-group button-group--single">
@@ -278,7 +278,7 @@ export class GlWipDetails extends GlDetailsBase {
 				<action-nav slot="actions">
 					<action-item
 						label="Open Pull Request Changes"
-						icon="gl-diff-multiple"
+						icon="diff-multiple"
 						@click=${() => this.onDataActionClick('open-pr-changes')}
 					></action-item>
 					<action-item