Script to generate SVG files from token vectors

packages/foundations/generate-icons.mjs

@@ -0,0 +1,28 @@
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const cwd = path.dirname(fileURLToPath(import.meta.url));
+
+const readVectorFile = async (vectorFile) => {
+  const vectorData = await fs.readFile(vectorFile, "utf8");
+  return JSON.parse(vectorData);
+};
+
+const generateIconFromVectors = async (vectorData) => {
+  vectorData.forEach(async (icon) => {
+    const iconName = `${icon.name}_${icon.properties.Size}_${icon.properties['Icon type']}_color${icon.properties['Icon colour']}.svg`;
+    const iconFile = path.join(cwd, 'svg', iconName)
+    await fs
+      .writeFile(iconFile, icon.source.replace('\n', '').replace('\'', ''))
+      .then(() => console.log(`SVG ${iconName} created`))
+      .catch((err) => console.error(err));
+  });
+}
+
+(async function main() {
+  const vectorFile = path.resolve(cwd, ".", "styles", "vector.json");
+  const vectorData = await readVectorFile(vectorFile);
+  console.log(vectorData);
+  await generateIconFromVectors(vectorData);
+})();

packages/foundations/package.json

@@ -3,14 +3,16 @@
   "version": "4.1.0",
   "description": "",
   "main": "index.js",
+  "type": "module",
   "exports": {
     ".": "./index.ts",
     "./styles": "./index.css"
   },
   "scripts": {
     "build": "radius-toolkit generate tokens.json -o styles/index.css",
     "build:custom": "radius-toolkit generate tokens.json -c myCustomTemplate -T ./templates -o styles/vector.json",
-    "build:tailwind": "radius-toolkit generate tokens.json -t tailwind"
+    "build:tailwind": "radius-toolkit generate tokens.json -t tailwind",
+    "g": "node ./generate-icons.mjs"
   },
   "keywords": [],
   "author": "",

packages/foundations/styles/vector.json

@@ -0,0 +1,24 @@
+[
+    {
+        "name": "Box - Moving",
+        "properties": {
+            "Size": "S",
+            "Icon type": "Stroke",
+            "Icon colour": "Default",
+            "Frame type": "None",
+            "Frame fill": "None"
+        },
+        "source": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M2.60817 8.19257V4.34122M2.60817 4.34122L8.77033 0.875L11.8514 2.60811M2.60817 4.34122L5.68925 6.21666M14.9325 4.34122V11.5304L8.51357 15.125M14.9325 4.34122L8.51357 7.93581M14.9325 4.34122L11.8514 2.60811M8.51357 15.125L6.45952 13.8412M8.51357 15.125V7.93581M8.51357 7.93581L5.68925 6.21666M5.68925 6.21666L11.8514 2.60811M1.06763 11.7872L4.91898 9.47635M1.06763 14.3547L6.45952 11.0169\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
+    },
+    {
+        "name": "Box - Moving",
+        "properties": {
+            "Size": "M",
+            "Icon type": "Stroke",
+            "Icon colour": "Default",
+            "Frame type": "None",
+            "Frame fill": "None"
+        },
+        "source": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3.48651 12.3041V6.22297M3.48651 6.22297L13.2162 0.75L18.0811 3.48649M3.48651 6.22297L8.35137 9.1842M22.946 6.22297V17.5743L12.8108 23.25M22.946 6.22297L12.8108 11.8986M22.946 6.22297L18.0811 3.48649M12.8108 23.25L9.56759 21.223M12.8108 23.25V11.8986M12.8108 11.8986L8.35137 9.1842M8.35137 9.1842L18.0811 3.48649M1.05408 17.9797L7.13516 14.3311M1.05408 22.0338L9.56759 16.7635\" stroke=\"#00549A\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
+    }
+]

packages/foundations/templates/myCustomTemplate.ts

@@ -3,10 +3,11 @@ import type { TemplateModule } from "radius-toolkit";
 export default {
   name: "my-custom-template",
   render: ({ layers, vectors }, options) => {
+    console.log("data", JSON.stringify(layers, null, 2));
     const transformed = vectors?.map(({ name, properties, source }) => {
       return {
         name,
-        properties: JSON.stringify(properties),
+        properties,
         source,
       };
     });