Add prepublish script (#942)

* Add prepublish script

Compiles icons into both static js files (icons/{filename}.js) and
into a static index.js. The latter is not tree-shakeable.

Closes #941, closes #751

* Add information on tree-shaking to README

* Remove index.js after publishing

* Change 'prepublish' to 'prepublishOnly'

* Link to webpack in README

* Simplify postpublish cleanup

Thanks @ericcornelissen

* Fix quote usage in prepublish.js

* Fix quote usage in utils.js

* Optimized file size of prepublish output

* Improved readability of prepublish script

README.md

@@ -47,6 +47,23 @@ console.log(simpleIcons['Google+']);
 */
 ```
 
+Alternatively you can import the needed icons individually.
+This is useful if you are e.g. compiling your code with [webpack](https://webpack.js.org/) and therefore have to be mindful of your package size:
+
+```js
+const googleplus = require('simple-icons/icons/googleplus');
+
+console.log(googleplus);
+/*
+{
+    title: 'Google+',
+    hex: 'DC4E41',
+    source: 'https://developers.google.com/+/branding-guidelines',
+    svg: '<svg aria-labelledby="simpleicons-googleplus-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">...</svg>'
+}
+*/
+```
+
 ## Third Party Extensions
 
 ### WordPress

index.js

@@ -1,18 +0,0 @@
-const dataFile = './_data/simple-icons.json';
-const data = require(dataFile);
-const fs = require('fs');
-
-const icons = {};
-
-data.icons.forEach(i => {
-  const filename = i.title.toLowerCase()
-    .replace(/\+/g, "plus")
-    .replace(/^\./, "dot-")
-    .replace(/\.$/, "-dot")
-    .replace(/\./g, "-dot-")
-    .replace(/[ !’]/g, '');
-  i.svg = fs.readFileSync(`${__dirname}/icons/${filename}.svg`, 'utf8');
-  icons[i.title] = i
-});
-
-module.exports = icons;

package.json

@@ -23,6 +23,8 @@
   },
   "scripts": {
     "jsonlint": "jsonlint _data/simple-icons.json -q -V .jsonlintschema",
-    "svglint": "svglint icons/* --ci"
+    "svglint": "svglint icons/* --ci",
+    "prepublishOnly": "node scripts/prepublish.js",
+    "postpublish": "rm icons/*.js index.js"
   }
 }

scripts/prepublish.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+/**
+ * @fileoverview
+ * Compiles our icons into static .js files that can be imported in the browser
+ * and are tree-shakeable.
+ * The static .js files go in icons/{filename}.js.
+ * Also generates an index.js that exports all icons by title, but is not tree-shakeable
+ */
+
+const dataFile = "../_data/simple-icons.json";
+const indexFile = `${__dirname}/../index.js`;
+const iconsDir = `${__dirname}/../icons`;
+const data = require(dataFile);
+const fs = require("fs");
+
+const { titleToFilename } = require("./utils");
+
+const icons = {};
+data.icons.forEach(icon => {
+    const filename = titleToFilename(icon.title);
+    icon.svg = fs.readFileSync(`${iconsDir}/${filename}.svg`, "utf8");
+    icons[icon.title] = icon;
+    // write the static .js file for the icon
+    fs.writeFileSync(
+        `${iconsDir}/${filename}.js`,
+        `module.exports=${JSON.stringify(icon)};`
+    );
+});
+
+// write our generic index.js
+fs.writeFileSync(indexFile, `module.exports=${JSON.stringify(icons)};`);

scripts/utils.js

@@ -0,0 +1,14 @@
+module.exports = {
+    /**
+     * Converts a brand title into a filename (not a full path)
+     * @param {String} title The title to convert
+     */
+    titleToFilename: title => (
+        title.toLowerCase()
+            .replace(/\+/g, "plus")
+            .replace(/^\./, "dot-")
+            .replace(/\.$/, "-dot")
+            .replace(/\./g, "-dot-")
+            .replace(/[ !’]/g, "")
+    )
+}