@lineiconshq/vue-lineicons

Lineicons Vue — Essential UI Icons for Vue

Lineicons Vue provides ready-to-use Vue components for Lineicons, making it easy to add scalable SVG icons to your Vue 3 projects. Customize size, color, and style with simple props — perfect for modern UI development.

Installation

npm install @lineiconshq/vue-lineicons @lineiconshq/free-icons

Usage

With 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" class="bg-success-500" />
    <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>

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

API Reference

Lineicons

Main component for rendering icons.

interface LineiconsProps {
  icon: IconData;
  size?: number;
  color?: string;
  class?: string;
  strokeWidth?: number;
}

interface IconData {
  name: string;
  svg: string;
  viewBox: string;
  defaultFill?: string;
  defaultStroke?: string;
  hasFill: boolean;
  hasStroke: boolean;
  hasStrokeWidth: boolean;
}

All other valid SVG attributes are supported and passed through.

TypeScript Support

Full TypeScript support with type definitions for all components and icons for better autocomplete and DX.

Available Icon Styles

• Stroke — Outline icons with customizable stroke width
• Solid — Fully filled icons
• Duotone — Two-tone icons
• Bulk — Filled icons with background accents
• Outlined — Alternative outline style

License

• Free Icons: MIT License

Resources & Support

• 📖 Documentation
• 💬 Support
• 🔌 Figma Plugin
• 📁 Figma Source