@lipak/lipak-icon v0.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.

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

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

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

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

3. import needed icons in component (tree shaking)

// main.js
...

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

...

<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