first draft of inline svgs

packages/svg-icons/package.json

@@ -14,21 +14,23 @@
         "provenance": true
     },
     "type": "module",
-    "sideEffects": "*.svg",
+    "sideEffects": false,
     "files": [
         "/dist",
         "CHANGELOG.md",
         "README.md"
     ],
     "exports": {
         "./icons/*.svg": "./dist/icons/*.svg",
+        "./icons/inline/*": "./dist/icons/inline/*",
         "./rich-icons/*.svg": "./dist/rich-icons/*.svg"
     },
     "scripts": {
         "build": "pnpm run \"/^build:.*/\"",
         "build:icons": "copyfiles --flat src/optimized-icons/* dist/icons",
+        "build:inline-icons": "tsx scripts/buildInlineIcons.ts",
         "build:rich-icons": "copyfiles --flat src/optimized-rich-icons/* dist/rich-icons",
-        "generate-icons": "tsx scripts/build.ts",
+        "generate-icons": "tsx scripts/generate.ts",
         "eslint": "eslint . --max-warnings=0 --cache --cache-location node_modules/.cache/eslint",
         "typecheck": "tsc",
         "test": "jest"

packages/svg-icons/scripts/buildInlineIcons.ts

@@ -0,0 +1,25 @@
+import fs from "fs";
+import path from "path";
+
+import { IconsInlineDistDirectory, IconsOptimizedDirectory } from "./constants.ts";
+
+//
+const optimizedIconsPath = IconsOptimizedDirectory;
+
+console.log("⚙️  Generating inline icons...\n");
+
+const files = fs.readdirSync(optimizedIconsPath, { recursive: true, withFileTypes: true });
+const svgFiles = files.filter(file => file.isFile() && file.name.endsWith(".svg"));
+
+// Clear directory (It also removes the directory itself)
+fs.rmSync(IconsInlineDistDirectory, { recursive: true, force: true });
+fs.mkdirSync(IconsInlineDistDirectory, { recursive: true });
+
+svgFiles.forEach(file => {
+    const contents = fs.readFileSync(path.resolve(file.path, file.name), "utf8");
+    // TODO: fix the /, there is probably a method to join those paths
+    fs.writeFileSync(`${IconsInlineDistDirectory}/${file.name.replace(".svg", ".js")}`, `export default \`${contents}\``);
+    fs.writeFileSync(`${IconsInlineDistDirectory}/${file.name.replace(".svg", ".d.ts")}`, "declare const _default: string; export default _default;");
+});
+
+console.log("✨ The inline icons have been generated!\n");

packages/svg-icons/scripts/constants.ts

@@ -9,11 +9,12 @@ export const WhiteHexadecimal = "#fff";
 export const White = "white"; // TODO: should be --hop-decorative-option7-icon-strong
 
 export const IconsSourceDirectory = "src/icons";
-export const IconsDistDirectory = "src/optimized-icons";
+export const IconsInlineDistDirectory = "dist/icons/inline";
+export const IconsOptimizedDirectory = "src/optimized-icons";
 export const IconSizes = [16, 24, 32] as const;
 export const AllowedIconFillColors = [NeutralIconColor, PrimaryIconColor, WarningWeakIconColor];
 
 export const RichIconsSourceDirectory = "src/rich-icons";
-export const RichIconsDistDirectory = "src/optimized-rich-icons";
+export const RichIconsOptimizedDirectory = "src/optimized-rich-icons";
 export const RichIconSizes = [24, 32, 40] as const;
 export const RichAllowedIconFillColors = [DecorativeOption7IconColor, DecorativeOption7SurfaceColor, White];

packages/svg-icons/scripts/build.ts → packages/svg-icons/scripts/generate.ts

@@ -1,7 +1,7 @@
 import path from "path";
 
-import { IconSizes, IconsDistDirectory, IconsSourceDirectory, RichIconSizes, RichIconsDistDirectory, RichIconsSourceDirectory } from "./constants.ts";
-import { generateIcons } from "./generateIcons.ts";
+import { IconSizes, IconsOptimizedDirectory, IconsSourceDirectory, RichIconSizes, RichIconsOptimizedDirectory, RichIconsSourceDirectory } from "./constants.ts";
+import { optimizeIcon } from "./optimize.ts";
 
 /**
  * Converts a file path to a file name.
@@ -27,10 +27,10 @@ function fileNameConverter(filePath: string, allowedIconSizes: readonly number[]
 
 console.log("⚙️  Optimizing icons...\n");
 
-generateIcons(IconsSourceDirectory, IconsDistDirectory, filePath => fileNameConverter(filePath, IconSizes));
+optimizeIcon(IconsSourceDirectory, IconsOptimizedDirectory, filePath => fileNameConverter(filePath, IconSizes));
 
 console.log("⚙️  Optimizing rich icons...\n");
 
-generateIcons(RichIconsSourceDirectory, RichIconsDistDirectory, filePath => fileNameConverter(filePath, RichIconSizes));
+optimizeIcon(RichIconsSourceDirectory, RichIconsOptimizedDirectory, filePath => fileNameConverter(filePath, RichIconSizes));
 
 console.log("✨ The icons have been optimized!\n");

packages/svg-icons/scripts/generateIcons.ts → packages/svg-icons/scripts/optimize.ts

@@ -4,7 +4,7 @@ import { optimize } from "svgo";
 
 import config from "./svgoConfig.ts";
 
-export function generateIcons(srcDir: string, outputDir: string, fileNameConverter?: (filePath: string) => string) {
+export function optimizeIcon(srcDir: string, outputDir: string, fileNameConverter?: (filePath: string) => string) {
     // Clear directory (It also removes the directory itself)
     fs.rmSync(outputDir, { recursive: true, force: true });
     fs.mkdirSync(outputDir, { recursive: true });