Vue Integration

Welcome to the Vue integration section of Lineicons Documentation. In this guide, we will walk you through how to integrate Lineicons V5 with Vue and start using it!

With Lineicons V5, you can easily add a stylish, flexible, and customizable icon library to your Vue projects. Here, we will discuss the installation, implementation, and customization steps and ensure the icons meet your project functionality and design.

Integrating Lineicons with Vue Projects

Lineicons smoothly integrates with any Vue project. You can use the CDN link or install the NPM package for faster access.

Using NPM

Step-1: Install the NPM package for Lineicons.

npm install lineicons

yarn add lineicons

Step-2: After the installation is done, you’ll have to add the CSS file to your project.

<link rel="stylesheet" href="./node_modules/lineicons/web-font/lineicons.css" />

Step-3: After that, browse the icons page, pick your icon, and copy the code snippet.

Step-4: Paste the code within the Vue template in your project.

<template>
  <svg
    width="80"
    height="80"
    viewBox="0 0 25 24"
    fill="#343C54"
    xmlns="http://www.w3.org/2000/svg"
    transform="rotate(0 0 0)"
  >
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M21.25 4.00001C21.25 3.77689 21.1507 3.56536 20.979 3.42287C20.8073 3.28039 20.5811 3.22173 20.3618 3.26285L8.36178 5.51285C8.00705 5.57936 7.75 5.88909 7.75 6.25001V9.98484C7.74982 9.99437 7.74982 10.0039 7.75 10.0135V14.4585C7.20497 14.1636 6.55664 14 5.875 14C5.00075 14 4.18131 14.2691 3.56431 14.7392C2.9467 15.2098 2.5 15.9138 2.5 16.75C2.5 17.5862 2.9467 18.2902 3.56431 18.7608C4.18131 19.2309 5.00075 19.5 5.875 19.5C6.74925 19.5 7.56869 19.2309 8.18569 18.7608C8.79111 18.2995 9.2323 17.6139 9.24948 16.7993C9.24983 16.79 9.25 16.7806 9.25 16.7712V10.62L19.75 8.60938V12.2085C19.205 11.9136 18.5566 11.75 17.875 11.75C17.0008 11.75 16.1813 12.0191 15.5643 12.4892C14.9467 12.9598 14.5 13.6638 14.5 14.5C14.5 15.3362 14.9467 16.0402 15.5643 16.5108C16.1813 16.9809 17.0008 17.25 17.875 17.25C18.7492 17.25 19.5687 16.9809 20.1857 16.5108C20.7911 16.0495 21.2323 15.3639 21.2495 14.5493C21.2498 14.54 21.25 14.5306 21.25 14.5212V4.00001ZM19.75 14.5C19.75 14.2316 19.6091 13.9357 19.2766 13.6824C18.9436 13.4286 18.4505 13.25 17.875 13.25C17.2995 13.25 16.8064 13.4286 16.4734 13.6824C16.1409 13.9357 16 14.2316 16 14.5C16 14.7684 16.1409 15.0643 16.4734 15.3176C16.8064 15.5714 17.2995 15.75 17.875 15.75C18.4505 15.75 18.9436 15.5714 19.2766 15.3176C19.6091 15.0643 19.75 14.7684 19.75 14.5ZM7.27662 15.9324C7.60908 16.1857 7.75 16.4816 7.75 16.75C7.75 17.0184 7.60908 17.3143 7.27662 17.5676C6.94356 17.8214 6.4505 18 5.875 18C5.2995 18 4.80644 17.8214 4.47338 17.5676C4.14092 17.3143 4 17.0184 4 16.75C4 16.4816 4.14092 16.1857 4.47338 15.9324C4.80644 15.6786 5.2995 15.5 5.875 15.5C6.4505 15.5 6.94356 15.6786 7.27662 15.9324ZM19.75 7.08212V4.9037L9.25 6.87245V9.09276L19.75 7.08212Z"
      fill="#343C54"
    />
  </svg>
</template>
<script>
export default {
  name: "Music",
};
</script>

Using Lineicons Icons in Vue

Integrating Lineicons within Vue templates is quite easy and effortless.

Choose the icons and copy-paste: You just have to pick the icons you want and copy-paste the code snippet.
Customize as you need: Adjust the color, size, and rotation of the icon to your project's requirements.
Save the file and Preview: Save the file and preview changes in another web browser.

Example

In this example, we will find a Message icon to add to your Vue project.

Search for the “Message” icon: On the icons page (opens in a new tab) of Lineicons, use the search bar to search for the message icon. Choose the icon you want.
Choose your preferred installation method: Pick the installation method you prefer to integrate the Lineicons icon library into your project.
Customize the icon: You can customize the color, icon size, and rotation if you want.
Copy-paste the code snippet: Now just copy and paste the code snippet into your project.

<template></template>
<script>
export default {
  name: "Message2Question",
};
</script>

Save and preview: Save the icon and preview it in a new web browser.

React Integration Svelte Integration