first commit

Author: netzfluencer

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+_illustrations
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Marvin Klimm
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,80 @@
+# vue-undraw
+Vue Illustration Components from https://undraw.co/
+For any requests open an issue on https://github.com/netzfluencer/vue-undraw/issues
+
+## Installation
+`npm install vue-undraw`
+
+## Setup
+You can use the vue-undraw in multiple approaches. Keep in mind that the total size of all illustrations goes beyond 20mb. A global usage in vue projects is technical possible, but not generaly not recommended.
+
+### 1. Register a component by referencing to the specific Source
+This is the most simplest approach to keep depended projects as small as possible, by importing only the illustrations which are needed.
+```
+import UndrawAddColor from 'vue-undraw/src/components/UndrawAddColor'
+
+export default {
+  components: {
+    UndrawAddColor
+  }
+}
+```
+
+### 2. Register a component-module from '@netzfluencer/vue-undraw'
+Similar to first approach. Benefits compared to first:
+1. shorter and clearer imports
+2. consistent illustrationnames
+
+Feel free to take this approach if treeshaking is no problem. https://webpack.js.org/guides/tree-shaking/
+```
+import { UndrawAbstract, UndrawAddColor } from '@netzfluencer/vue-undraw'
+
+export default {
+  components: {
+    UndrawAbstract
+    UndrawAddColor
+  }
+}
+```
+
+### 3. Global installation
+If project size does not need to be considered as much (e.g. in a design systems documentation env.) it is also possible to use the illustrations globally.
+
+Just add this in your entrypoints js-file:
+```
+import * as VueUndraw from 'vue-undraw'
+
+Vue.use(VueUndraw)
+```
+
+## Color Setup
+By default the svgs colors are inherting the svgs/parents text-color. You can overwrite this colors by using the `vue-undraw` css-class or by setting it up in the installations options. (If you don't want to install the components globally you need to add the `noGlobalInstall: true` key too)
+```
+import * as VueUndraw from 'vue-undraw'
+
+Vue.use(VueUndraw, {color: '#777777', noGlobalInstall: true})
+```
+
+-----------
+
+## Project Development
+```
+npm install
+```
+
+### Renaming svgs
+Rename saved svgs from undraw.co in the _illustrations dir. Some manual adjustments need to get done (e.g. removing a handfull of '-').
+```
+npm run rename
+```
+
+### Component Creation
+Create vue components from svgs. Some manual adjustments need to get done (e.g. syntax errors in components/index.js)
+```
+npm run create
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

dist/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vue-undraw demo</title>
+<script src="./vue-undraw.umd.js"></script>
+
+<link rel="stylesheet" href="./vue-undraw.css">
+
+
+<script>
+console.log(vue-undraw)
+</script>