@juanmsl/svg-to-react 0.0.1

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@juanmsl/svg-to-react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": false,
+  "bin": {
+    "svg-to-react": "./dist/cjs/index.js"
+  },
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "scripts": {
+    "develop": "ts-node ./src/index.ts",
+    "build": "yarn clean && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
+    "publish-package": "yarn build && yarn publish --no-git-tag-version",
+    "clean": "rm -rf ./dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "xml2js": "^0.6.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.6",
+    "@types/xml2js": "^0.4.14",
+    "polpo-tsconfig": "*",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.4"
+  }
+}

package/src/core/category.ts

@@ -0,0 +1,51 @@
+import { Icon } from './icon';
+import { titleCase } from '../helpers';
+import fs from 'fs';
+
+interface CategoryEntity {
+  addIcon(icon: Icon): void;
+  createFile(outputFolder: string): void;
+}
+
+export class Category implements CategoryEntity {
+  private icons: Array<Icon>;
+  readonly name: string;
+
+  constructor(name: string) {
+    this.icons = [];
+    this.name = name;
+  }
+
+  public addIcon(icon: Icon) {
+    if (icon.isValid) {
+      this.icons.push(icon);
+    }
+  }
+
+  public async createFile(outputFolder: string) {
+    const fileName = `${this.name}.tsx`;
+    console.log('');
+    console.log(`Category: ${this.name}`);
+    console.log(`Icons: ${this.icons.length}`);
+    console.log(`File: ${outputFolder}/${fileName}`);
+
+    await Promise.all(this.icons.map(icon => icon.init()));
+
+    const types = this.icons.map(icon => `'${icon.name}'`).join(' | ');
+    const categoryTitleCase = titleCase(this.name);
+    const categoryType = `export type ${categoryTitleCase}IconsT = Record<${types}, IconT>;`;
+    const categoryObject = `export const ${categoryTitleCase}Icons: ${categoryTitleCase}IconsT`;
+    const iconsRendered = this.icons.map(icon => icon.jsx).join(',\n');
+
+    const data = `import { IconT } from '.';
+
+${categoryType}
+
+${categoryObject} = {
+${iconsRendered}
+};
+  `;
+
+    fs.writeFileSync(`${outputFolder}/${fileName}`, data);
+  }
+}

package/src/core/icon.ts

@@ -0,0 +1,93 @@
+import fs from 'fs';
+import xml2js from 'xml2js';
+import { camelCase } from '../helpers';
+
+interface IconEntity {
+  name: string | null;
+  category: string | null;
+  jsx: string;
+  isValid: boolean;
+
+  init(): void;
+}
+
+export class Icon implements IconEntity {
+  private readonly _category: string | null;
+  private readonly _name: string | null;
+  private readonly path: string;
+  private viewBox: string = "";
+  private svg: string = "";
+  constructor(root: string, file: string) {
+    const items = file.replace(".svg", "").split(", ");
+
+    const mappedValues = items.reduce(
+      (prev, item) => {
+        const [label, value] = item.split("=");
+
+        return {
+          ...prev,
+          [label.toLowerCase()]: value,
+        };
+      },
+      {
+        name: null,
+        category: null,
+      },
+    );
+    this.path = `${root}/${file}`;
+    this._name = mappedValues.name;
+    this._category = mappedValues.category;
+  }
+
+  public async init() {
+    if (this.isValid) {
+      return await this.readFile();
+    }
+
+    Promise.reject(new Error("Icon without name or category or both"));
+  }
+
+  private async readFile() {
+    console.info(`Transform in progress: [${this._category}] -> ${this._name}`);
+    const file = await fs.promises.readFile(this.path, "utf8");
+
+    const data = await xml2js.parseStringPromise(file, {
+      explicitArray: false,
+      attrNameProcessors: [name => camelCase(name, "-")],
+      attrValueProcessors: [
+        (value, name) => (name === "fill" ? "{fill}" : value),
+      ],
+    });
+
+    this.viewBox = data.svg.$.viewBox;
+
+    const builder = new xml2js.Builder({
+      headless: true,
+    });
+
+    const icon = builder.buildObject({
+      g: {
+        ...data.svg,
+        $: {},
+      },
+    });
+
+    this.svg = icon.split('fill="{fill}"').join("fill={fill}");
+  }
+
+  public get isValid(): boolean {
+    return Boolean(this._name && this._category);
+  }
+
+  public get name(): string | null {
+    return this._name;
+  }
+
+  public get category(): string | null {
+    return this._category;
+  }
+
+  public get jsx(): string {
+    return `  '${this.name}': {\n    viewBox: '${this.viewBox}',\n    svg: (fill) => (\n${this.svg}\n    )\n  }`;
+  }
+}

package/src/core/index.ts

@@ -0,0 +1,2 @@
+export * from './category';
+export * from './icon';

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './text';

package/src/helpers/text.ts

@@ -0,0 +1,13 @@
+export const titleCase = (text: string) => text.charAt(0).toUpperCase() + text.slice(1);
+
+export const camelCase = (text: string, separator = ' ') =>
+  text
+    .split(separator)
+    .map((word, key) => {
+      if (key === 0) {
+        return word;
+      }
+
+      return titleCase(word);
+    })
+    .join('');

package/src/index.ts

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+
+import { Category, Icon } from "./core";
+import { titleCase } from "./helpers";
+
+
+type ConfigFile = {
+  rootSVGDirectory: string;
+  outputDirectory: string;
+};
+
+const configFile = fs.readFileSync('svgconfig.json', 'utf8');
+const config: ConfigFile = JSON.parse(configFile);
+
+const icons: Array<Icon> = fs
+  .readdirSync(config.rootSVGDirectory)
+  .filter(file => file.endsWith('.svg'))
+  .map<Icon>(file => new Icon(config.rootSVGDirectory, file));
+
+type IconCategories = {
+  [index: string]: Category;
+};
+
+const categoryFiles = icons.reduce<IconCategories>((categories, icon) => {
+  if(icon.category) {
+    categories[icon.category] = categories[icon.category] ?? new Category(icon.category);
+    categories[icon.category].addIcon(icon);
+  }
+
+  return categories;
+}, {});
+
+Object.values(categoryFiles).forEach(async category => {
+  await category.createFile(config.outputDirectory);
+});
+
+console.log(`Creating file: ${config.outputDirectory}/index.ts`);
+
+const categories = Object.keys(categoryFiles).sort();
+
+const importCategpries = categories.map(
+  category => `import { ${titleCase(category)}Icons, ${titleCase(category)}IconsT } from './${category}';`
+).join('\n');
+
+const iconCollectionT = categories.map(
+  category => `${titleCase(category)}IconsT`
+).join(' & ')
+
+const exportIcons = categories.map(
+  category => `  ...${titleCase(category)}Icons,`
+).join('\n')
+
+const indexFile = `import React from 'react';
+
+${importCategpries}
+
+export type IconT = {
+  viewBox: string;
+  svg: (fill: string) => React.ReactNode;
+};
+
+export type IconCollectionT = ${iconCollectionT};
+
+export const Icons: IconCollectionT = {
+${exportIcons}
+};
+`;
+
+fs.writeFileSync(`${config.outputDirectory}/index.ts`, indexFile);
+
+console.info("SVG's transformed! :D");

package/svgconfig.json

@@ -0,0 +1,4 @@
+{
+  "rootSVGDirectory": "./svg",
+  "outputDirectory": "./icons"
+}

package/tsconfig-cjs.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "CommonJS",
+    "outDir": "./dist/cjs"
+  },
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "polpo-tsconfig/nodejs.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "outDir": "./dist/esm",
+  },
+  "ts-node": {
+    "esm": true
+  }
+}