### Implement Lineicons with CSS Icon Fonts

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Demonstrates how to include the CSS stylesheet and apply icons using the .lni base class. Includes examples for sizing, rotation, flipping, and custom styling.

```html
<link href="node_modules/lineicons/dist/lineicons.css" rel="stylesheet" />
<i class="lni lni-home-2"></i>
<i class="lni lni-arrow-right lni-rotate-90"></i>
<i class="lni lni-heart" style="color: red; font-size: 24px;"></i>
```

--------------------------------

### HTML Integration of Styled Lineicons

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Provides examples of how to use Lineicons in HTML, applying custom CSS classes for styling. This includes basic icon usage, icon buttons, and icons with badges.

```html
<!-- Using custom styles -->
<i class="lni lni-github my-icon"></i>

<button class="icon-button">
  <i class="lni lni-download-1"></i>
  Download
</button>

<span class="icon-with-badge">
  <i class="lni lni-bell-1 lni-32"></i>
  <span class="badge">3</span>
</span>
```

--------------------------------

### Install Lineicons using npm or Yarn

Source: https://github.com/lineiconshq/lineicons/blob/main/README.md

Install the Lineicons package using either npm or Yarn package managers. This is the first step to using the icon library in your project.

```bash
npm install lineicons
```

```bash
yarn add lineicons
```

--------------------------------

### Use Lineicons via CDN

Source: https://github.com/lineiconshq/lineicons/blob/main/README.md

Quickly add Lineicons to your project using a Content Delivery Network (CDN) link for the CSS file. This is a convenient way to start using the icons without local installation.

```html
<link rel="stylesheet" href="https://cdn.lineicons.com/5.0/lineicons.css" />
```

--------------------------------

### Initialize Vue 3 Application

Source: https://github.com/lineiconshq/lineicons/blob/main/examples/vue-example/index.html

This snippet demonstrates how to import Vue 3 from a CDN and mount a simple application instance to a specific HTML element. It defines a basic data object containing a message property.

```javascript
import { createApp } from "vue";

createApp({
  data() {
    return {
      message: "Hello Vue!",
    };
  },
}).mount("#app");
```

--------------------------------

### Initialize LineIcon Web Component

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Demonstrates how to programmatically create and configure a LineIcon custom element. It accepts properties like name, type, and style to customize the icon appearance.

```javascript
const icon = document.createElement('line-icon');
icon.name = 'github';
icon.type = 'regular';
icon.style.width = '32px';
icon.style.height = '32px';
icon.style.color = '#333';
document.body.appendChild(icon);
```

--------------------------------

### CSS Styling for Lineicons

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Demonstrates how to style Lineicons using standard CSS properties. This includes setting color, font-size, transitions, and hover effects. It also covers styling for icon buttons and icons with badges.

```css
/* Custom icon styling */
.my-icon {
  color: #3498db;
  font-size: 24px;
  transition: color 0.3s ease;
}

.my-icon:hover {
  color: #2980b9;
}

/* Icon button styling */
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background: #007bff;
  color: white;
  cursor: pointer;
}

.icon-button .lni {
  font-size: 1.2em;
}

/* Custom spinning animation override */
.lni-slow-spin {
  animation: lni-spin 2s infinite linear;
}

/* Icon with badge */
.icon-with-badge {
  position: relative;
  display: inline-block;
}

.icon-with-badge .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 10px;
}
```

--------------------------------

### Implement LineIcons via CSS Classes

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Shows how to render icons by applying specific class names to HTML i elements. This method is suitable for static icon placement across various categories.

```html
<i class="lni lni-facebook"></i>
<i class="lni lni-react"></i>
<i class="lni lni-home-2"></i>
<i class="lni lni-arrow-left"></i>
<i class="lni lni-cart-1"></i>
```

--------------------------------

### Implement Lineicons with SVG Web Components

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Shows how to use the <line-icon> custom element for scalable, high-resolution icons. Supports inline CSS for sizing and color inheritance.

```html
<script type="module" src="node_modules/lineicons/dist/lineicons.js"></script>
<line-icon name="home-2" type="regular"></line-icon>
<line-icon name="amazon" style="width: 50px; height: 50px; color: red"></line-icon>
```

--------------------------------

### Integrate Lineicons with Vue.js

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Demonstrates using Lineicons web components within a Vue.js application template.

```html
<div id="app">
  <line-icon name="adobe" type="regular" style="width: 50px; height: 50px"></line-icon>
</div>
<script type="module">
  import { createApp } from "vue";
  createApp({}).mount("#app");
</script>
```

--------------------------------

### Initialize Icon List Interaction

Source: https://github.com/lineiconshq/lineicons/blob/main/assets/icon-fonts/demo.html

Handles the page load event to iterate through icon list items, injecting character codes and input fields for easy copying. It also attaches click event listeners to trigger text selection on specific child elements.

```javascript
window.onload = function() { var iconsWrapper = document.getElementById('icons-wrapper'), listItems = iconsWrapper.getElementsByTagName('li'); for (var i = 0; i < listItems.length; i++) { listItems[i].onclick = function fun(event) { var selectedTagName = event.target.tagName.toLowerCase(); if( selectedTagName == 'p' || selectedTagName == 'em' ) { SelectText(event.target); } else if( selectedTagName == 'input' ) { event.target.setSelectionRange(0, event.target.value.length); } } var nameClass = listItems[i].getElementsByClassName('js-classname'), ligatureEl = listItems[i].getElementsByClassName('js-ligature'); var beforeContentChar = window.getComputedStyle(listItems[i].getElementsByTagName('i')[0], '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, ""), beforeContent = beforeContentChar.codePointAt(0).toString(16); var beforeContentElement = document.createElement("em"); beforeContentElement.textContent = "\\"+beforeContent; var charCharac = document.createElement('input'); charCharac.setAttribute('type', 'text'); charCharac.setAttribute('maxlength', '1'); charCharac.setAttribute('readonly', 'true'); charCharac.setAttribute('value', beforeContentChar); nameClass[0].after(charCharac); nameClass[0].after(beforeContentElement); if(ligatureEl.length > 0) { ligatureEl[0].innerText = ligatureEl[0].innerText.replace(/-/gu, "_"); } } }
```

--------------------------------

### CSS Layout Styles for Container and Icons

Source: https://github.com/lineiconshq/lineicons/blob/main/examples/index.html

Defines the layout structure for the main container and the icon wrapper. It uses flexbox to center content and manage spacing between icons.

```css
.container { max-width: 770px; margin: 40px auto; display: flex; align-items: center; justify-content: center; }
.icons { display: flex; gap: 50px; flex-wrap: wrap; }
```

--------------------------------

### Use Lineicons CSS Icon Font

Source: https://github.com/lineiconshq/lineicons/blob/main/README.md

Integrate Lineicons into your project by linking the CSS file in the head of your HTML. Icons are then applied using specific CSS classes.

```html
<head>
  <link href="[/project_path]/dist/lineicons.css" rel="stylesheet" />
</head>

<i class="lni lni-add-file"></i>
```

--------------------------------

### Available Icon Classes

Source: https://context7.com/lineiconshq/lineicons/llms.txt

Lineicons provides a wide range of icon classes that can be used with an `<i>` tag for CSS-based icon integration.

```APIDOC
## Available Icon Classes

Lineicons provides 600+ icons covering various categories. Below is a sample of commonly used icon class names for the CSS font approach.

### Social Media & Brands
```html
<i class="lni lni-facebook"></i>
<i class="lni lni-twitter-old"></i>
<i class="lni lni-instagram"></i>
<i class="lni lni-linkedin"></i>
<i class="lni lni-youtube"></i>
<i class="lni lni-github"></i>
<i class="lni lni-discord"></i>
<i class="lni lni-slack"></i>
<i class="lni lni-tiktok"></i>
```

### Technology & Development
```html
<i class="lni lni-react"></i>
<i class="lni lni-vuejs"></i>
<i class="lni lni-angular"></i>
<i class="lni lni-nodejs"></i>
<i class="lni lni-python"></i>
<i class="lni lni-javascript"></i>
<i class="lni lni-typescript"></i>
<i class="lni lni-docker"></i>
<i class="lni lni-aws"></i>
```

### UI Elements
```html
<i class="lni lni-home-2"></i>
<i class="lni lni-search-1"></i>
<i class="lni lni-user-4"></i>
<i class="lni lni-gear-1"></i>
<i class="lni lni-menu-hamburger-1"></i>
<i class="lni lni-bell-1"></i>
<i class="lni lni-envelope-1"></i>
<i class="lni lni-heart"></i>
<i class="lni lni-star-fat"></i>
```

### Arrows & Navigation
```html
<i class="lni lni-arrow-left"></i>
<i class="lni lni-arrow-right"></i>
<i class="lni lni-arrow-upward"></i>
<i class="lni lni-arrow-downward"></i>
<i class="lni lni-chevron-up"></i>
<i class="lni lni-chevron-down"></i>
<i class="lni lni-chevron-left"></i>
<i class="lni lni-angle-double-right"></i>
```

### Actions
```html
<i class="lni lni-download-1"></i>
<i class="lni lni-upload-1"></i>
<i class="lni lni-share-1"></i>
<i class="lni lni-trash-3"></i>
<i class="lni lni-pencil-1"></i>
<i class="lni lni-plus"></i>
<i class="lni lni-minus"></i>
<i class="lni lni-check"></i>
<i class="lni lni-xmark"></i>
```

### Payment & E-commerce
```html
<i class="lni lni-cart-1"></i>
<i class="lni lni-credit-card-multiple"></i>
<i class="lni lni-paypal"></i>
<i class="lni lni-stripe"></i>
<i class="lni lni-visa"></i>
<i class="lni lni-mastercard"></i>
<i class="lni lni-bitcoin"></i>
```
```

--------------------------------

### LineIcon Web Component API

Source: https://context7.com/lineiconshq/lineicons/llms.txt

The LineIcon custom element is built using Lit framework and provides a declarative way to render SVG icons. It accepts properties like 'name', 'type', and 'style' for customization.

```APIDOC
## LineIcon Web Component API

### Description
The `LineIcon` custom element is built using Lit framework and provides a declarative way to render SVG icons.

### Properties
- **name** (string) - Required - The icon name (e.g., "home-2", "github", "react")
- **type** (string) - Optional (default: "regular") - The icon type/variant
- **style** (string) - Optional - Inline CSS styles for customization

### Default Styles
- `display`: `inline-block`
- `width`: `24px` (default)
- `height`: `24px` (default)
- `color`: `currentColor` (inherited from parent)
- SVG `fill`: `currentColor`

### Usage Example (JavaScript)
```javascript
const icon = document.createElement('line-icon');
icon.name = 'github';
icon.type = 'regular';
icon.style.width = '32px';
icon.style.height = '32px';
icon.style.color = '#333';
document.body.appendChild(icon);
```

### Error Handling
If an icon is not found, the component displays an "Icon not found" message and logs an error to the console: `Icon "${name}" not found in ${type} type!`
```

--------------------------------

### Use Lineicons SVG Web Component

Source: https://github.com/lineiconshq/lineicons/blob/main/README.md

Incorporate Lineicons as an SVG web component by including a JavaScript file. This allows for flexible icon usage with attributes for name and type.

```html
<script type="module" src="[/project_path]/dist/lineicons.js"></script>

<line-icon name="home" type="regular"></line-icon>
```

--------------------------------

### Select Text in DOM Element

Source: https://github.com/lineiconshq/lineicons/blob/main/assets/icon-fonts/demo.html

A cross-browser utility function that selects the text content of a given DOM element. It supports both legacy Internet Explorer text ranges and modern W3C selection APIs.

```javascript
function SelectText(element) { var doc = document, text = element, range, selection; if (doc.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(text); range.select(); } else if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(text); selection.removeAllRanges(); selection.addRange(range); } }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.