New setup for new NPM package

scripts/build/generateIconFiles.js

@@ -0,0 +1,28 @@
+import fs from 'fs';
+import path from 'path';
+import prettier from 'prettier';
+import { generateComponentName } from './helpers';
+
+export default function(iconVNodesObject) {
+
+  const icons = Object.keys(iconVNodesObject);
+
+  icons.forEach(icon => {
+    const location = path.join(process.cwd(), "src/icons", `${icon}.js`);
+    const ComponentName = generateComponentName(icon);
+
+    const VNode = JSON.stringify(iconVNodesObject[icon]);
+
+    const element = `
+      export default [${VNode}]
+    `
+
+    fs.writeFileSync(
+      location,
+      prettier.format(element, { parser: "babel" }),
+      "utf-8"
+    );
+
+    console.log("Successfully built", ComponentName);
+  });
+}

scripts/build/generateReactFile.js

@@ -0,0 +1,43 @@
+
+import fs from 'fs';
+import path from 'path';
+import prettier from 'prettier';
+
+import { generateComponentName } from './helpers';
+
+const FILE_NAME = "react.js";
+
+const resetFile = fs.writeFileSync(path.join(process.cwd(), FILE_NAME), "", "utf-8");
+const writeFile = (content) => fs.appendFileSync(
+  path.join(process.cwd(), FILE_NAME),
+  content,
+  "utf-8"
+);
+
+export default function(iconVNodesObject) {
+
+  writeFile();
+  writeFile(`import getReactComponent from './src/getReactComponent';\n`);
+
+  // const componentName = generateComponentName(icon);
+  const icons = Object.keys(iconVNodesObject);
+
+  // icons.forEach(iconName => {
+  //   const constantString = `const ${componentName} = getReactComponent();\n`;
+  //   const exportString = `export ${componentName};\n`;
+
+
+  // });
+
+  // icons.forEach(iconName => {
+  //   const constantString = `const ${componentName} = getReactComponent();\n`;
+  //   const exportString = `export ${componentName};\n`;
+
+
+  // });
+
+  const exportStringNames = icons.map(iconName => generateComponentName(iconName)).join(",\n");
+  const exportString = `export { ${exportStringNames} };\n`;
+
+  writeFile(exportString);
+}

scripts/build/helpers.js

@@ -0,0 +1,8 @@
+import upperCamelCase from 'upperCamelCase';
+
+/**
+ * Generates a componentName of a String.
+ *
+ * @param {string} iconName
+ */
+export const generateComponentName = (iconName) => iconName === "github" ? "GitHub" : upperCamelCase(iconName);

scripts/buildIcons.js

@@ -0,0 +1,23 @@
+import fs from 'fs';
+import path from 'path';
+
+import renderIconsObject from './render/renderIconsObject';
+import renderIconVNodes from './render/renderIconVNodes';
+import generateIconFiles from './build/generateIconFiles';
+import generateReactFile from './build/generateReactFile';
+
+
+
+const IN_DIR = path.resolve(__dirname, '../icons');
+// const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
+
+// console.log(`Building ${OUT_FILE}...`);
+
+const svgFiles = fs.readdirSync(IN_DIR).filter(file => path.extname(file) === '.svg');
+const getSvg = svgFile => fs.readFileSync(path.join(IN_DIR, svgFile));
+
+const icons = renderIconsObject(svgFiles, getSvg);
+const iconVnodes = renderIconVNodes(icons);
+
+// generateIconFiles(iconVnodes);
+generateReactFile(iconVnodes);

scripts/render/default-attrs.json

@@ -0,0 +1,11 @@
+{
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": 24,
+  "height": 24,
+  "viewBox": "0 0 24 24",
+  "fill": "none",
+  "stroke": "currentColor",
+  "stroke-width": 2,
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}

scripts/render/renderIconVNodes.js

@@ -0,0 +1,32 @@
+import DEFAULT_ATTRS from './default-attrs.json';
+import { parseDOM } from 'htmlparser2';
+
+export default (iconsObject) => {
+  const iconVnodes = {}
+
+  for(const icon in iconsObject) {
+
+    const svgString = iconsObject[icon];
+    const dom = parseDOM(svgString);
+
+    const children = [
+      ...dom.map(element => ([
+        element.name,
+        {
+          ...element.attribs,
+        }
+      ])),
+    ];
+
+    iconVnodes[icon] = [
+      'svg',
+      {
+        ...DEFAULT_ATTRS,
+      },
+      children
+    ]
+  }
+
+  return iconVnodes;
+}
+

scripts/render/renderIconsObject.js

@@ -0,0 +1,35 @@
+import path from 'path';
+import cheerio from 'cheerio';
+import { minify } from 'html-minifier';
+
+
+/**
+ * Get contents between opening and closing `<svg>` tags.
+ * @param {string} svg
+ * @returns {string}
+ */
+function getSvgContents(svg) {
+  const $ = cheerio.load(svg);
+
+  return minify($('svg').html(), { collapseWhitespace: true });
+}
+
+/**
+ * Build an object in the format: `{ <name>: <contents> }`.
+ * @param {string[]} svgFiles - A list of filenames.
+ * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
+ * @returns {Object}
+ */
+export default (svgFiles, getSvg) => {
+  return svgFiles
+    .map(svgFile => {
+      const name = path.basename(svgFile, '.svg');
+      const svg = getSvg(svgFile);
+      const contents = getSvgContents(svg);
+      return { name, contents };
+    })
+    .reduce((icons, icon) => {
+      icons[icon.name] = icon.contents;
+      return icons;
+    }, {});
+}