# vue2-undraw
Vue Illustration Components from https://undraw.co/
For any requests open an issue on https://github.com/netzfluencer/vue-undraw/issues

**Main Features**
* global default color setup
* component color prop for indivdual color on components instances
* general 'vue-undraw' class for global illustration styling
* indivual 'vue-undraw--{componentName}' class for indivual styling

## Installation
`npm install vue2-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 'vue2-undraw/src/components/UndrawAddColor'

export default {
  components: {
    UndrawAddColor
  }
}
```

### 2. Register a component-module from 'vue2-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 'vue2-undraw'

export default {
  components: {
    UndrawAbstract
    UndrawAddColor
  }
}
```

### 3. Global installation (not recommended)
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 'vue2-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 `vue2-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 'vue2-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 components
```

### Compiles and minifies for production
```
npm run build
```