Not sure what happened, but `sidebar.json` should have been deleted when replaced with
`panel-left.json` in #1003… This is currently breaking the `pre-commit` hook!
* Refactors sort icons to cover all use cases
* increases arrow head size
* Apply suggestions from code review
---------
Co-authored-by: Karsa <karsa@karsa.org>
* Add more music icons and another mic icon (#746)
* Revert "Add more music icons and another mic icon (#746)" (#750)
This reverts commit 57cba6ae0e.
* add scale Stroke width
* Added scaleStrokeWidth prop to all packages
* Add scaleStrokeWidth to types
* Rename scaleStrokeWidth to absoluteStrokeWidth
* Adds common API elements to the Angular package (#949)
* Almost complete rewrite of the Angular package
* Update tsconfig.spec.json
* fixes icon build export file name
* Updates Angular documentation with the new properties + provider injection
* Update lucide-angular.md
* refactored scaleStrokeWidth to be absoluteStrokeWidth to match other packages
* removed codelyzer from devDeps + added flexible angular core dependencies
* Deprecates createElement helper in favour of Renderer2 to support SSR
---------
Co-authored-by: Karsa <karsa@karsa.org>
* Add absoluteStrokeWidth in docs
* update snapshots
* Manual merge of main
* Fixed incorrectly merged pnpm-lock.yaml
* Fixes lucide-angular build
* [lucide-angular] Global configuration for properties + bugfix for legacy icon provider (#1012)
* Almost complete rewrite of the Angular package
* Update tsconfig.spec.json
* fixes icon build export file name
* Updates Angular documentation with the new properties + provider injection
* Update lucide-angular.md
* refactored scaleStrokeWidth to be absoluteStrokeWidth to match other packages
* removed codelyzer from devDeps + added flexible angular core dependencies
* Deprecates createElement helper in favour of Renderer2 to support SSR
* Added global configuration and fixed undefined bug in legacy icon provider. Also updated README.md
* Replaces removed line in README.md
* Fixes merge error
* Updates export template to use the non-deprecated type
* downgrade building to ng-cli@13
* downgrade to es2020
---------
Co-authored-by: Karsa <karsa@karsa.org>
* rename scaleStrokeWidth to absoluteStrokeWidth in readme
---------
Co-authored-by: it-is-not <72697755+it-is-not@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Eric Fennis <eric@dreamteam.nl>
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@nac41112.nedap.local>
* Add more music icons and another mic icon (#746)
* Revert "Add more music icons and another mic icon (#746)" (#750)
This reverts commit 57cba6ae0e.
* adds brain icons
* adds extra AI tags
* Update icons/brain-circuit.svg
Co-authored-by: Jakob Guddas <github@jguddas.de>
* Update brain.svg
* Update brain-circuit.svg
---------
Co-authored-by: it-is-not <72697755+it-is-not@users.noreply.github.com>
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Jakob Guddas <github@jguddas.de>
* Add more music icons and another mic icon (#746)
* Revert "Add more music icons and another mic icon (#746)" (#750)
This reverts commit 57cba6ae0e.
* adds tablets & pill icons
* adds some extra tags
---------
Co-authored-by: it-is-not <72697755+it-is-not@users.noreply.github.com>
Co-authored-by: Karsa <karsa@karsa.org>
* Add more music icons and another mic icon (#746)
* Revert "Add more music icons and another mic icon (#746)" (#750)
This reverts commit 57cba6ae0e.
* adds tower-control icon
* Update icons/tower-control.json
---------
Co-authored-by: it-is-not <72697755+it-is-not@users.noreply.github.com>
Co-authored-by: Karsa <karsa@karsa.org>
* testing
* Fixes pre-commit hook
* Removing checkIcons from pre commit hook because it might result in false positives and negatives on an unclean local repository
* Added checkIcons Github action
---------
Co-authored-by: Karsa <karsa@karsa.org>
* Deprecates tags.json and icons.json
* Removed tags.json dependency from Figma plugin
* Add JSON descriptor information to readme
* Restore packages/index.tsx
* Update packages/lucide-figma/src/api/fetchIcons.ts
Add multiple fetches to `Promise.all`
* Added caching to API endpoints
* Updates pnpm-lock.yaml
* Add tags to static
* Trigger site build
* Added prebuild script to generate api caches at build time
* Migrated NextCache function from arrow to regular to simplify markup
* test if contents are read from cache
* Add cache clear to prebuild
* removes debug object
---------
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Add grip and make all grip tags consistent
* Update icons/grip.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Update icons/grip.json
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
---------
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Add more music icons and another mic icon (#746)
* Revert "Add more music icons and another mic icon (#746)" (#750)
This reverts commit 57cba6ae0e.
* add subtitles icon
Co-authored-by: Karsa <contact@karsa.org>
* Add dockerfile
* Make the dockerfile work
* try docker container for font building
* remove workflow dep
* add docker compose file
* test docker image
* update build font flow
* update to v3
* cleanup
* add filter options for installs
* test
* revert filter on install
* optimize font building
* Rename workflow
* test and compare workflows
* test workflow
* test
* try with filter
* test old script github actions
* Fix old script
* this works?
* test script
* finialize font script
* remove workspace packages
* add pnpm-lock.yaml in workflows
* Update `svgo` and `svgson` version and fix some tests
* Update eslint-related packages and fix all linter errors
* Update all rollup-related packages version
* Update all rollup-related packages (part 2)
* Update the rest of package which need to be updated
* Fix unwanted comment
* Fix unwanted comment (again)
Authored by: @locness3
- Updated the obsolete number of added icons (congratulations to everyone btw, this is impressive).
- Added mention official packages.
- Expanded on "Active community".
* DEL: laravel from homepage packages
* ADD: more options link
This makes it more clear there are more options than just the ones shown on the homepage
GitHub adds Copy to clipboard button to all code snippets. By splitting npm and yarn specific snippets into two separate snippets we make it possible to copy the command dev is interested in in one click instead of manually selecting it and copying with Ctrl+C.
Reduces __NEXT_DATA__ size on main page by 127610 bytes by calculating `content` from `src` property and removing `commit` data altogether.
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* docs: fix and extend the vue3 icon component example
* docs: refactor the usage example to utilize script setup
* fix: correct dashcase in property names
* Update tags.json
Add "logo" tag to the trello logo
* Update tags.json
Add "maths" tag
* Update tags.json
Add tag "logo" to chrome
* Update tags.json
Add the tag "shape" to "octogon", "triangle", "square" and "circle"
* Update tags.json
Add tag "shape" to diamond
* Update tags.json
Add tag "maths" to function
* Update tags.json
* Update tags.json
Add "maths" to "circle slashed"
* Update tags.json
Remove the comma after the tag logo from trello
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added sailboat
* Updates icon based on @ericfennis' suggestion. Adds harbour and port tags.
* Update icons/sailboat.svg
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Update icons/sailboat.svg
Merge extra paths into a single triangle.
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Adds various food icons.
* Added egg-fried
* Fixes dots on icons
* Removed lemon, orange, popsicle & watermelon
Co-authored-by: Karsa <karsa@karsa.org>
* Optimizes icons & fixes typos in tags.json
* Reverted some changes, fixed tag format (space as word separator)
Co-authored-by: Karsa <karsa@karsa.org>
* Add `lucide-react-native` package
Closes#394
* minor fixes build config
* Add `lucide-react-native` package
Closes#394
* make it work
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Adds heart-crack & heart-handshake
* Added extra little bit to crack to make it more crackey
* Adds agreement tag to heart-handshake
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added fingerprint
* Updated fingerprint icon according to feedback
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added dices
* Adds tags to dice icons.
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Fixes pin & adds pin-off
* Reverted to vertical icon style
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Improves thumbs
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Fixes combined path rendering bugs
Co-authored-by: Karsa <karsa@karsa.org>
The "class" produces the following error when importing the icon in react using lucide-react and Typescript:
Warning: Invalid DOM property `class`. Did you mean `className`?
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added magnet
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added star-off
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added component
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added chef-hat
* Added croissant
* Slight visual improvements to croissant shape
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added sword & swords
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Adds further tags to
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added venetian-mask
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Fixes inspect
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Complete redesign of inspect
* Added cursor & pointer tag to inspect
Co-authored-by: Karsa <karsa@karsa.org>
* Fixes battery-charging
* Fixes spark shape to be more consistent with icon set
* Improves 100% of lightning shape + fixes battery icons
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Add backspace to delete as a tag
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Fixes shopping-cart
* Update shopping-cart.svg
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Adds slightly more visual weight to shopping-cart
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added various location-off icons
* Renamed navigation-off-2 => navigation-2-off
Co-authored-by: Karsa <karsa@karsa.org>
* Added factory icon
* slightly adjusted visual style to match lucide
* Make factory more in line with other building icons
* Slight adjustment to roof height
* Even more drastic increase in size.
* One more tiny change to roof shape
* Added @ericfennis' suggestion
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added focus
* Update icon to match scan-line
Co-authored-by: Karsa <karsa@karsa.org>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added puzzle
Co-authored-by: Karsa <karsa@karsa.org>
* Add movie icon
* Add movie-play and movie-pause and fix formatting
* change movie and remove movie-play and movie-pause
* fix minor issues I introduced later on
* move movie icon to nearest pixel
* Fix rectangle and change rotation
* Change icon name, remove useless tags
* svg formatting
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633
* added newline to end of file
* Updated icon to comply with design guidelines and more closely match accessibleicon.org
* Added sliders-horizontal
* Added tags to sliders-horizontal
Co-authored-by: Karsa <karsa@karsa.org>
* Fixes image, image-minus, image-plus & image-off
* make image-off work in exchange of minuscule design guideline violations
* Fixed most of the minor guideline violations.
* Add 2px rounding to mountain shape
* Fixes image-off
Co-authored-by: Karsa <karsa@karsa.org>
* fixes slashes on *-off icons
* fixes video icons
* Rolled back eye-off, since it is now part of a new PR
* Rolled back mic-off, see: #577
* Override mic-off from master
* Override mic-off from master again
Co-authored-by: Karsa <karsa@karsa.org>
* Fixes award according to guidelines
* minor adjustment to ribbon shape
* minor adjustment to ribbon shape
* further minor adjustment to ribbon shape
* Update award.svg
Co-authored-by: Karsa <karsa@karsa.org>
* Fixes twitter
* Reworked to be more like actual twitter logo
* Pixel perfection optimization
* Further pixel perfection optimization
* Slight adjustment to head shape.
Co-authored-by: Karsa <karsa@karsa.org>
@@ -10,13 +10,13 @@ The following is a set of guidelines for contributing to Lucide. Feel free to pr
Feel free to open a pull-request to contribute to this project.
**Working on your first Pull Request?** You can learn how from this *free* series
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
[How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
Guidelines for pull requests:
- __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 `master` branch.
- __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.
### Pull Requests Including Icons
@@ -25,27 +25,21 @@ Guidelines for pull requests:
Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md).
Read it here: [ICON_GUIDELINES](/docs/icon-design-guide.md).
### Templates
### Editor guides
Here you can find templates and instructions on how to implement the guidelines with different programs.
Here you can find instructions on how to implement the guidelines with different vector graphics editors:
`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`.
`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`.
You can also [download an Adobe Illustrator template](/docs/templates/illustrator-template.ai).
#### Inkscape
#### [Inkscape Guide](/docs/inkscape-guide.md)
`Template`: None
`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
#### [Figma Guide](/docs/figma-guide.md)
#### Figma
`Template`: None
`Instructions`: You can find the [Figma Guide](/docs/FIGMA_GUIDE.md) and how to set up Figma under `/docs/FIGMA_GUIDE.md`.
#### Submitting Mulitple Icons
### Submitting Multiple Icons
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.
@@ -58,6 +52,141 @@ Before creating an icon request, please search to see if someone has requested t
If the icon has not already been requested, [create an issue](https://github.com/lucide-icons/lucide/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
## Icon Requests from Feather
### Icon Requests from Feather
If you are a designer who wants to contribute to Lucide but you don't know what icons to work on, then have a look at the Requests from Feather. All open, unfinished and valid requests can be found in [Feather Icon Requests](https://github.com/lucide-icons/lucide/issues/119).
## Development
You will need minimum version of [Nodejs 16.4+](https://nodejs.org)
For package management you will need [PNPM](https://pnpm.io/installation).
For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).
After cloning the project you need to run:
```sh
pnpm install # Install dependencies, including the workspace packages
```
### Packages -> PNPM Workspaces
To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces).
The configured directory for workspaces is the [packages](./packages) directory, located in the root directory. There you will find all the current packages from lucide.
There are more workspaces defined, see [`pnpm-workspace.yaml`](./pnpm-workspace.yaml).
> Note: One package is not managed by pnpm: **lucide-flutter**, this package is written in Dart and used pub for publishing.
### Generated Code
For icons we use one single source of truth the icons svgs located in the icons directory. To distribute icons to the packages we generate code including: icon files with svg paths, index files with imports, and types files. Depending on the use case other necessary code will be generated.
The commands for generating this code you will read in the next chapter.
### Commonly used scripts
#### Building
The build script includes multiple subcommands to: clean the dist directory, generate icon files, generate types files, and build/transpile code for each build format.
```sh
pnpm [package-name] build
#example:
pnpm lucide-react build
```
#### Testing
Run unit tests with jest for each package to make sure all the package apis still works as expected.
```sh
pnpm [package-name]test
#example:
pnpm lucide-vue test
```
Recommended to run the test watcher when making changes.
```sh
pnpm [package-name] test:watch
#example:
pnpm lucide-preact test:watch
```
### Unit Testing
When adding new features to for example the icon component for a framework. It is required to have this covered with some unit tests.
### Local Testing
To test changes in a local project, you can use `yarn link`, `npm link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.
```sh
# in packages/lucide-react
npm run build &&
npm link
# in your local project
npm link lucide-react
```
## Project Structure
Root directories
```sh
lucide
|
├── docs
├── icons
├── packages
├── scripts
└── site
```
### Docs
Detailed documentation about: installation, guides, packages, design guides etc.
### Icons
All the icons of lucide in SVG format. These will be used as source for all the packages and other distributions for the lucide icons.
### packages
Includes all the (npm) packages of lucide.
> Note: One package is not managed by pnpm: **lucide-flutter**, this package is written in Dart and used 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.
### site
The lucide.dev website using [Nextjs](https://nextjs.org).
## Documentation
The documentation files are located in the [docs](./docs) directory. All these markdown files will be loaded in the build of the lucide.dev website.
Feel free to write, adjust or add new markdown files to improve our documentation.
## Support
If you need any help or have problems with you contribution. Please don't hesitate to contact the Lucide Community, you can find us on [Github](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
## Credits
Thank you to all the people who already contributed to Lucide!
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
It began after growing disaffection 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.
@@ -17,29 +17,34 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
### Why choose Lucide over Feather Icons
- Lucide already expanded the icon set by 130+ in less than a year, so more icons to work with.
- More icons to work with: Lucide already has hundreds of icons more than Feather does.
- Official librairies and integrations with popular frameworks and design tools.
- Well maintained code base.
- Active community.
- Active community, regularly growing and improving the set.
For more details, see the [documentation](https://github.com/Siteation/magento2-hyva-icons-lucide/blob/main/README.md).
### Eleventy
Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.
For more details, see the [documentation](https://github.com/GrimLink/eleventy-plugin-lucide-icons/blob/main/README.md).
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/master/README.md)
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/main/README.md)
## Community
@@ -187,7 +274,14 @@ Join the community on our [Discord](https://discord.gg/EH6nSts) server!
## License
Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE).
## Credits
Thank you to all the people who contributed to Lucide!
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
It began after growing disaffection of 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 adn not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
It began after growing disaffection of 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 and not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
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.
@@ -16,7 +16,7 @@ To do this, create a frame of 24x24 pixels.
In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as `FRAME-NAME.svg`.
## Create your icon
## Create Your icon
To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma.
Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut `P`. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right.
Once you have completed your icon, you can export it.
1. Select the frame
2. Open the *Export* tab on the right
3. Set the file type as SVG
4. Press export
Or you can also copy its source as SVG.
1. Select the frame
2. Right click it
3. Click on *Copy/Paste as*
4. Click on *Copy as SVG*
That's it. You just made your first icon. Congratulations!
## Figma Tips
1. The [Icon Design Guidelines](ICON_DESIGN_GUIDE.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).
1. The [Icon Design Guidelines](icon-design-guide.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).
@@ -55,6 +55,8 @@ Here are rules that should be followed to keep quality and consistency when maki
Before an icon is added to the library, we like to have readable and optimized svg code.
Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.
### Global Attributes
For each icon these attributes are applied, corresponding to the above rules.
@@ -80,3 +82,21 @@ For each icon these attributes are applied, corresponding to the above rules.
Code of paths can get really big.
To reduce file size we like to minify the code.
We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths.
### JSON metadata descriptor
Each icon added must also come with a matching JSON file listing tags and categories for the icon.
@@ -10,15 +10,15 @@ This Guide explains how to properly use the Adobe Illustrator Template for Lucid
## General Workflow
The Illustrator template is created following guidelines from the [Icon Design Guide](ICON_DESIGN_GUIDE.md).
The Illustrator template is created following guidelines from the [Icon Design Guide](icon-design-guide.md).
**Workflow:**
1. Open the Document which can be found under __*/docs/templates/illustrator_template.ai*__ .
1. Download and open the [Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/templates/illustrator_template.ai).
2. You can now remove the content from the example logo layer ("Draw") and start creating.
3. Verify that you follow the [Icon Design Guidelines](ICON_DESIGN_GUIDE.md).
3. Verify that you follow the [Icon Design Guidelines](icon-design-guide.md).
4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid").
@@ -26,6 +26,6 @@ The Illustrator template is created following guidelines from the [Icon Design G

After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
After that, double check that the [code conventions and SVG global attributes](icon-design-guide.md#code-conventions) are correct.
7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).
Lucide is an open source icon library for displaying icons and symbols in digital and non-digital projects. It consists of 850+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
Lucide contains icons with different variants and states. With that, designers and developers can choose the right icon for themselves. If a desired icon doesn't exist yet, you're free to open a design request. The Lucide community contributors will help to provide new icons.
Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
With more icons, we simply have more icons to work with in our projects. Also with rising of new applications with specific features, lucide has the goal to provide the complete set for your project.
With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
When designing new icons, the community is working with a set of design rules. This is to maintain some standards for the icons: recognizable, consistency in style, and readable on all sizes. The community loves creativity in new icons but recognizable design conventions are important.
When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the 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 will only ship the icons you used, helps you to keep the software distribution size to a minimum.
Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte), [Solid](https://lucide.dev/docs/lucide-solid), [Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
## Loading all icons
> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
```js
import{icons}from'lucide-angular';
...
LucideAngularModule.pick(icons)
```
### Tags
You can use the following tags instead of `lucide-icon`:
It is possible to create one generic icon component to load icons.
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
You can also pass custom props that will be added in the svg as attributes.
```js
// Usage
constApp=()=>{
return<Camerafill="red"/>;
};
```
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
You can also pass custom props that will be added in the svg as attributes.
``` js
```js
// Usage
constApp=()=>{
return <Camerafill="red"/>
return <Camera fill="red"/>;
};
```
@@ -56,17 +59,17 @@ const App = () => {
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
```js
// Usage
constApp=()=>{
return<Camerafill="red"stroke-linejoin="bevel"/>;
};
```
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
This package include the following lucide implementations:
- All svg files
-Javascript library containing strings of svgs.
- All SVG files
-SVG sprite
- Icon fonts
-Svg sprite
-JavaScript library containing strings of SVGs.
## Why lucide-static?
This package is suitable for very 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.
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.
> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the 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)
> ⚠️ 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 treeshaking to make sure only the icons you use are bundled with your app. Threeshaking 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)
## Installation
@@ -19,59 +19,61 @@ This package is suitable for very specific use cases for example if you want to
\* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
@@ -53,10 +57,10 @@ import { Camera } from 'lucide-svelte'
```html
<script>
import{Phone}from'lucide-svelte'
import{Phone}from'lucide-svelte';
</script>
<Phonefill="#333"/>
<Phonefill="#333"/>
```
This results a filled phone icon.
@@ -69,20 +73,20 @@ It is possible to create one generic icon component to load icons.
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.