Skip to content

Icons

Jump to bottom
Madita Antonia Plogsties edited this page Oct 8, 2024 · 2 revisions

This project uses Lucide Icons in the Frontend. These icons can be imported as dependency and are bundled into the build output on project build.

How to integrate new icons?

  1. Navigate to https://lucide.dev/icons/
  2. Search for the icon you want to use in your React component.
  3. Click on the icon and press on the Copy JSX button on the bottom of the page.

image

  1. To use an icon, simply import it to the file (import { IconName } from "lucide-react";) and insert the JSX Code into your component and customize its layout with Tailwinds Classnames:
<MyComponent>
  <LucideIcon className="myClassNames ..." />
</MyComponent>

The import is usually done automatically by the IDE or TextEditor. Lucide also offers a tool to style an icon first and then copy and paste the code.

For further information, take a look at the guide.

How we integrated Lucide Icons in the code base

Lucide can be integrated via the Node / Yarn package manager.

Just by executing the command yarn add lucide-icons the package is downloaded and integrated into the project and the package.json file.

Clone this wiki locally