@lil-icons/vue

lil-icons

Demo

Installation

npm install @lil-icons/vue

or

yarn add @lil-icons/vue

Usage

1. Wrap your app in LilIconsProvider:

<template>
  <div id="app">
    <LilIconsProvider>
        ...
    </LilIconsProvider>
  </div>
</template>

<script>
    import { LilIconsProvider } from '@lil-icons/vue';
    export default {
        name: 'app',
        components: {
            LilIconsProvider,
        },
    };
</script>

1. Use icon as a common component:

<template>
    <div>
        <IconSuccess />
        ...
    </div>
</template>

<script>
    import { IconSuccess } from '@lil-icons/vue';
    export default {
        name: 'MyComponent',
        components: {
            IconSuccess,
        },
    };
</script>

You can declare props once in LilIconsProvider and they will be passed down to all the icons. It uses provide/inject API:

<LilIconsProvider color="green" width={64} height={64}>
  <IconSuccess /> // green 64x64
</LilIconsProvider>

Icon props have a higher priority than provider props:

<LilIconsProvider color="green">
  <IconSuccess color="red" /> // red
</LilIconsProvider>

You can inject values from provider in your custom components:

<script>
  export default {
    name: 'MyCustomIcon',
    inject: ['lilIconsColor', 'lilIconsWidth', 'lilIconsHeight'],
  };
</script>
);

Props

Prop	Type	Required
color	String	No
width	String or Number	No
height	String or Number	No