diff --git a/packages/foundations/generate-icons.mjs b/packages/foundations/generate-icons.mjs
new file mode 100644
index 0000000..808cab8
--- /dev/null
+++ b/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);
+})();
diff --git a/packages/foundations/package.json b/packages/foundations/package.json
index 8f79dcc..7ae638c 100644
--- a/packages/foundations/package.json
+++ b/packages/foundations/package.json
@@ -3,6 +3,7 @@
"version": "4.1.0",
"description": "",
"main": "index.js",
+ "type": "module",
"exports": {
".": "./index.ts",
"./styles": "./index.css"
@@ -10,7 +11,8 @@
"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": "",
diff --git a/packages/foundations/styles/vector.json b/packages/foundations/styles/vector.json
new file mode 100644
index 0000000..fb60f53
--- /dev/null
+++ b/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": "\n"
+ },
+ {
+ "name": "Box - Moving",
+ "properties": {
+ "Size": "M",
+ "Icon type": "Stroke",
+ "Icon colour": "Default",
+ "Frame type": "None",
+ "Frame fill": "None"
+ },
+ "source": "\n"
+ }
+]
\ No newline at end of file
diff --git a/packages/foundations/svg/Box - Moving_M_Stroke_colorDefault.svg b/packages/foundations/svg/Box - Moving_M_Stroke_colorDefault.svg
new file mode 100644
index 0000000..d7ae6eb
--- /dev/null
+++ b/packages/foundations/svg/Box - Moving_M_Stroke_colorDefault.svg
@@ -0,0 +1,2 @@
+
diff --git a/packages/foundations/svg/Box - Moving_S_Stroke_colorDefault.svg b/packages/foundations/svg/Box - Moving_S_Stroke_colorDefault.svg
new file mode 100644
index 0000000..be38f93
--- /dev/null
+++ b/packages/foundations/svg/Box - Moving_S_Stroke_colorDefault.svg
@@ -0,0 +1,2 @@
+
diff --git a/packages/foundations/templates/myCustomTemplate.ts b/packages/foundations/templates/myCustomTemplate.ts
index a991f34..1484af3 100644
--- a/packages/foundations/templates/myCustomTemplate.ts
+++ b/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,
};
});