Add script for formatting icon data (#12381)

package.json

@@ -113,7 +113,8 @@
   "scripts": {
     "build": "node scripts/build/package.js",
     "clean": "node scripts/build/clean.js",
-    "format": "npm run prettier -- --write && npm run xo:fix",
+    "format:icondata": "node scripts/format-icon-data.js",
+    "format": "npm run format:icondata && npm run prettier -- --write && npm run xo:fix",
     "xo:fix": "xo --fix",
     "prettier": "prettier --ignore-unknown \"**/*.!(js|jsx|mjs|cjs|ts|tsx|mts|cts|svg)\"",
     "lint": "npm run ourlint && npm run prettierlint && npm run jslint && npm run jsonlint && npm run svglint && npm run wslint && npm run markdownlint",

scripts/add-icon-data.js

@@ -15,13 +15,17 @@ import {search} from 'fast-fuzzy';
 import getRelativeLuminance from 'get-relative-luminance';
 import autocomplete from 'inquirer-autocomplete-standalone';
 import {
-  collator,
   getIconsDataString,
   normalizeColor,
   titleToSlug,
   urlRegex,
 } from '../sdk.mjs';
-import {getJsonSchemaData, getSpdxLicenseIds, writeIconsData} from './utils.js';
+import {
+  getJsonSchemaData,
+  getSpdxLicenseIds,
+  sortIconsCompare,
+  writeIconsData,
+} from './utils.js';
 
 /** @type {{icons: import('../sdk.js').IconData[]}} */
 const iconsData = JSON.parse(await getIconsDataString());
@@ -166,7 +170,7 @@ try {
     })
   ) {
     iconsData.icons.push(answers);
-    iconsData.icons.sort((a, b) => collator.compare(a.title, b.title));
+    iconsData.icons.sort(sortIconsCompare);
     await writeIconsData(iconsData);
     process.stdout.write(chalk.green('\nData written successfully.\n'));
   } else {

scripts/build/package.js

@@ -14,7 +14,6 @@ import path from 'node:path';
 import {format} from 'node:util';
 import {transform as esbuildTransform} from 'esbuild';
 import {
-  collator,
   getDirnameFromImportMeta,
   getIconSlug,
   getIconsData,
@@ -22,6 +21,7 @@ import {
   svgToPath,
   titleToHtmlFriendly,
 } from '../../sdk.mjs';
+import {sortIconsCompare} from '../utils.js';
 
 const __dirname = getDirnameFromImportMeta(import.meta.url);
 
@@ -134,7 +134,7 @@ const build = async () => {
   const iconsBarrelJs = [];
   const iconsBarrelMjs = [];
 
-  buildIcons.sort((a, b) => collator.compare(a.icon.title, b.icon.title));
+  buildIcons.sort((a, b) => sortIconsCompare(a.icon, b.icon));
   for (const {iconObject, iconExportName} of buildIcons) {
     iconsBarrelDts.push(`export const ${iconExportName}:I;`);
     iconsBarrelJs.push(`${iconExportName}:${iconObject},`);

scripts/format-icon-data.js

@@ -0,0 +1,10 @@
+/**
+ * @file
+ * Format _data/simple-icons.json.
+ */
+import {getIconsDataString} from '../sdk.mjs';
+import {sortIconsCompare, writeIconsData} from './utils.js';
+
+const iconsData = JSON.parse(await getIconsDataString());
+iconsData.icons.sort(sortIconsCompare);
+writeIconsData(iconsData);

scripts/lint/ourlint.js

@@ -19,7 +19,7 @@ import {
   normalizeNewlines,
   titleToSlug,
 } from '../../sdk.mjs';
-import {getSpdxLicenseIds} from '../utils.js';
+import {getSpdxLicenseIds, sortIconsCompare} from '../utils.js';
 
 /**
  * Contains our tests so they can be isolated from each other.
@@ -92,9 +92,7 @@ const TESTS = {
     // eslint-disable-next-line unicorn/no-array-reduce, unicorn/no-array-callback-reference
     const invalids = icons.reduce(collector, []);
     if (invalids.length > 0) {
-      const expectedOrder = [...icons].sort((a, b) =>
-        collator.compare(a.title, b.title),
-      );
+      const expectedOrder = [...icons].sort(sortIconsCompare);
 
       return `Some icons aren't in alphabetical order:
 ${invalids.map((icon) => `${format(icon)} ${findPositon(expectedOrder, icon)}`).join('\n')}`;

scripts/utils.js

@@ -7,7 +7,12 @@
 
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import {getDirnameFromImportMeta, getIconsDataPath} from '../sdk.mjs';
+import {
+  collator,
+  getDirnameFromImportMeta,
+  getIconsDataPath,
+  titleToSlug,
+} from '../sdk.mjs';
 
 const __dirname = getDirnameFromImportMeta(import.meta.url);
 
@@ -64,3 +69,18 @@ export const getSpdxLicenseIds = async (
       'utf8',
     ),
   );
+
+/**
+ * The compare function for sortng icons in _data/simple-icons.json.
+ * @param {IconData} a Icon A.
+ * @param {IconData} b Icon B.
+ * @returns {number} Comparison result.
+ */
+export const sortIconsCompare = (a, b) => {
+  return a.title === b.title
+    ? collator.compare(
+        a.slug ?? titleToSlug(a.title),
+        b.slug ?? titleToSlug(b.title),
+      )
+    : collator.compare(a.title, b.title);
+};