Add build scripts for dist

scripts/build/generateExportsFile.js

@@ -0,0 +1,31 @@
+import { generateComponentName, resetFile, writeFile} from './helpers';
+
+export default function(fileName, outputDirectory, componentGetter, iconVNodesObject) {
+  // Reset file
+  resetFile(fileName, outputDirectory);
+
+  // Import the component getter
+  writeFile(`import ${componentGetter} from './src/getters/${componentGetter}';\n\n`, fileName, outputDirectory);
+
+  const icons = Object.keys(iconVNodesObject);
+
+  // Generate Import for Icon VNodes
+  icons.forEach(iconName => {
+    const componentName = generateComponentName(iconName);
+    const importString = `import ${componentName}VNode from './icons';\n`;
+    writeFile(importString, fileName, outputDirectory);
+  });
+
+  writeFile('\n', fileName, outputDirectory);
+
+  // Generate export for all the icons
+  //
+  // output: export const myIcon = getComponent(myIconVNode);
+  icons.forEach(iconName => {
+    const componentName = generateComponentName(iconName);
+    const constantString = `export const ${componentName} = ${componentGetter}(${componentName}VNode);\n`;
+    writeFile(constantString, fileName, outputDirectory);
+  });
+
+  console.log(`Successfully generated ${fileName} file`);
+}

scripts/build/generateIconFiles.js

@@ -3,12 +3,17 @@ import path from 'path';
 import prettier from 'prettier';
 import { generateComponentName } from './helpers';
 
-export default function(iconVNodesObject) {
+export default function(iconVNodesObject, outputDirectory) {
 
   const icons = Object.keys(iconVNodesObject);
+  const iconsDistDirectory = path.join(outputDirectory, `icons`);
+
+  if (!fs.existsSync(iconsDistDirectory)){
+    fs.mkdirSync(iconsDistDirectory);
+  }
 
   icons.forEach(icon => {
-    const location = path.join(process.cwd(), "src/icons", `${icon}.js`);
+    const location = path.join(iconsDistDirectory, `${icon}.js`);
     const ComponentName = generateComponentName(icon);
 
     const VNode = JSON.stringify(iconVNodesObject[icon]);

scripts/build/generateReactFile.js

@@ -1,43 +0,0 @@
-
-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

@@ -1,4 +1,6 @@
 import upperCamelCase from 'upperCamelCase';
+import fs from 'fs';
+import path from 'path';
 
 /**
  * Generates a componentName of a String.
@@ -6,3 +8,11 @@ import upperCamelCase from 'upperCamelCase';
  * @param {string} iconName
  */
 export const generateComponentName = (iconName) => iconName === "github" ? "GitHub" : upperCamelCase(iconName);
+
+export const resetFile = (fileName, outputDirectory) => fs.writeFileSync(path.join(outputDirectory, fileName), "", "utf-8");
+
+export const writeFile = (content, fileName, outputDirectory) => fs.appendFileSync(
+  path.join(outputDirectory, fileName),
+  content,
+  "utf-8"
+);

scripts/buildIcons.js

@@ -4,20 +4,23 @@ import path from 'path';
 import renderIconsObject from './render/renderIconsObject';
 import renderIconVNodes from './render/renderIconVNodes';
 import generateIconFiles from './build/generateIconFiles';
-import generateReactFile from './build/generateReactFile';
-
-
+import generateExportsFile from './build/generateExportsFile';
 
 const IN_DIR = path.resolve(__dirname, '../icons');
-// const OUT_FILE = path.resolve(__dirname, '../dist/icons.json');
+const OUTPUT_DIR = path.resolve(__dirname, '../src');
 
-// console.log(`Building ${OUT_FILE}...`);
+if (!fs.existsSync(OUTPUT_DIR)){
+  fs.mkdirSync(OUTPUT_DIR);
+}
 
 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);
+const iconVNodes = renderIconVNodes(icons);
 
-// generateIconFiles(iconVnodes);
-generateReactFile(iconVnodes);
+generateIconFiles(iconVNodes, OUTPUT_DIR);
+
+generateExportsFile('index.js', OUTPUT_DIR, 'getElement', iconVNodes);
+generateExportsFile('react.js', OUTPUT_DIR, 'getReactComponent', iconVNodes);
+generateExportsFile('vue.js', OUTPUT_DIR, 'getVueComponent', iconVNodes);

scripts/optimizeSvgs.js

@@ -0,0 +1,16 @@
+import fs from 'fs';
+import path from 'path';
+
+const OUT_DIR = path.resolve(__dirname, '../dist/icons');
+
+console.log(`Optimizing SVGs in ${OUT_DIR}...`);
+
+const svgFiles = fs.readdirSync(IN_DIR).filter(file => path.extname(file) === '.svg');
+console.log(svgFiles);
+
+
+// Object.keys(icons).forEach(name => {
+//   const svg = icons[name].toSvg();
+
+//   fs.writeFileSync(path.join(OUT_DIR, `${name}.svg`), svg);
+// });

scripts/render/processSvg.js

@@ -0,0 +1,58 @@
+import Svgo from 'svgo';
+import cheerio from 'cheerio';
+import { format } from 'prettier';
+
+import DEFAULT_ATTRS from '../src/default-attrs.json';
+
+/**
+ * Process SVG string.
+ * @param {string} svg - An SVG string.
+ * @param {Promise<string>}
+ */
+function processSvg(svg) {
+  return (
+    optimize(svg)
+      .then(setAttrs)
+      .then(format)
+      // remove semicolon inserted by prettier
+      // because prettier thinks it's formatting JSX not HTML
+      .then(svg => svg.replace(/;/g, ''))
+  );
+}
+
+/**
+ * Optimize SVG with `svgo`.
+ * @param {string} svg - An SVG string.
+ * @returns {Promise<string>}
+ */
+function optimize(svg) {
+  const svgo = new Svgo({
+    plugins: [
+      { convertShapeToPath: false },
+      { mergePaths: false },
+      { removeAttrs: { attrs: '(fill|stroke.*)' } },
+      { removeTitle: true },
+    ],
+  });
+
+  return new Promise(resolve => {
+    svgo.optimize(svg, ({ data }) => resolve(data));
+  });
+}
+
+/**
+ * Set default attibutes on SVG.
+ * @param {string} svg - An SVG string.
+ * @returns {string}
+ */
+function setAttrs(svg) {
+  const $ = cheerio.load(svg);
+
+  Object.keys(DEFAULT_ATTRS).forEach(key =>
+    $('svg').attr(key, DEFAULT_ATTRS[key]),
+  );
+
+  return $('body').html();
+}
+
+export default processSvg;