# Zeppelin Element Library Vue Component Icons: @zlab-de/zel-vue-icons

A vue icon component library that was generated using Carbon Design System build
files.

## Getting started

```bash
yarn add @zlab-de/zel-vue-icons
```

## Usage

# Method 1: global

You can install these components two ways. The first is to install them when
you're initializing your Vue app. For example:

```js
import { ZelVueIcons } from '@zlab-de/zel-vue-icons';
import ZepiconsCart from '@zlab-de/zel-rvue-icons/ZepiconsCart';
import Vue from 'vue';
import App from './App.vue';

Vue.use(ZelVueIcons, {
  components: {
    ZepiconsCart,
  },
});

new Vue({
  render: h => h(App),
}).$mount('#app');
```

Using `ZelVueIcons` we can pass in any of the icon components that we'd like to
use. In our application, we can then use them by doing:

```vue
<template>
  <ZepiconsCart />
</template>
```

# Method 2: local

```js
import ZepiconsCart from '@zlab-de/zel-vue-icons/ZepiconsCart';

export default {
  name: 'MyComponent',
  component: {
    ZepiconsCart,
  },
};
```

```vue
<template>
  <ZepiconsCart aria-label="cart" class="custom-class" v-on:click="handler" />
</template>
```


## To make new components
Add all svgs to svg folder in icons and then run build. Next run build in icons-vue. To make the npm package a bit nicer, the folders esm, lib, package.json and README.md are copied to a build folder and npm is published from there.