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

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:

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:

<template>
  <ZepiconsCart />
</template>

Method 2: local

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

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

<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.