feat: copy non-icon dependencies to dist folder

README.md

@@ -8,84 +8,65 @@ Enjoy!
 
 ## How to use
 
-Simply install it using npm or yarn:
+Simply install it using your favourite package manager
 
+eg: 
 ```
-npm install --save mdi-vue
+$ npm install --save mdi-vue
 ```
 ```
-yarn add mdi-vue
+$ yarn add mdi-vue
 ```
+
 ### Import and usage
 
-Simply import the icon you wish to use to yout vue project with the CommonJS syntax like in the following examples:  
+Simply import the icon you wish to use to your vue project with the CommonJS syntax like in the following examples:  
 
 ```js
-require('mdi-vue/HotelIcon');
+require('mdi-vue/Hotel.vue');
 
-import 'mdi-vue/CommentAlertIcon';
+import 'mdi-vue/CommentAlert.vue';
 ```
 
-Note here, that the icons are automatically registered as components to Vuejs, so you can use the freshly imported icons within
-your templates as any other component. The naming syntax of these components is always `mdi-<kebab-cased-icon-name>-icon`.
-
 Example.vue:  
 ```vue
 <template>
   <div>
-    My hand is a <mdi-hook-icon />
-  </div>
-</template>
-
-<script>
-  import 'mdi-vue/HookIcon'
-</script>
-```
-
-
-### Custom icon names 
-
-If you don't like the generated names, you can bind the icons manually to the vue instance as in this example:
-
-CustomIconName.vue:
-```vue
-<template>
-  <div>
-    I am <custom-icon-name />. Pleased to meet you
+    My hand is a <hook-icon />
   </div>
 </template>
 
 <script>
-  import CustomIconName from 'mdi-vue/EmoticonHappyIcon'
+import HookIcon 'mdi-vue/Hook' // works without an extension too
 
-  export default {
-    component: {
-      CustomIconName,
-    },
-  }
+export {
+  components: [
+    HookIcon,
+  ]
+}
 </script>
 ```
 
-Note that the icons still get imported by their original names too.
+## Global imports
 
+Just as any component, icons can be registered globally using `Vue.component` as in the following example.
 
 ## Example
 
-```
+```js
 const Vue = require('vue')
-const HumanIcon = require('mdi-vue/HumanIcon')
+const HumanIcon = require('mdi-vue/Human.vue')
+
+Vue.component('human-icon', HumanIcon)
 
 new Vue({
   el: '#some-html-element',
-  template: '<span><mdi-human-icon /></span>'
+  template: '<human-icon />'
 })
 ```
 
-
-
 Heavily inspired by [mdi-react](https://github.com/levrik/mdi-react/).
 
-
 ## Used resources
 
 - [Material Design Icons](https://materialdesignicons.com/)

build.js

@@ -9,22 +9,19 @@ const rollupPluginCjs = require('rollup-plugin-commonjs')
 const mdi = require('@mdi/js')
 const kebabCase = require('lodash/kebabCase')
 const template = require('./template.js')
+const Paths = require('./consts').Paths
 
 // No magic
-const Paths = Object.freeze({
-  Dist: path.resolve('dist')
-})
-
 const rollupConfig = [
   Object.freeze({
     format: 'esm',
     dir: Paths.Dist,
-    entryFileNames: '[name].esm.js'
+    entryFileNames: '[name].js'
   }),
   // Object.freeze({
   //   format: 'iife',
   //   dir: Paths.Dist,
-  //   entryFileNames: '[name].js'
+  //   entryFileNames: '[name].iife.js'
   // })
 ]
 
@@ -58,6 +55,7 @@ function compileInit(listOfComponents) {
 
 async function build() {
   console.log('Building Material Design Icons')
+
   await makeDir(Paths.Dist)
 
   const listOfComponents = Object.entries(mdi).slice(1)
@@ -81,8 +79,6 @@ async function build() {
     })
 
   await compileInit(await Promise.all(listOfComponents))
-
-  // copy package.json & license files
 }
 
 // Fun!

consts.js

@@ -0,0 +1,12 @@
+'use strict'
+
+const path = require('path')
+
+const Paths = Object.freeze({
+  Dist: path.resolve('dist'),
+  Root: path.resolve('./')
+})
+
+module.exports = {
+  Paths
+}

copy.js

@@ -0,0 +1,27 @@
+'use strict'
+
+const fsp = require('fs').promises
+const path = require('path')
+const makeDir = require('make-dir')
+const Paths = require('./consts').Paths
+
+
+async function copyDependencies() {
+  await makeDir(Paths.Dist)
+
+  return Promise.all([
+    'CHANGELOG.md',
+    'LICENSE',
+    'MDI-LICENSE',
+    'package.json',
+    'README.md'
+  ].map((fileName) => {
+    const sourcePath = path.resolve(Paths.Root, fileName)
+    const targetPath = path.resolve(Paths.Dist, fileName)
+
+    console.log(`copying ${fileName} to ${targetPath}`)
+    return fsp.copyFile(sourcePath, targetPath)
+  }))
+}
+
+copyDependencies()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdi-vue",
-  "version": "0.2.37",
+  "version": "1.0.0-beta",
   "description": "Material Design Icons for Vue.js",
   "main": "./index.js",
   "files": [
@@ -24,13 +24,13 @@
   "bugs": {
     "url": "https://github.com/therufa/mdi-vue/issues"
   },
-  "author": "Attila Max Ruf <attila.ruf@oden.hu>",
+  "author": "Attila Max Ruf <therufa@gmail.com>",
   "license": "(MIT AND OFL-1.1)",
   "scripts": {
-    "clean": "rimraf build dist",
-    "prebuild": "make-dir dist",
-    "build": "echo hello",
-    "release": "standard-version -a"
+    "clean": "rimraf dist",
+    "build": "node build",
+    "release": "standard-version -a",
+    "prepublish": "node copy"
   },
   "dependencies": {
     "vue": "^2.6.10"
@@ -47,4 +47,4 @@
     "standard-version": "^4.2.0",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}

template.js

@@ -1,3 +1,5 @@
+'use static'
+
 module.exports = (name, path) => `
 <template>
   <span class="mdi mdi-${name}">