* docs(lucide-react): small changes for DynamicIcon
Changed the sentence structure slightly for DynamicIcon to be easier to understand.
* Update lucide-react.md
* Add gpt tags
* Add github actions flow
* Add link so people can use the chat
* Fix workflow
* Add openai dep
* Add actions core
* Try gh pr review in actions
* Try with octokit
* Remove changed files part
* Try with createReview function
* Try this
* fix broken json file
* Turn on review by gh action
* Try this
* Update icons/trash.json
* Update the runner
* Remove added tags
* Add more checks
* Added icons/tool-case.svg
* Added icons/tool-case.json
* Update tool-case.svg
slightly alter the icon SVG code to match with the "archive" icon
* Update tool-case.svg
* Optimized version of tool-case.svg
* Update icons/tool-case.json
Co-authored-by: Jakob Guddas <github@jguddas.de>
* Update tool-case.svg
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Jakob Guddas <github@jguddas.de>
* Update base `clock`-icons
Replace `<polyline/>`s with `<path/>`s, and adjust the angles of the 2-, 4-, 8- and 10 o'clock hour hands to better match the 1-, 5-, 7- and 11 o'clock hands
* Update clocks with symbols
Update `clock-arrow-down`, `clock-arrow-up` and `clock-alert` to match the hand angle of `clock`
Also align the exclamation mark of `clock-alert` to the pixel grid
* Update small clock faces
Make the clock faces in `calendar-clock`, `file-clock`, `folder-clock` and `watch` consistent with each other, and resolve some two-pixel-gap violations.
* Align the tips of all hours hands on large clocks to the grid
* Add self-attribution where appropriate
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Added icons/wavy-line.svg
* Added icons/wavy-line.json
* Updated icons/wavy-line.json
* Updated icons/wavy-line.json
* Rename wavy-line.json to line-curvy.json
* Rename wavy-line.svg to line-curvy.svg
* Rename line-curvy.json to line-swirly.json
* Rename line-curvy.svg to line-swirly.svg
* Rename line-swirly.json to line-squiggle.json
* Rename line-swirly.svg to line-squiggle.svg
* Align the icon in the center
* Update icon visually
* Circle the loop of the icon
* Add contributor
* Add `"annotate"` as tag
After seeing Google Chromebook the same icon, it says 'annotate'. I add it here as a tag.
* Update line-squiggle.json
* Update line-squiggle.json
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Reordered SVG paths so the shaft renders after the arrowhead, eliminating visual gaps due to stroke rendering.
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
- Reduce initial icon render from 1600 to 120-200 icons
- Implement dynamic initialGridItems calculation based on viewport
- Use slice() instead of splice() to avoid array mutation
- Fix NoResults condition to use searchResults.length
- Load time improved from (50-60%+ improvement)
- Fix Switch component to properly handle v-model binding
- Add absoluteStrokeWidth to customizingActive computed property
- Ensure absoluteStrokeWidth resets correctly in both Home and Sidebar customizers
Resolves issue where absoluteStrokeWidth toggle remained enabled
after clicking Reset button, causing confusion with bold icons.
Fixes#2984
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Optimised `phone-` icons
* fix(site): remove studio link from navbar (#3166)
* Redraw handset to better align arcs still, and replace some with straight lines
* Align ring lines
---------
Co-authored-by: Jakob Guddas <github@jguddas.de>
* Changed resetStyle to reflect changes of button on absolutestrokewidth
* removed nextTick
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* add columns-cog icon and metadata
* chore: rename columns-cog to columns-3-cog as per maintainer request
* added contributors from the icon this is based on
* Remove not existing category
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* add electric truck icon
* update json file
* small change to svg
* update icon with zap in the middle
* move icon one pixel down to align with original truck icon
* use new truck as reference
* Update truck-electric.svg
* Update truck-electric.json
* Update truck-electric.svg
* Add contributor AnnaSasDev to truck-electric.json
---------
Co-authored-by: Jakob Guddas <github@jguddas.de>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Added icons: pathfinder (unite, minus, exclude, intersect)
* fix(icons): Altered pathfinder icon names to be more descriptive
* fix: Updated subtraction.svg to replace curves with of arcs
Co-authored-by: Jakob Guddas <github@jguddas.de>
* fix(icons): Updated names to be squares-* instead of shape-*
recomended by jguddas
* fix(shapes-unite): Arcified corners & added union tag
* fix(shapes-intersect): Replacing curves with arcs
Done by jguddas
* update(squares-exclude): added extra tags invert & xor
* fix(squares-intersect): Adjusted the look to make it more clear what it's use case is
* fix(icons): Accidentally swapped out the wrong icon for previous commit
* fix(squares-intersect): fixed filename
* fix(squares-exclude): Altered icon to look better under low resolution
Co-Authored-By: Jamie Law <956081+jamiemlaw@users.noreply.github.com>
* fix(squares-subtract): Updated name to fit naming convention better
Co-Authored-By: Jamie Law <956081+jamiemlaw@users.noreply.github.com>
* fix(sqaures-intersect): Removed certain curves for consistency
* fix(squares-exclude): Fixed arcs & arcified corners
Co-authored-by: Jakob Guddas <github@jguddas.de>
* fix(squares-exclude): icon was committed with wrong filename
* update(squares-exclude): updated design to be more readable
Co-Authored-By: Jakob Guddas <25524993+jguddas@users.noreply.github.com>
* fix(tags.json): Reverted accidental prettier alterations
* fix(squares-*.svg): enlarged squares to be more consistant
* fix(squares-*): added karsa-mistmere as a contributor
* fix(squares-subtract): fixed accidental copy made called squares-minus
* fix(squares-subtract): fixed rounding amount on some arcs
---------
Co-authored-by: Jakob Guddas <github@jguddas.de>
Co-authored-by: Jamie Law <956081+jamiemlaw@users.noreply.github.com>
Co-authored-by: Jakob Guddas <25524993+jguddas@users.noreply.github.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Add spline-pointer icon
* Add proper attribution to contributors
* Fix spline-pointer
* Reduce amount of tags and add tools category
* Run SVG to lucide studio
* add saudi riyal sign
* update name from sign to symbol
* fix stroke and fill issue
Co-authored-by: Jakob Guddas <github@jguddas.de>
* removed symbol from the name
---------
Co-authored-by: Jakob Guddas <github@jguddas.de>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `main` branch.
- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfixes or new feature should go to the `main` branch.
- __Include only related work__. If your pull request has unrelated commits, it won't be accepted.
### Pull Requests Including Icons
### Icon Pull Requests
#### Guidelines
@@ -27,26 +27,30 @@ Please make sure you follow the icon guidelines, that should be followed to keep
Read it here: [ICON_GUIDELINES](https://lucide.dev/docs/icon-design-guide).
### Editor guides
#### Lucide Studio
For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) made a great tool called [Lucide Studio](https://studio.lucide.dev/). It is a web-based SVG editor that allows you to edit and adjust icons in the Lucide style. You can use it to create new icons or modify existing ones.
#### Editor guides
Here you can find instructions on how to implement the guidelines with different vector graphics editors:
If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.
So don't submit multiple icons in one PR that have noting to do with each other.
If you want to submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keeps the thread clean and scoped.
So don't submit multiple icons in one PR that have nothing to do with each other.
So for example don't create one PR with icons: `arrow-up`, `bicycle`, `arrow-down`.
Seperate them by two PRs; 'pr-01' `arrow`, `arrow-down` and 'pr-02' `bicycle`.
Separate them into two PRs; 'pr-01' `arrow`, `arrow-down` and 'pr-02' `bicycle`.
## Icon Requests
@@ -127,7 +131,7 @@ When adding new features to for example the icon component for a framework. It i
### Local Testing
To test changes in a local project, you can use `yarn link`, `npm link`, `bun link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.
To test changes in a local project, you can use `yarn link`, `npm link`, `bun link` or `pnpm link` to link the package. Before you do this make sure you've built the package first.
```sh
# in packages/lucide-react
@@ -157,6 +161,30 @@ lucide
The lucide.dev website is using [vitepress](https://vitepress.dev/) to generate the static website. The markdown files are located in the docs directory.
#### Running the Docs Website Locally
To test the docs website locally, follow these steps:
1.**Navigate to the docs directory**
```sh
cd docs
```
2.**Start the Local Development Server**
```sh
pnpm run docs:dev
```
3.**Open the Website Locally**
Vitepress should open with the following format:
VitePress dev server is running at:
- **Local**: `http://localhost:3000/`
- **Network**: `http://192.168.x.x:3000/`
### Guides
Detailed documentation about: installation, guides, packages, design guides etc.
@@ -169,11 +197,9 @@ All the icons of lucide in SVG format. These will be used as source for all the
Includes all the (npm) packages of lucide.
> Note: One package is not managed by pnpm: **lucide-flutter**, this package is written in Dart and uses pub for publishing.
### Scripts
Includes usefully scripts to automate certain jobs. Big part of the scripts is the template generation, for example it generates icon components for all the packages. These scripts are usually executed from the "scripts" section in the package.json.
Includes useful scripts to automate certain jobs. Big part of the scripts is the template generation, for example it generates icon components for all the packages. These scripts are usually executed from the "scripts" section in the package.json.
@@ -29,7 +29,8 @@ However, not everyone can understand them easily. Read more about [how to use Lu
## 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)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
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)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
## Community
If you have any questions about Lucide, feel free to reach out to the community. You can find them on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
For more details, see the [documentation](packages/lucide-preact.md).
## Astro
Implementation of the lucide icon library for Astro applications.
::: code-group
```sh [pnpm]
pnpm install @lucide/astro
```
```sh [yarn]
yarn add @lucide/astro
```
```sh [npm]
npm install @lucide/astro
```
```sh [bun]
bun add @lucide/astro
```
:::
For more details, see the [documentation](packages/lucide-astro.md).
## Static usage
Implementation of the lucide icon library for multiple usages that like to use: SVG files icons, SVG Sprite, Icon Fonts and static SVG strings export in Common JS modules (for NodeJS).
Implementation of the lucide icon library for Astro applications.
## Installation
::: code-group
```sh [pnpm]
pnpm add @lucide/astro
```
```sh [yarn]
yarn add @lucide/astro
```
```sh [npm]
npm install @lucide/astro
```
```sh [bun]
bun add @lucide/astro
```
:::
## How to use
Lucide is built with ES Modules, so it's completely tree-shakable.
Each icon can be imported as an Astro component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
### Example
Default usage:
```astro
---
import { Skull } from '@lucide/astro';
---
<Skull />
```
Additional props can be passed to adjust the icon:
```astro
---
import { Camera } from '@lucide/astro';
---
<Camera color="#ff3e98" />
```
For faster builds and load times, you can import icons directly from the `@lucide/astro/icons` directory:
```astro
---
import CircleAlert from '@lucide/astro/icons/circle-alert';
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
```astro
---
import { Phone } from '@lucide/astro';
---
<Phone fill="#333" />
```
This results a filled phone icon.
## Types
The package includes type definitions for all icons. This is useful if you want to dynamically render icons.
### Example
```astro
---
import { House, Library, Cog, type Icon as IconType } from '@lucide/astro';
type MenuItem = {
name: string;
href: string;
icon: typeof IconType;
};
const menuItems: MenuItem[] = [
{
name: 'Home',
href: '/',
icon: House,
},
{
name: 'Blog',
href: '/blog',
icon: Library,
},
{
name: 'Projects',
href: '/projects',
icon: Cog,
},
];
---
{
menuItems.map((item) => (
<a href={item.href}>
<item.icon />
<span>{item.name}</span>
</a>
))
}
```
## With Lucide lab or custom icons
[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
They can be used by using the `Icon` component.
All props of the regular Lucide icons can be passed to adjust the icon appearance.
### Using the `Icon` component
This creates a single icon based on the iconNode passed and renders a Lucide icon component.
```astro
---
import { Icon } from '@lucide/astro';
import { burger, sausage } from '@lucide/lab';
---
<Icon iconNode={burger} />
<Icon iconNode={sausage} color="red"/>
```
## One generic icon component
It is possible to create one generic icon component to load icons, but it is not recommended.
::: danger
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application. This may be passable if you're doing SSG and SSR in server environments. However if you're doing SSR in serverless environments, it could negatively affect your app's performance, as a bigger bundle size will translate to an increase in cold starts.
:::
### Icon Component Example
```astro
---
import { icons, type IconProps } from '@lucide/astro';
@@ -78,17 +78,16 @@ This creates a single icon based on the iconNode passed and renders a Lucide ico
```jsx
import { Icon } from 'lucide-react';
import { burger } from '@lucide/lab';
import { coconut } from '@lucide/lab';
const App = () => (
<Icon iconNode={burger} />
<Icon iconNode={coconut} />
);
```
## Dynamic Icon Component
It is possible to create one generic icon component to load icons, but it is not recommended.
Since it is importing all icons during build. This increases build time and the different modules it will create.
It is possible to create one generic icon component to load icons. But it is not recommended, since it is importing all icons during the build. This increases build time and the different modules it will create.
`DynamicIcon` is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.
This package include the following lucide implementations:
This package includes the following implementations of Lucide icons:
-All SVG files
-Individual SVG files
- SVG sprite
- Icon fonts
- JavaScript library containing strings of SVGs.
- Icon font files
- A JavaScript library exporting SVG strings
## Why lucide-static?
## Who is this for?
This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.
`lucide-static` is suitable for _very specific use cases_ where you want to use Lucide icons without relying on a JavaScript framework or component system. It's ideal for:
::: warning
While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and tree-shaking to make sure only the icons you use are bundled with your app. Tree-shaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
- Projects that use icon fonts with plain CSS or utility-first frameworks
- Embedding raw SVG files or sprites directly in HTML
- Using SVGs as CSS background images
- Importing SVG strings into Node.js (CommonJS) environments
::: danger
### Not recommended for production {#production-warning}
SVG sprites and icon fonts include **all icons**, which can significantly increase your app's bundle size and load time.
For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using:
Once included, use the format `icon-{kebab-case-name}`. You can copy icon names from the [Lucide Icons page](https://lucide.dev/icons).
```html
<div class="icon-house"></div>
```
### Node.js
If you're not using a package manager, you can download the font files directly from the [latest release](https://github.com/lucide-icons/lucide/releases/latest).
To use lucide icons in your Nodejs project you can import each icon as:
## Node.js
You can also import Lucide icons in Node.js (CommonJS) projects:
Some files were not shown because too many files have changed in this diff
Show More
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
