+
diff --git a/README.md b/README.md
index 6076562c3..569f512fa 100644
--- a/README.md
+++ b/README.md
@@ -8,185 +8,40 @@
+ Icons + · + Guide + · + Packages + · + License + · + Showcase +
# Lucide -Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons. +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](https://lucide.dev/packages) to make it easier to use these icons in your project. -It began after growing dissatisfaction with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted. +## Packages -Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us! - -### Why choose Lucide over Feather Icons - -- More icons to work with: Lucide already has hundreds of icons more than Feather does. -- Official libraries and integrations with popular frameworks and design tools. -- Well maintained code base. -- Active community, regularly growing and improving the set. - -## Table of Contents - -- [Usage](#usage) - - [Web](#web) - - [React](#react) - - [React Native](#react-native) - - [Vue 2](#vue-2) - - [Vue 3](#vue-3) - - [Angular](#angular) - - [Preact](#preact) - - [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-) - - [Figma](#figma) - - [Laravel](#laravel) - - [Svelte](#svelte) - - [Solid](#solid) - - [Hyva](#hyva) - - [Eleventy](#eleventy) -- [Contributing](#contributing) -- [Community](#community) -- [License](#license) -- [Credits](#credits) -- [Sponsors](#sponsors) - -## Usage - -At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation) - -The following are additional ways you can use Lucide. -With the Javascript library you can easily incorporate the icon you want in your webpage. - -### Web - -Implementation of the lucide icon library for web applications. - -```sh -npm install lucide -``` - -or - -```sh -yarn add lucide -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide#lucide). - -### React - -Implementation of the lucide icon library for react applications. - -```sh -yarn add lucide-react -``` - -or - -```sh -npm install lucide-react -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react). - -### React Native - -Implementation of the lucide icon library for React Native applications. - -```sh -yarn add lucide-react-native -``` - -or - -```sh -npm install lucide-react-native -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native). - -### Vue 2 - -Implementation of the lucide icon library for vue applications. - -```sh -yarn add lucide-vue -``` - -or - -```sh -npm install lucide-vue -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue). - -### Vue 3 - -Implementation of the lucide icon library for vue applications. - -```sh -yarn add lucide-vue-next -``` - -or - -```sh -npm install lucide-vue-next -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next). - -### Angular - -```sh -yarn add lucide-angular -``` - -or - -```sh -npm install lucide-angular -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular#lucide-angular). - -### Preact - -Implementation of the lucide icon library for preact applications. - -```sh -yarn add lucide-preact -``` - -or - -```sh -npm install lucide-preact -``` - -For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact#lucide-preact). - -### Static (svg sprite, font, icons ..) - -Assets: -[Font Files](https://github.com/lucide-icons/lucide/releases/latest) -[SVG Files](https://github.com/lucide-icons/lucide/releases/latest) -[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg) - -NPM package - -```sh -yarn add lucide-static -``` - -or - -```sh -npm install lucide-static -``` +| Logo | Package | Version | Downloads | Links | +| ---- | ------- | ------- | --------- | ----- | +|
| **`lucide`** | [](https://www.npmjs.com/package/lucide) |  | [Docs](https://lucide.dev/guide/packages/lucide) · [Source](./packages/lucide) |
+| 
| **`lucide-react`** | [](https://www.npmjs.com/package/lucide-react) |  | [Docs](https://lucide.dev/guide/packages/lucide-react) · [Source](./packages/lucide-react) |
+| 
| **`lucide-vue-next`** | [](https://www.npmjs.com/package/lucide-vue-next) |  | [Docs](https://lucide.dev/guide/packages/lucide-vue-next) · [Source](./packages/lucide-vue-next) |
+| 
| **`lucide-svelte`** | [](https://www.npmjs.com/package/lucide-svelte) |  | [Docs](https://lucide.dev/guide/packages/lucide-svelte) · [Source](./packages/lucide-svelte) |
+| 
| **`lucide-solid`** | [](https://www.npmjs.com/package/lucide-solid) |  | [Docs](https://lucide.dev/guide/packages/lucide-solid) · [Source](./packages/lucide-solid) |
+| 
| **`lucide-preact`** | [](https://www.npmjs.com/package/lucide-preact) |  | [Docs](https://lucide.dev/guide/packages/lucide-preact) · [Source](./packages/lucide-preact) |
+| 
| **`lucide-react-native`** | [](https://www.npmjs.com/package/lucide-react-native) |  | [Docs](https://lucide.dev/guide/packages/lucide-react-native) · [Source](./packages/lucide-react-native) |
+| 
| **`lucide-angular`** | [](https://www.npmjs.com/package/lucide-angular) |  | [Docs](https://lucide.dev/guide/packages/lucide-angular) · [Source](./packages/lucide-angular) |
+| 
| **`@lucide/astro`** | [](https://www.npmjs.com/package/@lucide/astro) |  | [Docs](https://lucide.dev/guide/packages/lucide-astro) · [Source](./packages/astro) |
+| 
| **`lucide-static`** | [](https://www.npmjs.com/package/lucide-static) |  | [Docs](https://lucide.dev/guide/packages/lucide-static) · [Source](./packages/lucide-static) |
### Figma
@@ -196,68 +51,6 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
+
+
+
## Sponsors
@@ -287,6 +82,7 @@ Thank you to all the people who contributed to Lucide!
-### Awesome backer 🍺
+### Awesome backers 🍺
+
diff --git a/categories/charts.json b/categories/charts.json
index 22beb849e..e9bdc1882 100644
--- a/categories/charts.json
+++ b/categories/charts.json
@@ -1,5 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Charts",
- "icon": "pie-chart"
+ "icon": "chart-pie"
}
diff --git a/categories/currency.json b/categories/currency.json
deleted file mode 100644
index 0879774d1..000000000
--- a/categories/currency.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "$schema": "../category.schema.json",
- "title": "Currency",
- "icon": "dollar-sign"
-}
diff --git a/categories/money.json b/categories/finance.json
similarity index 75%
rename from categories/money.json
rename to categories/finance.json
index fd706dee5..267643671 100644
--- a/categories/money.json
+++ b/categories/finance.json
@@ -1,5 +1,5 @@
{
"$schema": "../category.schema.json",
- "title": "Money",
+ "title": "Finance",
"icon": "piggy-bank"
}
diff --git a/categories/furniture.json b/categories/furniture.json
deleted file mode 100644
index 56cf3fa30..000000000
--- a/categories/furniture.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "$schema": "../category.schema.json",
- "title": "Furniture",
- "icon": "rocking-chair"
-}
diff --git a/categories/maps.json b/categories/maps.json
deleted file mode 100644
index 1a948f119..000000000
--- a/categories/maps.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "$schema": "../category.schema.json",
- "title": "Maps",
- "icon": "map"
-}
diff --git a/categories/maths.json b/categories/math.json
similarity index 70%
rename from categories/maths.json
rename to categories/math.json
index f80691908..1ae72ad9e 100644
--- a/categories/maths.json
+++ b/categories/math.json
@@ -1,5 +1,5 @@
{
"$schema": "../category.schema.json",
- "title": "Maths",
+ "title": "Mathematics",
"icon": "divide"
}
diff --git a/categories/notifications.json b/categories/notifications.json
index 8ef569fd0..c2a729bec 100644
--- a/categories/notifications.json
+++ b/categories/notifications.json
@@ -1,5 +1,5 @@
{
"$schema": "../category.schema.json",
- "title": "Notifications",
+ "title": "Notification",
"icon": "triangle-alert"
}
diff --git a/comment-markup.md b/comment-markup.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/.vitepress/api/gh-icon/[...data].get.ts b/docs/.vitepress/api/gh-icon/[...data].get.ts
index 346901712..def248303 100644
--- a/docs/.vitepress/api/gh-icon/[...data].get.ts
+++ b/docs/.vitepress/api/gh-icon/[...data].get.ts
@@ -28,7 +28,7 @@ export default eventHandler((event) => {
.map((_, idx, arr) => arr.slice(0, idx + 1).join('-'))
.reverse()
.find((groupName) => groupName in iconNodes);
- if (backdropName) {
+ if (!(name in iconNodes) && backdropName) {
const iconNode = iconNodes[backdropName];
const LucideIcon = createLucideIcon(backdropName, iconNode);
@@ -39,18 +39,9 @@ export default eventHandler((event) => {
createElement(Backdrop, {
backdropString,
src,
- color: name in iconNodes ? 'red' : '#777',
+ color: '#777',
}),
);
- if (name in iconNodes) {
- children.push(
- createElement(Backdrop, {
- backdropString: src,
- src: backdropString,
- color: 'lime',
- }),
- );
- }
}
const svg = Buffer.from(
diff --git a/docs/.vitepress/api/gh-icon/diff/[...data].get.ts b/docs/.vitepress/api/gh-icon/diff/[...data].get.ts
new file mode 100644
index 000000000..b1b0f09c6
--- /dev/null
+++ b/docs/.vitepress/api/gh-icon/diff/[...data].get.ts
@@ -0,0 +1,37 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { createElement } from 'react';
+import Diff from '../../../lib/SvgPreview/Diff.tsx';
+import iconNodes from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-react/src/createLucideIcon';
+
+export default eventHandler((event) => {
+ const { params } = event.context;
+
+ const pathData = params.data.split('/');
+ const data = pathData.at(-1).slice(0, -4);
+ const [name] = pathData;
+
+ const newSrc = Buffer.from(data, 'base64')
+ .toString('utf8')
+ .replaceAll('\n', '')
+ .replace(/