Lineicons Vue — Lineicons Integration for Vue
Elegant and easy-to-use Vue components for Lineicons. Integrate lightweight SVG icons (Free & Pro) into your Vue projects with full TypeScript support.
Installation
Free Icons
npm install @lineiconshq/vue-lineicons @lineiconshq/free-icons
Pro Icons (Manual Local Install)
If you have access to LineIcons Pro, install your .tgz icon packages locally.
Option 1: Icons inside lineicons/ folder
npm install @lineiconshq/vue-lineicons
npm install ./lineicons/@lineicons-pro-core-solid-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-outlined-1.0.0.tgz
Option 2: Icons not in lineicons/ folder
npm install ./@lineicons-pro-core-solid-1.0.0.tgz
npm install ./@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./@lineicons-pro-core-outlined-1.0.0.tgz
Usage
Free Icons Example (Composition API)
<template>
<div>
<Lineicons :icon="Home2Outlined" :size="24" color="blue" />
<Lineicons :icon="CloudBolt1Bulk" :size="40" color="orange" />
<Lineicons :icon="CloudBolt1Outlined" :size="50" color="blue" />
<Lineicons :icon="CloudBolt1Duotone" :size="30" color="green" />
<Lineicons :icon="CloudBolt1Solid" :size="24" />
<Lineicons :icon="Home2Stroke" :size="80" :stroke-width="2" />
</div>
</template>
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import {
Home2Outlined,
CloudBolt1Bulk,
CloudBolt1Outlined,
CloudBolt1Duotone,
CloudBolt1Solid,
Home2Stroke,
} from "@lineiconshq/free-icons";
</script>
Pro Icons Example (Composition API)
<template>
<div class="icon-container">
<Lineicons :icon="AlarmError" :size="24" :color="'red'" />
<Lineicons :icon="Wallet2" :size="24" :color="'green'" />
<Lineicons :icon="Zen" :size="24" :color="'blue'" />
<Lineicons :icon="Barn" :size="24" :color="'orange'" />
<Lineicons :icon="BadgeBolt2" :size="24" :color="'purple'" />
</div>
</template>
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-solid";
import { Wallet2 } from "@lineiconshq-pro/core-stroke";
import { Zen } from "@lineiconshq-pro/core-duotone";
import { Barn } from "@lineiconshq-pro/core-bulk";
import { BadgeBolt2 } from "@lineiconshq-pro/core-outlined";
</script>
Free Icons Example (Options API)
<template>
<Lineicons :icon="currentIcon" :size="24" color="red" />
</template>
<script>
import { Lineicons } from "@lineiconshq/vue-lineicons";
import { Home2Outlined } from "@lineiconshq/free-icons";
export default {
components: {
Lineicons,
},
data() {
return {
currentIcon: Home2Outlined,
};
},
};
</script>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
Object |
— (required) | The icon component to render |
size |
Number | String |
24 |
Icon size in pixels or CSS units |
color |
String |
'currentColor' |
Icon color |
strokeWidth |
Number | String |
1.5 |
Stroke width for stroke icons |
class |
String |
— | Additional CSS class name |
style |
Object |
— | Inline styles |
All other valid SVG attributes are supported and passed through.
Available Icon Styles
| Style | Package | Description |
|---|---|---|
| Solid | @lineicons-pro/core-solid |
Filled style icons with solid colors. |
| Bulk | @lineicons-pro/core-bulk |
Bold, filled style icons. |
| Duotone | @lineicons-pro/core-duotone |
Two-tone style icons with primary and secondary colors. |
| Stroke | @lineicons-pro/core-stroke |
Stroke style icons with customizable stroke width. |
| Outlined | @lineicons-pro/core-outlined |
Outlined style icons. |
TypeScript Support
Fully typed — includes definitions for the Lineicons component, IconData interface, and all icon exports.