npm package: @lipak/lipak-icon
Description: Lipak proprietary icons with size & color change capability.
Latest version: 0.0.9

# Lipak Icon
Lipak proprietary icons with size & color change capability.

## Installation
`npm install --save @lipak/lipak-icon`

## How to use
there is 3 ways to use LipakIcon:

#### 1. import all icons globally

add all icon components to vue instance in `main.js` for using globally.
``` js
// main.js
import Vue from 'vue';
import * as LipakIcons from '@lipak/lipak-icon';
import '@lipak/lipak-icon/src/style.css';

...

for (const [LipakIconKey, LipakIconComponent] of Object.entries(LipakIcons)) {
    Vue.component(LipakIconKey, LipakIconComponent);
}

...
```

now all icons can be used as a component in the vue template without importing them.
``` html
<template>
    <div>
        my lipak icon: <LIArrowRight />
    </div>
</template>
```

#### 2. import needed icons globally (tree shaking)

add needed icon components to vue instance in `main.js` for using globally.
``` js
// main.js
import Vue from 'vue';
import LIArrowRight from '@lipak/lipak-icon/arrow-right';
import LIBars from '@lipak/lipak-icon/bars';
import '@lipak/lipak-icon/src/style.css';

...

Vue.component('LIArrowRight', LIArrowRight);
Vue.component('LIBars', LIBars);

...
```

now all imported icons can be used as a component in the vue template without importing them in component.
``` html
<template>
    <div>
        my imported icons:
        <LIArrowRight />
        <LIBars />
    </div>
</template>
```

#### 3. import needed icons in component (tree shaking)

``` js
// main.js
...

import '@lipak/lipak-icon/src/style.css';

...
```

``` html
<template>
    <div>
        my imported icons:
        <LIArrowRight />
        <LIBars />
    </div>
</template>

<script>
import LIArrowRight from '@lipak/lipak-icon/arrow-right';
import LIBars from '@lipak/lipak-icon/bars';

export default {
    components: {
        LIArrowRight,
        LIBars,
    }
};
</script>
```

## Notes
1. icon color can be changed with `color` as component props or css property.
2. icon size can be changed with `font-size` css property.

## Available icons

arrowRight, art, article, barcode, bars, basketCheck, basketPlus, building, calendar, capture, cartList, chain, chartBar, chatQuestion, checkCircle, checkCircleAlt, checkCircleCut, checkCircleFill, checkGear, chevronDown, chevronLeft, chevronRight, clock, cloudGear, conversation, conversationCheckTimes, courier, creditCard, earth, edit, email, exchangeAltH, exchangeAltV, exchangeGroupAlt, exchangeV, exclamationSquare, gear, group, handsfree, hide, hundredPercent, iso, isoStar, key, layers, location, locationAlt, mailbox, menuA, menuB, message, multicolor, paperPlane, percent, percentPaper, percentTag, phone, planning, plus, printer, product, productCheck, productDelivered, productGroup, productList, productListAlt, productPerson, productPersonAlt, productTimes, reactionPack, recycle, recycleBold, recycleCoin, recycleMessage, recycleUser, restoreProduct, scroll, search, shapes, share, show, signOut, slider, star, state, storehouse, tablet, tag, taskCheck, taskList, taskListAlt, taskPlus, thumbsDown, thumbsUp, times, timesCircle, timesSquare, tipax, todo, todoChecked, trash, truck, user, userAlt, userGroup, userHeadphone, userInfo, userLock, wallet, walletAlt, wifiFlat