a0e202d759
* Add new lucide angular package * feat(packages/angular): added initial @lucide/angular package * feat(packages/angular): update readme * feat(packages/angular): update angular.json * docs(packages/angular): added (for now) full documentation for @lucide/angular * docs(packages/angular): added migration guide from lucide-angular * fix(github): fix package label syntax 😅 * fix(lint): fix linting issues * fix(github/angular): add prebuild stage * fix(github/angular): add prebuild stage & fix tests * fix(github/angular): fix LucideIconComponentType, update with _real_ public members * fix(github/angular): add prebuild to build step manually * fix(github/angular): downgrade vitest * fix(packages/angular): fix migration guide code example * fix(packages): add vitest + @vitest/* to pnpm overrides * fix(packages): update pnpm-lock with merged version * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * fix(packages): fix aria-hidden logic * fix(packages): update pnpm-lock * fix(packages): extract vitest and jsdom to root devDependencies * Fix copy utils script * Format code * feat(packages/angular): switched to self-describing IconData object from separate node+name – no more toKebabCase hackery feat(packages/angular): renamed LucideIconComponentType => LucideIcon, and LucideIcon => LucideDynamicIcon feat(packages/angular): added backwards compatible CSS class support feat(packages/angular): switched to vector-effect: non-scaling-stroke implementation from computed stroke width feat(packages/angular): rewrote icon provider to only accept a list of self-described icons – no more toKebabCase hackery & as an added bonus automatic backwards compatible alias support 🚀 feat(packages/angular): added legacy icon node helper function for passing legacy icons to providers test(packages/angular): added unit tests on LUCIDE_CONFIG provider usage * fix(packages/angular): fix linting issues * feat(packages/angular): extract createLucideIcon logic into helper function, refactor export template to use the iconData object as defined in ExportTemplate * Replace author * Remove private field * fix(packages/angular): remove createLucideIcon, it breaks the package :'( * fix(packages/angular): fix rendering order of child elements (_before_ projected content) * Format package.json * Update docs/guide/packages/angular.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update packages/angular/MIGRATION.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
3.0 KiB
title, nextPage
| title | nextPage | ||
|---|---|---|---|
| What is Lucide? |
|
What is Lucide?
Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official packages.
Available Icons
Lucide contains icons with different variants and states, allowing users to choose the most suitable icon for their needs. And if a desired icon isn't available yet, users can open a design request, and the Lucide community contributors will help provide new icons. With more icons to choose from, users have more options to work with in their projects.
Complete Set of Icons
As new applications with specific features arise, Lucide aims to provide a complete set of icons for every project. The community follows a set of design rules when designing new icons. These rules maintain standards for the icons, such as recognizability, consistency in style, and readability at all sizes. While creativity is valued in new icons, recognizable design conventions are important to ensure that the icons are easily identifiable by users.
Code Optimization
In addition to design, code is also important. Assets like icons can significantly increase bandwidth usage in web projects. With the growing internet, Lucide has a responsibility to keep their assets as small as possible. To achieve this, Lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you only ship the icons you used, which helps to keep software distribution size to a minimum.
Accessibility
Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.
However, not everyone can understand them easily. Read more about how to use Lucide in an accessible way.
Official Packages
Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including Web (Vanilla), React, React Native, Vue, Vue 3, Svelte, Preact, Solid, Angular, Astro, and NodeJS.
Community
If you have any questions about Lucide, feel free to reach out to the community. You can find them on GitHub and Discord.