Other Frameworks Integration

Welcome to another section of Lineicons documentation. In this section, we will share how you can integrate Lineicons with other frameworks like Next.js and Angular.

Lineicons offers better flexibility across various frameworks. The icon library makes icon integration and customization easy in any project environment.

Next.js Integration

Lineicons allows you to integrate Next.js projects with the icon library using the NPM package for easy installation and styling.

Step-1: Install Lineicons with the NPM package.

npm install lineicons

Or

yarn add lineicons

Step-2: Now add the Lineicons CSS in your _app.js file to apply icon styles globally.

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

Step-3: Now browse the icons page, select the icon you need, and copy the JSX code snippet.

Angular Integration

Integration of Lineicons into the Angular framework is also very easy. You can simply import the CSS file to start using the icons.

Step-1: Install Lineicons via the NPM package.

npm install lineicons

Or

yarn add lineicons

Step-2: Now add the CSS path to angular.json file under “styles”.

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

Step-3: Now add the icons in your Angular templates with the right Lineicons class.

How to Customize Lineicons Icons

In both Next.js and Angular, you can customize the icons as you want. You can change the color, size, and placement easily. Thus, you can build a stunning and excellent user interface for your projects.