From 6352c5b8893cf297148e85dee888a1968bd5b154 Mon Sep 17 00:00:00 2001 From: Stephanie Zeng Date: Wed, 11 Dec 2024 13:29:13 -0500 Subject: [PATCH] feat: convert vector to svg --- packages/foundations/generate-icons.mjs | 28 +++++++++++++++++++ packages/foundations/package.json | 4 ++- packages/foundations/styles/vector.json | 24 ++++++++++++++++ .../Box - Moving_M_Stroke_colorDefault.svg | 2 ++ .../Box - Moving_S_Stroke_colorDefault.svg | 2 ++ .../foundations/templates/myCustomTemplate.ts | 3 +- 6 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 packages/foundations/generate-icons.mjs create mode 100644 packages/foundations/styles/vector.json create mode 100644 packages/foundations/svg/Box - Moving_M_Stroke_colorDefault.svg create mode 100644 packages/foundations/svg/Box - Moving_S_Stroke_colorDefault.svg 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\n\n" + }, + { + "name": "Box - Moving", + "properties": { + "Size": "M", + "Icon type": "Stroke", + "Icon colour": "Default", + "Frame type": "None", + "Frame fill": "None" + }, + "source": "\n\n\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, }; });