feat!: add generated, font-based icon themes (#18)

implement a system that generates file icon themes from a single set of
svg icons. this system will use fantasticon to generate the icon font
file and other assets for consuming the icons.

marked as a breaking change because it deprecates the old svg icon
themes (despite the general backwards compatibility of the new system).

this one's a big one, but it can't be helped 😭

Author: lewxdev

.fantasticonrc

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+const { FontAssetType, OtherAssetType } = require("fantasticon");
+
+/** @type {import("fantasticon").RunnerOptions} */
+module.exports = {
+  name: "glyph",
+  inputDir: "static/icons",
+  outputDir: "static",
+  assetTypes: [OtherAssetType.TS],
+  fontTypes: [FontAssetType.WOFF],
+  formatOptions: {
+    ts: {
+      types: ["constant", "enum"],
+    },
+  },
+  pathOptions: {
+    ts: "src/constants/glyph.ts",
+  },
+  getIconId({ basename }) {
+    return basename.replaceAll("-", "_");
+  },
+};

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
 
       - run: |
           bun install
-          bun run build:vsix
+          bun run build --production
           echo "filepath=$(ls dist/*.vsix)" >> $GITHUB_ENV
           echo "version=$(ls dist/*.vsix | grep -oE '\d+\.\d+\.\d+')" >> $GITHUB_ENV
 

bun.lockb

@@ -50,19 +50,24 @@
   },
   "scripts": {
     "build": "bun run clean && bun run scripts/build.ts",
-    "build:vsix": "bun run build --production",
     "clean": "git clean -xdf dist",
+    "generate": "fantasticon",
     "prepare": "husky"
   },
+  "dependencies": {
+    "brace-expansion": "^4.0.0"
+  },
   "devDependencies": {
     "@commitlint/cli": "^19",
     "@commitlint/config-conventional": "^19",
     "@tsconfig/bun": "^1.0.7",
     "@tsconfig/strictest": "^2.0.5",
+    "@types/brace-expansion": "^1.1.2",
     "@types/bun": "^1.1.6",
     "@types/vscode": "^1.87",
     "@vscode/vsce": "^2.25.0",
     "esbuild": "^0.23.0",
+    "fantasticon": "^3.0.0",
     "husky": "^9"
   },
   "commitlint": {

package.json

@@ -1,12 +1,12 @@
 import { build } from "esbuild";
+import * as themes from "../src/themes";
 
 const isProduction = process.argv.includes("--production");
 
-// see: https://code.visualstudio.com/api/working-with-extensions/bundling-extension#using-esbuild
+// see: https://aka.ms/vscode-bundle-extension#using-esbuild
 await build({
   entryPoints: [
-    "static/**/*",
-    "theme/**/*",
+    "static/*",
     "src/extension.ts",
     "package.json",
     "package.nls.json",
@@ -19,6 +19,7 @@ await build({
     ".md": "copy",
     ".png": "copy",
     ".svg": "copy",
+    ".woff": "copy",
   },
   outdir: "dist",
   external: ["vscode"],
@@ -30,7 +31,11 @@ await build({
   sourcemap: !isProduction,
 });
 
+await Array.fromAsync(Object.values(themes), async (theme) => {
+  await theme.write();
+});
+
 if (isProduction) {
   const { createVSIX } = await import("@vscode/vsce");
-  await createVSIX({ cwd: "dist" });
+  await createVSIX({ cwd: "dist", dependencies: false });
 }

scripts/build.ts

@@ -0,0 +1,95 @@
+export enum Glyph {
+  Vue = "vue",
+  Video = "video",
+  Triangle = "triangle",
+  Test = "test",
+  Tag = "tag",
+  Table = "table",
+  Svelte = "svelte",
+  Shield = "shield",
+  Shell = "shell",
+  Settings = "settings",
+  RootFolder = "root_folder",
+  RootFolderExpanded = "root_folder_expanded",
+  React = "react",
+  Prisma = "prisma",
+  Parenthesis = "parenthesis",
+  OpenSource = "open_source",
+  Next = "next",
+  Microsoft = "microsoft",
+  Merge = "merge",
+  Lock = "lock",
+  Information = "information",
+  Image = "image",
+  I18n = "i18n",
+  History = "history",
+  Git = "git",
+  Gatsby = "gatsby",
+  Format = "format",
+  Folder = "folder",
+  FolderExpanded = "folder_expanded",
+  Fingerprint = "fingerprint",
+  File = "file",
+  Expo = "expo",
+  Eslint = "eslint",
+  Document = "document",
+  Docs = "docs",
+  Database = "database",
+  Copyright = "copyright",
+  Commit = "commit",
+  Certificate = "certificate",
+  Camera = "camera",
+  Brackets = "brackets",
+  Braces = "braces",
+  Audio = "audio",
+  Archive = "archive",
+  Angular = "angular",
+}
+
+export const GLYPH_CODEPOINTS: { [key in Glyph]: string } = {
+  [Glyph.Vue]: "61697",
+  [Glyph.Video]: "61698",
+  [Glyph.Triangle]: "61699",
+  [Glyph.Test]: "61700",
+  [Glyph.Tag]: "61701",
+  [Glyph.Table]: "61702",
+  [Glyph.Svelte]: "61703",
+  [Glyph.Shield]: "61704",
+  [Glyph.Shell]: "61705",
+  [Glyph.Settings]: "61706",
+  [Glyph.RootFolder]: "61707",
+  [Glyph.RootFolderExpanded]: "61708",
+  [Glyph.React]: "61709",
+  [Glyph.Prisma]: "61710",
+  [Glyph.Parenthesis]: "61711",
+  [Glyph.OpenSource]: "61712",
+  [Glyph.Next]: "61713",
+  [Glyph.Microsoft]: "61714",
+  [Glyph.Merge]: "61715",
+  [Glyph.Lock]: "61716",
+  [Glyph.Information]: "61717",
+  [Glyph.Image]: "61718",
+  [Glyph.I18n]: "61719",
+  [Glyph.History]: "61720",
+  [Glyph.Git]: "61721",
+  [Glyph.Gatsby]: "61722",
+  [Glyph.Format]: "61723",
+  [Glyph.Folder]: "61724",
+  [Glyph.FolderExpanded]: "61725",
+  [Glyph.Fingerprint]: "61726",
+  [Glyph.File]: "61727",
+  [Glyph.Expo]: "61728",
+  [Glyph.Eslint]: "61729",
+  [Glyph.Document]: "61730",
+  [Glyph.Docs]: "61731",
+  [Glyph.Database]: "61732",
+  [Glyph.Copyright]: "61733",
+  [Glyph.Commit]: "61734",
+  [Glyph.Certificate]: "61735",
+  [Glyph.Camera]: "61736",
+  [Glyph.Brackets]: "61737",
+  [Glyph.Braces]: "61738",
+  [Glyph.Audio]: "61739",
+  [Glyph.Archive]: "61740",
+  [Glyph.Angular]: "61741",
+};

src/constants/glyph.ts

@@ -0,0 +1,9 @@
+const COLOR_DEFAULT = "#7b7d84" as const;
+const COLOR_LIGHT = "#62646a" as const;
+
+export const DEFAULT_COLOR_MAP = [
+  ["default", COLOR_DEFAULT],
+  ["light", COLOR_LIGHT],
+] as const;
+
+export const PREFIX = "glyph" as const;

src/constants/index.ts

@@ -0,0 +1,127 @@
+import { Glyph } from "./constants/glyph";
+import { IconSet } from "./utils/icon-set";
+
+export const minimal = new IconSet("minimal");
+
+export const legacy = new IconSet("legacy")
+  .icon(Glyph.Angular, {
+    fileExtensions:
+      "{component,directive,guard,module,resolver,service,pipe}.{js,ts},filter.js,ng-template",
+    fileNames: "angular.json,angular-cli.json",
+  })
+  .icon(Glyph.Archive, {
+    fileExtensions: "7z,br,brotli,bzip2,gz,gzip,rar,tar,tgz,xz,zip",
+  })
+  .icon(Glyph.Audio, {
+    fileExtensions: "aiff,flac,m4a,mp3,wav,wma",
+  })
+  .icon(Glyph.Braces, {
+    fileExtensions: "js",
+    languageIds:
+      "c,coffeescript,cpp,csharp,css,fsharp,go,groovy,handlebars,html,jade,java,javascript,javascriptreact,less,lua,objective-c,perl,php,properties,python,ruby,rust,scss,swift,typescript,typescriptreact,xml,yaml",
+  })
+  .icon(Glyph.Brackets, {
+    fileExtensions: "htm,html,xml",
+  })
+  .icon(Glyph.Camera, {
+    fileExtensions: "snap",
+  })
+  .icon(Glyph.Certificate, {
+    fileExtensions: "cer,cert,crt",
+    fileNames: "{licence,license,unlicense}{,.md,.txt}",
+  })
+  .icon(Glyph.Copyright, {
+    fileNames: "authors{,.md,.txt}",
+  })
+  .icon(Glyph.Database, {
+    fileExtensions: "graphql,json,sqlite",
+    languageIds: "json,sql",
+  })
+  .icon(Glyph.Docs, {
+    fileExtensions: "md,mdx",
+    languageIds: "markdown",
+  })
+  .icon(Glyph.Document, {
+    fileExtensions: "doc,docx,pdf,ppt,pptx,rtf,txt",
+    fileNames: "_headers,_redirects,.htaccess,robots.txt,sitemap.xml",
+  })
+  .icon(Glyph.Fingerprint, {
+    fileExtensions: "asc,gpg,key,pem,pub",
+    fileNames: ".htpasswd",
+  })
+  .icon(Glyph.Format, {
+    fileNames:
+      ".prettierignore,.prettierrc{,.js,.json,.yaml,.yml},prettier.config.js",
+  })
+  .icon(Glyph.Gatsby, {
+    fileNames: "gatsby-{browser,config,node,ssr}.js",
+  })
+  .icon(Glyph.Git, {
+    fileExtensions: "patch",
+    fileNames:
+      ".git-history,.gitattributes,.gitconfig,.gitignore,.gitkeep,.gitmodules",
+  })
+  .icon(Glyph.History, {
+    fileNames: "{changelog,changes}{,.md,.txt}",
+  })
+  .icon(Glyph.I18n, {
+    fileExtensions: "mo,po,pot",
+  })
+  .icon(Glyph.Image, {
+    fileExtensions:
+      "bmp,eps,gif,ico,img,jpeg,jpg,png,psd,raw,svg,tif,tiff,webp",
+  })
+  .icon(Glyph.Information, {
+    fileExtensions: "log",
+    fileNames: "readme{,.md,.txt}",
+  })
+  .icon(Glyph.Lock, {
+    fileExtensions: "lock",
+    fileNames: "security{,.md,.txt}",
+  })
+  .icon(Glyph.Microsoft, {
+    fileExtensions:
+      "code-workplace,csproj,ruleset,sln,suo,vb,vbs,{vcxitems,vcxproj}{,.filters},vscodeignore,vsix,vsixmanifest",
+  })
+  .icon(Glyph.OpenSource, {
+    fileNames: "contributing.md,credits{,.md,.txt}",
+  })
+  .icon(Glyph.Parenthesis, {
+    fileExtensions: "cl,el,elc,fasl,l,lisp,lsp,wat",
+    languageIds: "clojure",
+  })
+  .icon(Glyph.React, {
+    fileExtensions: "jsx,tsx",
+  })
+  .icon(Glyph.Settings, {
+    fileExtensions:
+      "cfg,conf,config,dlc,dll,env{,.example},ini,option,prefs,prop,properties,props,settings,sln.dotsettings{,.user},toml",
+    fileNames:
+      ".buildignore,.jshintignore,.clang-{format,tidy},.mrconfig,.yardopts,manifest.mf,package.json",
+    languageIds: "makefile",
+  })
+  .icon(Glyph.Shell, {
+    fileExtensions: "awk,fish,tcsh,zshrc",
+    languageIds: "bat,powershell,shellscript",
+  })
+  .icon(Glyph.Shield, {
+    fileNames:
+      ".eslintcache,.eslintignore,.eslintrc{,.cjs,.js,.json,.yaml,.yml}",
+  })
+  .icon(Glyph.Table, {
+    fileExtensions: "csv,tsv,xls,xlsx",
+  })
+  .icon(Glyph.Tag, {
+    fileExtensions: "css,less,sass,scss,styl",
+  })
+  .icon(Glyph.Test, {
+    fileExtensions:
+      "e2e-spec.{js,ts},{js,jsx,ts,tsx}.snap,{spec,test}.{js,jsx,ts,tsx}",
+  })
+  .icon(Glyph.Video, {
+    fileExtensions: "avi,m2v,m4v,mkv,mov,mp4,mpeg,mpg,mpv,webm,wmv",
+  })
+  .icon(Glyph.Vue, {
+    fileExtensions: "store.{js,ts},vue",
+    fileNames: "store.{js,ts},{nuxt.config,vue.config}.{js,ts}",
+  });