Eslint fixes

.eslintrc.json

@@ -1,8 +1,12 @@
 {
+  "env": {
+    "browser": true,
+    "node": true
+  },
   "extends": ["airbnb-base", "prettier"],
   "plugins": ["import", "prettier"],
   "rules": {
-    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-console": "off",
     "no-param-reassign": "off",
     "no-shadow": "off",
     "no-use-before-define": "off",

.gitignore

@@ -4,4 +4,4 @@ dist
 sandbox
 stash
 coverage
-.log
+*.log

package.json

@@ -49,9 +49,12 @@
     "lint-staged": "^6.0.0",
     "prettier": "^1.8.2",
     "semantic-release": "^12.2.2",
-    "svgo": "^0.7.2"
+    "svgo": "^1.3.2"
   },
   "dependencies": {
-    "htmlparser2": "^4.1.0"
+    "htmlparser2": "^4.1.0",
+    "lodash": "^4.17.19",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1"
   }
 }

scripts/build/generateExportsFile.js

@@ -1,11 +1,15 @@
-import { generateComponentName, resetFile, writeFile} from './helpers';
+import { generateComponentName, resetFile, writeFile } from './helpers';
 
 export default function(fileName, outputDirectory, componentGetter, iconNodes) {
   // Reset file
   resetFile(fileName, outputDirectory);
 
   // Import the component getter
-  writeFile(`import ${componentGetter} from './src/getters/${componentGetter}';\n\n`, fileName, outputDirectory);
+  writeFile(
+    `import ${componentGetter} from './src/getters/${componentGetter}';\n\n`,
+    fileName,
+    outputDirectory,
+  );
 
   const icons = Object.keys(iconNodes);
 

scripts/build/generateIconFiles.js

@@ -1,14 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import fs from 'fs';
 import path from 'path';
 import prettier from 'prettier';
 import { generateComponentName } from './helpers';
 
 export default function(iconNode, outputDirectory) {
-
   const icons = Object.keys(iconNode);
   const iconsDistDirectory = path.join(outputDirectory, `icons`);
 
-  if (!fs.existsSync(iconsDistDirectory)){
+  if (!fs.existsSync(iconsDistDirectory)) {
     fs.mkdirSync(iconsDistDirectory);
   }
 
@@ -22,12 +22,8 @@ export default function(iconNode, outputDirectory) {
       export default [${Node}]
     `;
 
-    fs.writeFileSync(
-      location,
-      prettier.format(element, { parser: "babel" }),
-      "utf-8"
-    );
+    fs.writeFileSync(location, prettier.format(element, { parser: 'babel' }), 'utf-8');
 
-    console.log("Successfully built", ComponentName);
+    console.log('Successfully built', ComponentName);
   });
 }

scripts/build/helpers.js

@@ -1,4 +1,4 @@
-import upperCamelCase from 'upperCamelCase';
+import { upperFirst, camelCase } from 'lodash/string';
 import fs from 'fs';
 import path from 'path';
 
@@ -7,7 +7,8 @@ import path from 'path';
  *
  * @param {string} iconName
  */
-export const generateComponentName = (iconName) => iconName === "github" ? "GitHub" : upperCamelCase(iconName);
+export const generateComponentName = iconName =>
+  iconName === 'github' ? 'GitHub' : upperFirst(camelCase(iconName));
 
 /**
  * Resets the file contents.
@@ -15,7 +16,8 @@ export const generateComponentName = (iconName) => iconName === "github" ? "GitH
  * @param {string} fileName
  * @param {string} outputDirectory
  */
-export const resetFile = (fileName, outputDirectory) => fs.writeFileSync(path.join(outputDirectory, fileName), "", "utf-8");
+export const resetFile = (fileName, outputDirectory) =>
+  fs.writeFileSync(path.join(outputDirectory, fileName), '', 'utf-8');
 
 /**
  * writes content to a file
@@ -24,8 +26,5 @@ export const resetFile = (fileName, outputDirectory) => fs.writeFileSync(path.jo
  * @param {string} fileName
  * @param {string} outputDirectory
  */
-export const writeFile = (content, fileName, outputDirectory) => fs.appendFileSync(
-  path.join(outputDirectory, fileName),
-  content,
-  "utf-8"
-);
+export const writeFile = (content, fileName, outputDirectory) =>
+  fs.appendFileSync(path.join(outputDirectory, fileName), content, 'utf-8');

scripts/buildIcons.js

@@ -9,7 +9,7 @@ import generateExportsFile from './build/generateExportsFile';
 const IN_DIR = path.resolve(__dirname, '../icons');
 const OUTPUT_DIR = path.resolve(__dirname, '../src');
 
-if (!fs.existsSync(OUTPUT_DIR)){
+if (!fs.existsSync(OUTPUT_DIR)) {
   fs.mkdirSync(OUTPUT_DIR);
 }
 

scripts/optimizeSvgs.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import processSvg from './';
+import processSvg from './render/processSvg';
 
 const ICONS_DIR = path.resolve(__dirname, '../icons');
 

scripts/render/processSvg.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import Svgo from 'svgo';
 import cheerio from 'cheerio';
 import { format } from 'prettier';
@@ -48,9 +49,7 @@ function optimize(svg) {
 function setAttrs(svg) {
   const $ = cheerio.load(svg);
 
-  Object.keys(DEFAULT_ATTRS).forEach(key =>
-    $('svg').attr(key, DEFAULT_ATTRS[key]),
-  );
+  Object.keys(DEFAULT_ATTRS).forEach(key => $('svg').attr(key, DEFAULT_ATTRS[key]));
 
   return $('body').html();
 }

scripts/render/renderIconNodes.js

@@ -1,21 +1,21 @@
-import DEFAULT_ATTRS from './default-attrs.json';
+/* eslint-disable import/no-extraneous-dependencies */
 import { parseDOM } from 'htmlparser2';
+import DEFAULT_ATTRS from './default-attrs.json';
 
-export default (iconsObject) => {
-  const iconNodes = {}
-
-  for(const icon in iconsObject) {
+export default iconsObject => {
+  const iconNodes = {};
 
+  Object.keys(iconsObject).forEach(icon => {
     const svgString = iconsObject[icon];
     const dom = parseDOM(svgString);
 
     const children = [
-      ...dom.map(element => ([
+      ...dom.map(element => [
         element.name,
         {
           ...element.attribs,
-        }
-      ])),
+        },
+      ]),
     ];
 
     iconNodes[icon] = [
@@ -23,10 +23,9 @@ export default (iconsObject) => {
       {
         ...DEFAULT_ATTRS,
       },
-      children
-    ]
-  }
+      children,
+    ];
+  });
 
   return iconNodes;
-}
-
+};

scripts/render/renderIconsObject.js

@@ -1,8 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import path from 'path';
 import cheerio from 'cheerio';
 import { minify } from 'html-minifier';
 
-
 /**
  * Get contents between opening and closing `<svg>` tags.
  * @param {string} svg
@@ -20,8 +20,8 @@ function getSvgContents(svg) {
  * @param {Function} getSvg - A function that returns the contents of an SVG file given a filename.
  * @returns {Object}
  */
-export default (svgFiles, getSvg) => {
-  return svgFiles
+export default (svgFiles, getSvg) =>
+  svgFiles
     .map(svgFile => {
       const name = path.basename(svgFile, '.svg');
       const svg = getSvg(svgFile);
@@ -32,4 +32,3 @@ export default (svgFiles, getSvg) => {
       icons[icon.name] = icon.contents;
       return icons;
     }, {});
-}

src/getters/getElement.js

@@ -3,7 +3,7 @@ const createElement = (tag, attrs, children = []) => {
 
   Object.keys(attrs).forEach(name => {
     element.setAttribute(name, attrs[name]);
-  })
+  });
 
   if (children.length) {
     children = children.forEach(child => {
@@ -14,6 +14,6 @@ const createElement = (tag, attrs, children = []) => {
   }
 
   return element;
-}
+};
 
-export default (iconNode) => createElement(iconNode);
+export default iconNode => createElement(iconNode);

src/getters/getReactComponent.js

@@ -1,26 +1,21 @@
-import { forwardRef, createElement } from "react";
+import { forwardRef, createElement } from 'react';
+import PropTypes from 'prop-types';
 
 export default (iconName, [tag, attrs, children]) => {
-  const Component = forwardRef(
-    (
-      { color = "currentColor", size = 24, width = 2, ...rest },
-      ref
-    ) =>
-      createElement(
-        tag,
-        {
-          ref,
-          ...attrs,
-          width: size,
-          height: size,
-          color,
-          strokeWidth: width,
-          ...rest
-        },
-        children.map(([childTag, childAttrs]) =>
-          createElement(childTag, childAttrs)
-        )
-      )
+  const Component = forwardRef(({ color = 'currentColor', size = 24, width = 2, ...rest }, ref) =>
+    createElement(
+      tag,
+      {
+        ref,
+        ...attrs,
+        width: size,
+        height: size,
+        color,
+        strokeWidth: width,
+        ...rest,
+      },
+      children.map(([childTag, childAttrs]) => createElement(childTag, childAttrs)),
+    ),
   );
 
   Component.propTypes = {
@@ -30,4 +25,4 @@ export default (iconName, [tag, attrs, children]) => {
   };
 
   Component.displayName = `${iconName}`;
-}
+};

src/getters/getVueComponent.js

@@ -3,15 +3,7 @@ export default (iconName, [tag, attrs, children]) => ({
   functional: true,
   render(
     createElement,
-    {
-      props: {
-        color = "currentColor",
-        size = 48,
-        width = 2,
-        strokeWidth = 2,
-        ...rest
-      }
-    }
+    { props: { color = 'currentColor', size = 48, strokeWidth = 2, ...rest } },
   ) {
     return createElement(
       tag,
@@ -22,10 +14,10 @@ export default (iconName, [tag, attrs, children]) => ({
           height: size,
           color,
           strokeWidth,
-          ...rest
-        }
+          ...rest,
+        },
       },
-      children.map(([tag, attrs]) => createElement(tag, { attrs }))
+      children.map(([tag, attrs]) => createElement(tag, { attrs })),
     );
-  }
+  },
 });