feat: Upgrade MDI & match vue styleguide

BREAKING CHANGE: Match the component names to the structure recommended
by the Vue style guide. This means all files now begin with a capital
letter, i.e. "android.vue" is now "Android.vue", and the component
names are Pascal-cased instead of camel-cased. i.e.
"CheckboxMarkedCircle" instead of "checkbox-marked-circle".

Other changes include:
- Async build script, to make it a little faster. Also refactored to
  use the new @mdi/svg repo, so some of the build hacks can go away.
- Added some testing and snapshots, to make upgrades quicker to verify.
- Updated to the lastest version of MDI for more icons.
- Updated the LICENSE for 2018
- Added .nvmrc
- Fairly unimportant, but the generated .vue files now pass all the
  rules on the Vue style guide; this should make them a little more
  consistent and easier to read for those familiar with Vue.

Fixes #1, #2

Author: Rob Cresswell

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["@babel/preset-env", {"targets": { "node": "current" }}]]
+}

.gitmodules

@@ -0,0 +1 @@
+10.8

.nvmrc

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Rob Cresswell
+Copyright (c) 2018 Rob Cresswell
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -31,7 +31,7 @@ easier.
 3. Import the icon, and declare it as a local component:
 
     ```javascript
-    import MenuIcon from "vue-material-design-icons/menu.vue"
+    import MenuIcon from "vue-material-design-icons/Menu.vue"
 
     components: {
       MenuIcon
@@ -43,13 +43,13 @@ easier.
     Declare it as a global component:
 
     ```javascript
-    import MenuIcon from "vue-material-design-icons/menu.vue"
+    import MenuIcon from "vue-material-design-icons/Menu.vue"
 
     Vue.component("menu-icon", MenuIcon)
     ```
 
-    > **Note** Icon files are kebab cased, e.g. `checkbox-marked-circle.vue`, and
-    > their default name has `-icon` appended e.g. `checkbox-marked-circle-icon`.
+    > **Note** Icon files are pascal cased, e.g. `CheckboxMarkedCircle.vue`, and
+    > their default name has `Icon` appended e.g. `CheckboxMarkedCircleIcon`.
 
 4. Then use it in your template code!
 
@@ -94,10 +94,11 @@ easier.
 
 A list of the icons can be found at the
 [Material Design Icons website](https://materialdesignicons.com/
-"Material Design Icons website"). The icons packaged here match the names
-displayed on the website, such as `ultra-high-definition`, with the `.vue`
-extension; that icon would be imported as
-`"vue-material-design-icons/ultra-high-definition.vue"`.
+"Material Design Icons website"). The icons packaged here are pascal cased
+versions of the names displayed on the website, to match the
+[Vue Style Guide](https://vuejs.org/v2/style-guide/). For example, the icon
+named `ultra-high-definition` would be imported as
+`"vue-material-design-icons/UltraHighDefinition.vue"`.
 
 ## Tips
 
@@ -115,8 +116,8 @@ extension; that icon would be imported as
     ```
 
     This will give you much shorter and more readable imports, like
-    `import Android from "icons/android"`, rather than
-    `import Android from "vue-material-design-icons/android.vue"`. Much better!
+    `import Android from "icons/Android"`, rather than
+    `import Android from "vue-material-design-icons/Android.vue"`. Much better!
 
 - Add click handlers to the icons with `@click.native`. For example:
 

README.md

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon renders an icon 1`] = `<span aria-label="Android icon" role="img" class="material-design-icon android-icon"><svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" class="material-design-icon__svg"><title>Android icon</title> <path d="M15,5H14V4H15M10,5H9V4H10M15.53,2.16L16.84,0.85C17.03,0.66 17.03,0.34 16.84,0.14C16.64,-0.05 16.32,-0.05 16.13,0.14L14.65,1.62C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.14C7.66,-0.05 7.34,-0.05 7.15,0.14C6.95,0.34 6.95,0.66 7.15,0.85L8.46,2.16C6.97,3.26 6,5 6,7H18C18,5 17,3.25 15.53,2.16M20.5,8C19.67,8 19,8.67 19,9.5V16.5C19,17.33 19.67,18 20.5,18C21.33,18 22,17.33 22,16.5V9.5C22,8.67 21.33,8 20.5,8M3.5,8C2.67,8 2,8.67 2,9.5V16.5C2,17.33 2.67,18 3.5,18C4.33,18 5,17.33 5,16.5V9.5C5,8.67 4.33,8 3.5,8M6,18C6,18.55 6.45,19 7,19H8V22.5C8,23.33 8.67,24 9.5,24C10.33,24 11,23.33 11,22.5V19H13V22.5C13,23.33 13.67,24 14.5,24C15.33,24 16,23.33 16,22.5V19H17C17.55,19 18,18.55 18,18V8H6V18Z"></path></svg></span>`;

__tests__/__snapshots__/icon.js.snap

@@ -0,0 +1,46 @@
+import { shallowMount } from "@vue/test-utils";
+import AndroidIcon from "../dist/Android.vue";
+
+describe("Icon", () => {
+  let icon;
+
+  beforeEach(() => {
+    icon = shallowMount(AndroidIcon);
+  });
+
+  it("accepts a \"title\" property", () => {
+    expect(icon.vm.title).toEqual("Android icon");
+    expect(icon.attributes()["aria-label"]).toEqual("Android icon");
+
+    icon.setProps({ title: "foo" });
+
+    expect(icon.vm.title).toEqual("foo");
+    expect(icon.attributes()["aria-label"]).toEqual("foo");
+  });
+
+  it("accepts a \"decorative\" property", () => {
+    expect(icon.vm.decorative).toBe(false);
+    expect(icon.attributes()["aria-hidden"]).toBeFalsy();
+
+    icon.setProps({ decorative: true });
+
+    expect(icon.vm.decorative).toBe(true);
+    expect(icon.attributes()["aria-hidden"]).toBeTruthy();
+  });
+
+  it("accepts a \"fillColor\" property", () => {
+    const svg = icon.find(".material-design-icon__svg");
+
+    expect(icon.vm.fillColor).toBe("currentColor");
+    expect(svg.attributes()["fill"]).toEqual("currentColor");
+
+    icon.setProps({ fillColor: "#FF0000" });
+
+    expect(icon.vm.fillColor).toBe("#FF0000");
+    expect(svg.attributes()["fill"]).toEqual("#FF0000");
+  });
+
+  it("renders an icon", () => {
+    expect(icon).toMatchSnapshot();
+  });
+});

__tests__/icon.js

@@ -1,50 +1,57 @@
 #!/usr/bin/env node
 
+// Imports
 const fs = require("fs");
+const fsp = require("fs").promises;
 const mustache = require("mustache");
 const path = require("path");
-
+const icons = require("@mdi/js/commonjs/mdi.js");
 const dist = path.resolve(__dirname, "dist");
-const template = path.resolve(__dirname, "template.mst");
-const svgPath = path.resolve(__dirname, "node_modules/@mdi/svg/svg");
+const templateFile = path.resolve(__dirname, "template.mst");
+const iconIDs = Object.keys(icons);
 
-const svgs = fs.readdirSync(svgPath);
+const templateData = iconIDs.map(id => {
+  const splitID = id.split(/(?=[A-Z])/).slice(1);
 
-const getPath = svg => {
-  const matches = /\sd="(.*)"/.exec(
-    fs.readFileSync(path.join(svgPath, svg), {
-      encoding: "utf8"
-    })
-  );
+  const name = splitID.join("");
 
-  if (matches) {
-    return matches[0];
-  }
-};
+  // This is a hacky way to remove the 'mdi' prefix, so "mdiAndroid" becomes
+  // "android", for example
+  const title = splitID.join("-").toLowerCase();
 
-const makeHumanReadable = name => {
-  const spacedName = name.split("-").join(" ");
-  humanReadableName = spacedName.charAt(0).toUpperCase() + spacedName.slice(1);
-  return humanReadableName;
-};
+  // Transforms the icon ID to a human readable form for default titles.
+  // For example, "mdiAndroidStudio" becomes "Android Studio"
+  const readableName = splitID.join(" ");
 
-const templateData = svgs.map(svg => {
-  const name = svg.slice(0, -4);
   return {
-    name: name,
-    readableName: makeHumanReadable(name),
-    path: getPath(svg)
+    name,
+    title,
+    readableName,
+    svgPathData: icons[id]
   };
 });
 
-const componentFile = fs.readFileSync(template, { encoding: "utf8" });
+const generateIcons = async () => {
+  const template = fs.readFileSync(templateFile, { encoding: "utf8" });
 
-if (!fs.existsSync(dist)) {
-  fs.mkdirSync(dist);
-}
+  if (!fs.existsSync(dist)) {
+    fs.mkdirSync(dist);
+  }
+
+  const filePromises = templateData.map(
+    ({ name, title, readableName, svgPathData }) => {
+      const component = mustache.render(template, {
+        name,
+        title,
+        readableName,
+        svgPathData
+      });
+      const filename = `${name}.vue`;
+      return fsp.writeFile(path.resolve(dist, filename), component);
+    }
+  );
+
+  Promise.all(filePromises);
+};
 
-for (data of templateData) {
-  const component = mustache.render(componentFile, data);
-  const filename = data.name + ".vue";
-  fs.writeFileSync(path.resolve(dist, filename), component);
-}
+generateIcons();

build.js

@@ -0,0 +1,14 @@
+module.exports = {
+  "verbose": true,
+  "moduleFileExtensions": [
+    "js",
+    "vue"
+  ],
+  "transform": {
+    "^.+\\.vue$": "vue-jest",
+    "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
+  },
+  "snapshotSerializers": [
+    "<rootDir>/node_modules/jest-serializer-vue"
+  ]
+};