* [packages][lucide] Switch to the HTML attribute data-lucide instead of icon-name
* fix tests
* Update lucide.ts
Add BC for `icon-name`.
* Update packages/lucide/src/lucide.ts
Co-authored-by: Karsa <contact@karsa.org>
---------
Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
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>
for file in $(printf "%s\\n" icons/*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name:Generate cohesion check squares
id:generate-cohesion-check-squares
run:|
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in $(printf "%s\\n" icons/*square*.svg | shuf | head -n$(awk -F' ' '{print NF}' <<< '${{ steps.changed-files.outputs.all_changed_files }}')); do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name:Generate 1px stroke-width
id:generate-1px-stroke-width
run:|
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
@@ -32,7 +60,49 @@ jobs:
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img width=\"400\" title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/&.svg\"/> |"
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/1/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name:Generate 2px stroke-width
id:generate-2px-stroke-width
run:|
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/2/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name:Generate 3px stroke-width
id:generate-3px-stroke-width
run:|
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/stroke-width/3/&.svg\"/> |"
done | tr '\n' ' ' >> $GITHUB_OUTPUT
echo >> $GITHUB_OUTPUT
echo "$delimiter" >> $GITHUB_OUTPUT
- name:Generate X-rays
id:generate-x-rays
run:|
delimiter="$(openssl rand -hex 8)"
echo "body<<$delimiter" >> $GITHUB_OUTPUT
for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
cat "$file" | # get file content
tr '\n' ' ' | # remove line breaks
sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
base64 -w 0 | # encode svg
sed "s|.*|<img width=\"400\" title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/$(basename ${file//\.svg/})/&.svg\"/> |"
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
Lucide is a community-driven 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 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.
The decision to create Lucide arose from growing dissatisfaction with the moderation of the Feather Icons project. With more than 300 open issues and over 100 open PRs, the Feather Icons project has been abandoned and is no longer actively maintained. Unfortunately, this means that numerous developers and designers have invested their time in contributing to Feather Icons without the possibility of their 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.
In an effort to expand the icon set while remaining true to the original minimalist design language, Lucide is driven by a community of developers and designers. We strive to grow together and maintain a faithful continuation of the project.
### Why should I choose Lucide over Feather Icons?
- Lucide already expended the icon set by 130+ in less then a year. Lucide has over 500+ icon, feather sticks around 286 icons.
- Lucide has expanded its icon set by 500+ in the last few years. Lucide now has over 1000 icons, while Feather has around 287 icons.
- Well maintained code base.
- Active community.
### Should I migrate to Lucide?
That depends if you're fine with the icons from feather icons. If that is the case, it is maybe not the effort worth it.
But if you keep wrestling and feel limited by the icons Feather provides you can consider to migrate.
We didn't remove any icons when we forked, but there are some icons renamed.
That depends on whether you're satisfied with the icons from Feather Icons. If that is the case, it may not be worth the effort.
However, if you find yourself struggling and feeling limited by the icons provided by Feather, you can consider migrating.
When we forked, we didn't remove any icons, but some icons have been renamed.
@@ -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.
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.
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 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.
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.
@@ -16,7 +16,7 @@ When designing new icons, the community is working with a set of design rules. T
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.
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),[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)
...
LucideAngularModule.pick(icons)
```
### Tags
You can use the following tags instead of `lucide-icon`:
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)
\* 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)
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.
