we do a little icon codegen refactor

packages/interface/package.json

@@ -9,7 +9,7 @@
 		"./types": "./src/types"
 	},
 	"scripts": {
-		"icons": "ts-node ./scripts/generateSvgImports.mjs"
+		"icons": "./scripts/generateSvgImports.mjs"
 	},
 	"dependencies": {
 		"@apollo/client": "^3.5.10",

packages/interface/scripts/generateSvgImports.mjs

@@ -1,43 +1,60 @@
-import * as fs from 'fs/promises';
-import * as path from 'path';
+#!/usr/bin/env node
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import { format as prettierFormat } from 'prettier';
+
+import prettierConfig from '../../../.prettierrc.json' assert { type: 'json' };
+
+/**
+ * Make a friendly name from an svg filename
+ *
+ * @example `folder-light` => `FolderLight`
+ * @example `folder-open` => `FolderOpen`
+ * @param {string} iconName Icon name to convert
+ */
+function iconFriendlyName(iconName, delimeter = '-') {
+	return iconName
+		.split(delimeter)
+		.map((seg) => seg.charAt(0).toUpperCase() + seg.slice(1))
+		.join('');
+}
+
+function iconBaseName(filePath) {
+	return path.basename(filePath, path.extname(filePath))
+}
+
+async function exists(path) {
+	try {
+		await fs.access(path);
+		return true;
+	} catch {
+		return false;
+	}
+}
 
 (async function main() {
-  async function exists(path) {
-    try {
-      await fs.access(path);
-      return true;
-    } catch {
-      return false;
-    }
-  }
+	const files = await fs.readdir('./src/assets/icons');
+	const icons = files.filter((path) => path.endsWith('.svg'));
 
-  const files = await fs.readdir('./src/assets/icons');
-  const icons = files.filter((f) => f.endsWith('.svg'));
-  let str = '';
+	const generatedCode = `\
+${icons
+	.map((path) => iconBaseName(path))
+	.map((baseName) => `import { ReactComponent as ${iconFriendlyName(baseName)} } from './${baseName}.svg';`)
+	.join('\n')}
 
-  for (let binding of icons) {
-    let name = binding.split('.')[0];
-    str += `import { ReactComponent as ${
-      name.charAt(0).toUpperCase() + name.slice(1)
-    } } from './${name}.svg';\n`;
-  }
-  str += '\n\nexport default {\n';
+export default {
+${icons
+	.map((path) => iconFriendlyName(iconBaseName(path)))
+	.map((baseName) => `\t${iconFriendlyName(baseName)},`)
+	.join('\n')}
+};
+`;
 
-  for (let binding of icons) {
-    let name = binding.split('.')[0];
-    let componentName = name.charAt(0).toUpperCase() + name.slice(1);
-    str += `  ${name}: ${componentName},\n`;
-  }
+	const outPath = path.resolve('./src/assets/icons/index.ts');
 
-  str += '}\n';
+	if (await exists(outPath)) {
+		await fs.rm(outPath);
+	}
 
-  let outPath = './src/assets/icons/index.ts';
-
-  let indexExists = await exists(outPath);
-
-  if (indexExists) {
-    await fs.rm(outPath);
-  }
-
-  await fs.writeFile(outPath, str);
+	await fs.writeFile(outPath, prettierFormat( generatedCode, prettierConfig));
 })();

packages/interface/src/assets/icons/index.ts

@@ -1,9 +1,9 @@
 import { ReactComponent as Ai } from './ai.svg';
 import { ReactComponent as Angular } from './angular.svg';
+import { ReactComponent as AudioMp3 } from './audio-mp3.svg';
+import { ReactComponent as AudioOgg } from './audio-ogg.svg';
+import { ReactComponent as AudioWav } from './audio-wav.svg';
 import { ReactComponent as Audio } from './audio.svg';
-import { ReactComponent as Audiomp3 } from './audiomp3.svg';
-import { ReactComponent as Audioogg } from './audioogg.svg';
-import { ReactComponent as Audiowav } from './audiowav.svg';
 import { ReactComponent as Babel } from './babel.svg';
 import { ReactComponent as Bat } from './bat.svg';
 import { ReactComponent as Bicep } from './bicep.svg';
@@ -22,13 +22,13 @@ import { ReactComponent as Conf } from './conf.svg';
 import { ReactComponent as Cpp } from './cpp.svg';
 import { ReactComponent as Csharp } from './csharp.svg';
 import { ReactComponent as Cshtml } from './cshtml.svg';
+import { ReactComponent as CssMap } from './css-map.svg';
 import { ReactComponent as Css } from './css.svg';
-import { ReactComponent as Cssmap } from './cssmap.svg';
 import { ReactComponent as Csv } from './csv.svg';
 import { ReactComponent as Dartlang } from './dartlang.svg';
+import { ReactComponent as DockerDebug } from './docker-debug.svg';
+import { ReactComponent as DockerIgnore } from './docker-ignore.svg';
 import { ReactComponent as Docker } from './docker.svg';
-import { ReactComponent as Dockerdebug } from './dockerdebug.svg';
-import { ReactComponent as Dockerignore } from './dockerignore.svg';
 import { ReactComponent as Editorconfig } from './editorconfig.svg';
 import { ReactComponent as Eex } from './eex.svg';
 import { ReactComponent as Elixir } from './elixir.svg';
@@ -40,16 +40,16 @@ import { ReactComponent as Eslint } from './eslint.svg';
 import { ReactComponent as Exs } from './exs.svg';
 import { ReactComponent as Exx } from './exx.svg';
 import { ReactComponent as File } from './file.svg';
+import { ReactComponent as FolderLight } from './folder-light.svg';
+import { ReactComponent as FolderOpen } from './folder-open.svg';
 import { ReactComponent as Folder } from './folder.svg';
-import { ReactComponent as Folder_light } from './folder_light.svg';
-import { ReactComponent as Folder_open } from './folder_open.svg';
-import { ReactComponent as Fontotf } from './fontotf.svg';
-import { ReactComponent as Fontttf } from './fontttf.svg';
-import { ReactComponent as Fontwoff2 } from './fontwoff2.svg';
-import { ReactComponent as Fontwoff } from './fontwoff.svg';
+import { ReactComponent as FontOtf } from './font-otf.svg';
+import { ReactComponent as FontTtf } from './font-ttf.svg';
+import { ReactComponent as FontWoff2 } from './font-woff2.svg';
+import { ReactComponent as FontWoff } from './font-woff.svg';
 import { ReactComponent as Git } from './git.svg';
+import { ReactComponent as GoPackage } from './go-package.svg';
 import { ReactComponent as Go } from './go.svg';
-import { ReactComponent as Gopackage } from './gopackage.svg';
 import { ReactComponent as Gradle } from './gradle.svg';
 import { ReactComponent as Graphql } from './graphql.svg';
 import { ReactComponent as Groovy } from './groovy.svg';
@@ -59,20 +59,20 @@ import { ReactComponent as Haml } from './haml.svg';
 import { ReactComponent as Handlebars } from './handlebars.svg';
 import { ReactComponent as Haskell } from './haskell.svg';
 import { ReactComponent as Html } from './html.svg';
+import { ReactComponent as ImageGif } from './image-gif.svg';
+import { ReactComponent as ImageIco } from './image-ico.svg';
+import { ReactComponent as ImageJpg } from './image-jpg.svg';
+import { ReactComponent as ImagePng } from './image-png.svg';
+import { ReactComponent as ImageWebp } from './image-webp.svg';
 import { ReactComponent as Image } from './image.svg';
-import { ReactComponent as Imagegif } from './imagegif.svg';
-import { ReactComponent as Imageico } from './imageico.svg';
-import { ReactComponent as Imagejpg } from './imagejpg.svg';
-import { ReactComponent as Imagepng } from './imagepng.svg';
-import { ReactComponent as Imagewebp } from './imagewebp.svg';
 import { ReactComponent as Info } from './info.svg';
 import { ReactComponent as Ipynb } from './ipynb.svg';
 import { ReactComponent as Java } from './java.svg';
 import { ReactComponent as Jenkins } from './jenkins.svg';
 import { ReactComponent as Jest } from './jest.svg';
 import { ReactComponent as Jinja } from './jinja.svg';
+import { ReactComponent as JsMap } from './js-map.svg';
 import { ReactComponent as Js } from './js.svg';
-import { ReactComponent as Jsmap } from './jsmap.svg';
 import { ReactComponent as Json } from './json.svg';
 import { ReactComponent as Jsp } from './jsp.svg';
 import { ReactComponent as Julia } from './julia.svg';
@@ -90,30 +90,30 @@ import { ReactComponent as Markdown } from './markdown.svg';
 import { ReactComponent as Mint } from './mint.svg';
 import { ReactComponent as Mov } from './mov.svg';
 import { ReactComponent as Mp4 } from './mp4.svg';
+import { ReactComponent as NestjsController } from './nestjs-controller.svg';
+import { ReactComponent as NestjsDecorator } from './nestjs-decorator.svg';
+import { ReactComponent as NestjsFilter } from './nestjs-filter.svg';
+import { ReactComponent as NestjsGuard } from './nestjs-guard.svg';
+import { ReactComponent as NestjsModule } from './nestjs-module.svg';
+import { ReactComponent as NestjsService } from './nestjs-service.svg';
 import { ReactComponent as Nestjs } from './nestjs.svg';
-import { ReactComponent as Nestjscontroller } from './nestjscontroller.svg';
-import { ReactComponent as Nestjsdecorator } from './nestjsdecorator.svg';
-import { ReactComponent as Nestjsfilter } from './nestjsfilter.svg';
-import { ReactComponent as Nestjsguard } from './nestjsguard.svg';
-import { ReactComponent as Nestjsmodule } from './nestjsmodule.svg';
-import { ReactComponent as Nestjsservice } from './nestjsservice.svg';
 import { ReactComponent as Netlify } from './netlify.svg';
 import { ReactComponent as Nginx } from './nginx.svg';
 import { ReactComponent as Nim } from './nim.svg';
 import { ReactComponent as Njk } from './njk.svg';
 import { ReactComponent as Nodemon } from './nodemon.svg';
+import { ReactComponent as NpmLock } from './npm-lock.svg';
 import { ReactComponent as Npm } from './npm.svg';
-import { ReactComponent as Npmlock } from './npmlock.svg';
 import { ReactComponent as Nuxt } from './nuxt.svg';
 import { ReactComponent as Nvm } from './nvm.svg';
 import { ReactComponent as Opengl } from './opengl.svg';
 import { ReactComponent as Pdf } from './pdf.svg';
 import { ReactComponent as Photoshop } from './photoshop.svg';
 import { ReactComponent as Php } from './php.svg';
-import { ReactComponent as Postcssconfig } from './postcssconfig.svg';
+import { ReactComponent as PostcssConfig } from './postcss-config.svg';
+import { ReactComponent as PowershellData } from './powershell-data.svg';
+import { ReactComponent as PowershellModule } from './powershell-module.svg';
 import { ReactComponent as Powershell } from './powershell.svg';
-import { ReactComponent as Powershelldata } from './powershelldata.svg';
-import { ReactComponent as Powershellmodule } from './powershellmodule.svg';
 import { ReactComponent as Prettier } from './prettier.svg';
 import { ReactComponent as Prisma } from './prisma.svg';
 import { ReactComponent as Prolog } from './prolog.svg';
@@ -121,8 +121,8 @@ import { ReactComponent as Pug } from './pug.svg';
 import { ReactComponent as Python } from './python.svg';
 import { ReactComponent as Qt } from './qt.svg';
 import { ReactComponent as Razor } from './razor.svg';
-import { ReactComponent as Reactjs } from './reactjs.svg';
-import { ReactComponent as Reactts } from './reactts.svg';
+import { ReactComponent as ReactJs } from './react-js.svg';
+import { ReactComponent as ReactTs } from './react-ts.svg';
 import { ReactComponent as Readme } from './readme.svg';
 import { ReactComponent as Rescript } from './rescript.svg';
 import { ReactComponent as Rjson } from './rjson.svg';
@@ -144,8 +144,8 @@ import { ReactComponent as Svg } from './svg.svg';
 import { ReactComponent as Swift } from './swift.svg';
 import { ReactComponent as Symfony } from './symfony.svg';
 import { ReactComponent as Tailwind } from './tailwind.svg';
-import { ReactComponent as Testjs } from './testjs.svg';
-import { ReactComponent as Testts } from './testts.svg';
+import { ReactComponent as TestJs } from './test-js.svg';
+import { ReactComponent as TestTs } from './test-ts.svg';
 import { ReactComponent as Tmpl } from './tmpl.svg';
 import { ReactComponent as Toml } from './toml.svg';
 import { ReactComponent as Travis } from './travis.svg';
@@ -153,8 +153,8 @@ import { ReactComponent as Tsconfig } from './tsconfig.svg';
 import { ReactComponent as Tsx } from './tsx.svg';
 import { ReactComponent as Twig } from './twig.svg';
 import { ReactComponent as Txt } from './txt.svg';
+import { ReactComponent as TypescriptDef } from './typescript-def.svg';
 import { ReactComponent as Typescript } from './typescript.svg';
-import { ReactComponent as Typescriptdef } from './typescriptdef.svg';
 import { ReactComponent as Ui } from './ui.svg';
 import { ReactComponent as User } from './user.svg';
 import { ReactComponent as Vercel } from './vercel.svg';
@@ -167,181 +167,181 @@ import { ReactComponent as Webpack } from './webpack.svg';
 import { ReactComponent as Windi } from './windi.svg';
 import { ReactComponent as Xml } from './xml.svg';
 import { ReactComponent as Yaml } from './yaml.svg';
+import { ReactComponent as YarnError } from './yarn-error.svg';
 import { ReactComponent as Yarn } from './yarn.svg';
-import { ReactComponent as Yarnerror } from './yarnerror.svg';
 import { ReactComponent as Zip } from './zip.svg';
 
 export default {
-	ai: Ai,
-	angular: Angular,
-	audio: Audio,
-	audiomp3: Audiomp3,
-	audioogg: Audioogg,
-	audiowav: Audiowav,
-	babel: Babel,
-	bat: Bat,
-	bicep: Bicep,
-	binary: Binary,
-	blade: Blade,
-	browserslist: Browserslist,
-	bsconfig: Bsconfig,
-	bundler: Bundler,
-	c: C,
-	cert: Cert,
-	cheader: Cheader,
-	cli: Cli,
-	compodoc: Compodoc,
-	composer: Composer,
-	conf: Conf,
-	cpp: Cpp,
-	csharp: Csharp,
-	cshtml: Cshtml,
-	css: Css,
-	cssmap: Cssmap,
-	csv: Csv,
-	dartlang: Dartlang,
-	docker: Docker,
-	dockerdebug: Dockerdebug,
-	dockerignore: Dockerignore,
-	editorconfig: Editorconfig,
-	eex: Eex,
-	elixir: Elixir,
-	elm: Elm,
-	env: Env,
-	erb: Erb,
-	erlang: Erlang,
-	eslint: Eslint,
-	exs: Exs,
-	exx: Exx,
-	file: File,
-	folder: Folder,
-	folder_light: Folder_light,
-	folder_open: Folder_open,
-	fontotf: Fontotf,
-	fontttf: Fontttf,
-	fontwoff: Fontwoff,
-	fontwoff2: Fontwoff2,
-	git: Git,
-	go: Go,
-	gopackage: Gopackage,
-	gradle: Gradle,
-	graphql: Graphql,
-	groovy: Groovy,
-	grunt: Grunt,
-	gulp: Gulp,
-	haml: Haml,
-	handlebars: Handlebars,
-	haskell: Haskell,
-	html: Html,
-	image: Image,
-	imagegif: Imagegif,
-	imageico: Imageico,
-	imagejpg: Imagejpg,
-	imagepng: Imagepng,
-	imagewebp: Imagewebp,
-	info: Info,
-	ipynb: Ipynb,
-	java: Java,
-	jenkins: Jenkins,
-	jest: Jest,
-	jinja: Jinja,
-	js: Js,
-	jsmap: Jsmap,
-	json: Json,
-	jsp: Jsp,
-	julia: Julia,
-	karma: Karma,
-	key: Key,
-	less: Less,
-	license: License,
-	lighteditorconfig: Lighteditorconfig,
-	liquid: Liquid,
-	llvm: Llvm,
-	log: Log,
-	lua: Lua,
-	m: M,
-	markdown: Markdown,
-	mint: Mint,
-	mov: Mov,
-	mp4: Mp4,
-	nestjs: Nestjs,
-	nestjscontroller: Nestjscontroller,
-	nestjsdecorator: Nestjsdecorator,
-	nestjsfilter: Nestjsfilter,
-	nestjsguard: Nestjsguard,
-	nestjsmodule: Nestjsmodule,
-	nestjsservice: Nestjsservice,
-	netlify: Netlify,
-	nginx: Nginx,
-	nim: Nim,
-	njk: Njk,
-	nodemon: Nodemon,
-	npm: Npm,
-	npmlock: Npmlock,
-	nuxt: Nuxt,
-	nvm: Nvm,
-	opengl: Opengl,
-	pdf: Pdf,
-	photoshop: Photoshop,
-	php: Php,
-	postcssconfig: Postcssconfig,
-	powershell: Powershell,
-	powershelldata: Powershelldata,
-	powershellmodule: Powershellmodule,
-	prettier: Prettier,
-	prisma: Prisma,
-	prolog: Prolog,
-	pug: Pug,
-	python: Python,
-	qt: Qt,
-	razor: Razor,
-	reactjs: Reactjs,
-	reactts: Reactts,
-	readme: Readme,
-	rescript: Rescript,
-	rjson: Rjson,
-	robots: Robots,
-	rollup: Rollup,
-	ruby: Ruby,
-	rust: Rust,
-	sass: Sass,
-	scss: Scss,
-	shell: Shell,
-	smarty: Smarty,
-	sol: Sol,
-	sql: Sql,
-	storybook: Storybook,
-	stylelint: Stylelint,
-	stylus: Stylus,
-	svelte: Svelte,
-	svg: Svg,
-	swift: Swift,
-	symfony: Symfony,
-	tailwind: Tailwind,
-	testjs: Testjs,
-	testts: Testts,
-	tmpl: Tmpl,
-	toml: Toml,
-	travis: Travis,
-	tsconfig: Tsconfig,
-	tsx: Tsx,
-	twig: Twig,
-	txt: Txt,
-	typescript: Typescript,
-	typescriptdef: Typescriptdef,
-	ui: Ui,
-	user: User,
-	vercel: Vercel,
-	video: Video,
-	vite: Vite,
-	vscode: Vscode,
-	vue: Vue,
-	wasm: Wasm,
-	webpack: Webpack,
-	windi: Windi,
-	xml: Xml,
-	yaml: Yaml,
-	yarn: Yarn,
-	yarnerror: Yarnerror,
-	zip: Zip
+	Ai,
+	Angular,
+	AudioMp3,
+	AudioOgg,
+	AudioWav,
+	Audio,
+	Babel,
+	Bat,
+	Bicep,
+	Binary,
+	Blade,
+	Browserslist,
+	Bsconfig,
+	Bundler,
+	C,
+	Cert,
+	Cheader,
+	Cli,
+	Compodoc,
+	Composer,
+	Conf,
+	Cpp,
+	Csharp,
+	Cshtml,
+	CssMap,
+	Css,
+	Csv,
+	Dartlang,
+	DockerDebug,
+	DockerIgnore,
+	Docker,
+	Editorconfig,
+	Eex,
+	Elixir,
+	Elm,
+	Env,
+	Erb,
+	Erlang,
+	Eslint,
+	Exs,
+	Exx,
+	File,
+	FolderLight,
+	FolderOpen,
+	Folder,
+	FontOtf,
+	FontTtf,
+	FontWoff,
+	FontWoff2,
+	Git,
+	GoPackage,
+	Go,
+	Gradle,
+	Graphql,
+	Groovy,
+	Grunt,
+	Gulp,
+	Haml,
+	Handlebars,
+	Haskell,
+	Html,
+	ImageGif,
+	ImageIco,
+	ImageJpg,
+	ImagePng,
+	ImageWebp,
+	Image,
+	Info,
+	Ipynb,
+	Java,
+	Jenkins,
+	Jest,
+	Jinja,
+	JsMap,
+	Js,
+	Json,
+	Jsp,
+	Julia,
+	Karma,
+	Key,
+	Less,
+	License,
+	Lighteditorconfig,
+	Liquid,
+	Llvm,
+	Log,
+	Lua,
+	M,
+	Markdown,
+	Mint,
+	Mov,
+	Mp4,
+	NestjsController,
+	NestjsDecorator,
+	NestjsFilter,
+	NestjsGuard,
+	NestjsModule,
+	NestjsService,
+	Nestjs,
+	Netlify,
+	Nginx,
+	Nim,
+	Njk,
+	Nodemon,
+	NpmLock,
+	Npm,
+	Nuxt,
+	Nvm,
+	Opengl,
+	Pdf,
+	Photoshop,
+	Php,
+	PostcssConfig,
+	PowershellData,
+	PowershellModule,
+	Powershell,
+	Prettier,
+	Prisma,
+	Prolog,
+	Pug,
+	Python,
+	Qt,
+	Razor,
+	ReactJs,
+	ReactTs,
+	Readme,
+	Rescript,
+	Rjson,
+	Robots,
+	Rollup,
+	Ruby,
+	Rust,
+	Sass,
+	Scss,
+	Shell,
+	Smarty,
+	Sol,
+	Sql,
+	Storybook,
+	Stylelint,
+	Stylus,
+	Svelte,
+	Svg,
+	Swift,
+	Symfony,
+	Tailwind,
+	TestJs,
+	TestTs,
+	Tmpl,
+	Toml,
+	Travis,
+	Tsconfig,
+	Tsx,
+	Twig,
+	Txt,
+	TypescriptDef,
+	Typescript,
+	Ui,
+	User,
+	Vercel,
+	Video,
+	Vite,
+	Vscode,
+	Vue,
+	Wasm,
+	Webpack,
+	Windi,
+	Xml,
+	Yaml,
+	YarnError,
+	Yarn,
+	Zip
 };