@ecoportal/icons 0.0.2 → 1.0.1

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ecoportal/icons",
-  "version": "0.0.2",
+  "version": "1.0.1",
   "description": "Icons for the EcoPortal design system",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "build": "webpack",
+    "build": "rm -rf dist && mkdir dist && cp -r ./src/types ./dist/types && tsc && webpack",
+    "icons": "yarn node src/icons.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -20,6 +21,7 @@
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
+    "@svgr/webpack": "^7.0.0",
     "@types/react": "^18.0.37",
     "babel-loader": "^9.1.2",
     "babel-plugin-react-svg": "^3.0.0",
@@ -30,9 +32,5 @@
     "webpack-cli": "^5.0.1"
   },
   "author": "EcoPortal",
-  "license": "ISC",
-  "dependencies": {
-    "@ecoportal/icons": "0.0.1",
-    "@svgr/webpack": "^7.0.0"
-  }
+  "license": "ISC"
 }

package/src/icons.js

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const fs = require('fs');
+const path = require('path');
+const { promisify } = require('util');
+const readdir = promisify(fs.readdir);
+const writeFile = promisify(fs.writeFile);
+
+function toCamelCase(str) {
+  let words = str
+    .replace(/[^a-zA-Z0-9]/g, ' ')
+    .toLowerCase()
+    .split(' ');
+  let camelCase = words
+    .map((word, index) => {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    })
+    .join('');
+  return camelCase;
+}
+
+const formatName = (filename, category) => {
+  // Remove - (dash) from filename
+  let name = toCamelCase(path.parse(filename).name);
+  // capitalize first letter
+  name = category + name.charAt(0).toUpperCase() + name.substring(1);
+
+  // Needed for strings that start with number
+  name = /^\d/.test(name) ? `A${name}` : name;
+  return `Ep${name}`;
+};
+
+const getImportTemplate = (filename, category) => {
+  return `import ${formatName(
+    filename,
+    category
+  )} from './icons/${category}/${filename}'\n`;
+};
+
+const joinLines = (importsArray, exportsArray) => {
+  let result = importsArray.join('');
+  result += '\nexport {\n';
+  result += exportsArray.join(',\n');
+  result += '\n}';
+  return result;
+};
+
+const createFileFrom = async (source, target) => {
+  const importsArray = [];
+  const exportsArray = [];
+  // read dir with categories folders
+  const categories = await readdir(source);
+  await Promise.all(
+    categories.map(async (category) => {
+      const files = await readdir(`${source}/${category}`);
+      files.forEach((file) => {
+        importsArray.push(getImportTemplate(file, category));
+        exportsArray.push(formatName(file, category));
+      });
+    })
+  );
+  const result = joinLines(
+    [...new Set(importsArray)],
+    [...new Set(exportsArray)]
+  );
+  await writeFile(target, result);
+};
+
+createFileFrom('./src/icons', './src/index.ts');

package/tsconfig.json

@@ -9,5 +9,5 @@
     "declaration": true,
     "outDir": "./dist"
   },
-  "include": ["src", "types"]
+  "include": ["src", "src/types", "src/types"]
 }

package/webpack.config.js

@@ -16,7 +16,35 @@ module.exports = {
       },
       {
         test: /\.svg$/,
-        use: ['@svgr/webpack'],
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              prettier: false,
+              svgo: true,
+              svgoConfig: {
+                plugins: [
+                  { name: 'removeViewBox', active: false },
+                  {
+                    name: 'addAttributesToSVGElement',
+                    params: {
+                      attributes: [
+                        {
+                          viewBox: '0 0 24 24',
+                          width: 24,
+                          height: 24,
+                          fill: 'currentColor',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+              titleProp: true,
+              ref: true,
+            },
+          },
+        ],
       },
     ],
   },

package/dist/images.d.ts

@@ -1,8 +0,0 @@
-declare module '*.svg' {
-  import React = require('react');
-  const src: React.ForwardRefRenderFunction<
-    HTMLOrSVGElement,
-    React.SVGProps<SVGSVGElement>
-  >;
-  export default src;
-}

package/dist/index.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import AncientGateFill from './src/icons/Buildings/ancient-gate-fill.svg';
-import AncientPavilionFill from './icons/Buildings/ancient-pavilion-fill.svg';
-export { AncientGateFill, AncientPavilionFill };
-declare const _default: {
-  AncientGateFill: import('react').ForwardRefRenderFunction<
-    HTMLOrSVGElement,
-    import('react').SVGProps<SVGSVGElement>
-  >;
-  AncientPavilionFill: import('react').ForwardRefRenderFunction<
-    HTMLOrSVGElement,
-    import('react').SVGProps<SVGSVGElement>
-  >;
-};
-export default _default;

package/src/index.ts

@@ -1,6 +0,0 @@
-import AncientGateFill from './icons/Buildings/ancient-gate-fill.svg';
-import AncientPavilionFill from './icons/Buildings/ancient-pavilion-fill.svg';
-
-export { AncientGateFill, AncientPavilionFill };
-
-export default { AncientGateFill, AncientPavilionFill };