Compare commits

...

5 Commits

Author SHA1 Message Date
Karsa
ca471899c1 Added dumbbell icon (#862)
Co-authored-by: Karsa <karsa@karsa.org>
2022-11-02 21:03:06 +01:00
Eric Fennis
b40edf1f3c Improve Loading in figma plugin (#866)
* Add skeleton

* improve icon loading
2022-11-02 21:01:34 +01:00
Ekow Baah-Nyarkoh
32c339cabd downgrade puppeteer to make angular build work (#867) 2022-11-02 21:01:10 +01:00
Karsa
3529cd3f4d Adds various food and food intolerance icons (#861)
* Food intolerance + allergy icons

* Fixes bean outline

* Update dna.svg

* Update bean.svg

Co-authored-by: Karsa <karsa@karsa.org>
2022-11-02 16:09:23 +01:00
locness3
a4d568f26e Improve "Why choose Lucide over Feather" section in README.md (#868)
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".
2022-11-02 16:01:54 +01:00
31 changed files with 634 additions and 105 deletions

View File

@@ -17,9 +17,10 @@ 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.
## Table of Contents

16
icons/bean-off.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22a13.96 13.96 0 0 0 9.9-4.1" />
<path d="M10.75 5.093A6 6 0 0 1 22 8c0 2.411-.61 4.68-1.683 6.66" />
<path d="M5.341 10.62a4 4 0 0 0 6.487 1.208M10.62 5.341a4.015 4.015 0 0 1 2.039 2.04" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 502 B

14
icons/bean.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z" />
<path d="M5.341 10.62A4 4 0 1 0 10.62 5.34" />
</svg>

After

Width:  |  Height:  |  Size: 404 B

20
icons/candy-off.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m8.5 8.5-1 1a4.95 4.95 0 0 0 7 7l1-1" />
<path d="M11.843 6.187A4.947 4.947 0 0 1 16.5 7.5a4.947 4.947 0 0 1 1.313 4.657" />
<path d="M14 16.5V14" />
<path d="M14 6.5v1.843" />
<path d="M10 10v7.5" />
<path d="m16 7 1-5 1.367.683A3 3 0 0 0 19.708 3H21v1.292a3 3 0 0 0 .317 1.341L22 7l-5 1" />
<path d="m8 17-1 5-1.367-.683A3 3 0 0 0 4.292 21H3v-1.292a3 3 0 0 0-.317-1.341L2 17l5-1" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 657 B

17
icons/candy.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z" />
<path d="M14 6.5v10" />
<path d="M10 7.5v10" />
<path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1" />
<path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1" />
</svg>

After

Width:  |  Height:  |  Size: 505 B

23
icons/dna-off.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 2c-1.35 1.5-2.092 3-2.5 4.5M9 22c1.35-1.5 2.092-3 2.5-4.5" />
<path d="M2 15c3.333-3 6.667-3 10-3m10-3c-1.5 1.35-3 2.092-4.5 2.5" />
<path d="m17 6-2.5-2.5" />
<path d="m14 8-1.5-1.5" />
<path d="m7 18 2.5 2.5" />
<path d="m3.5 14.5.5.5" />
<path d="m20 9 .5.5" />
<path d="m6.5 12.5 1 1" />
<path d="m16.5 10.5 1 1" />
<path d="m10 16 1.5 1.5" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 630 B

23
icons/dna.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 15c6.667-6 13.333 0 20-6" />
<path d="M9 22c1.798-1.998 2.518-3.995 2.807-5.993" />
<path d="M15 2c-1.798 1.998-2.518 3.995-2.807 5.993" />
<path d="m17 6-2.5-2.5" />
<path d="m14 8-1-1" />
<path d="m7 18 2.5 2.5" />
<path d="m3.5 14.5.5.5" />
<path d="m20 9 .5.5" />
<path d="m6.5 12.5 1 1" />
<path d="m16.5 10.5 1 1" />
<path d="m10 16 1.5 1.5" />
</svg>

After

Width:  |  Height:  |  Size: 593 B

19
icons/dumbbell.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6.5 6.5 11 11" />
<path d="m21 21-1-1" />
<path d="m3 3 1 1" />
<path d="m18 22 4-4" />
<path d="m2 6 4-4" />
<path d="m3 10 7-7" />
<path d="m14 21 7-7" />
</svg>

After

Width:  |  Height:  |  Size: 389 B

15
icons/egg-off.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6.399 6.399C5.362 8.157 4.65 10.189 4.5 12c-.37 4.43 1.27 9.95 7.5 10 3.256-.026 5.259-1.547 6.375-3.625" />
<path d="M19.532 13.875A14.07 14.07 0 0 0 19.5 12c-.36-4.34-3.95-9.96-7.5-10-1.04.012-2.082.502-3.046 1.297" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 484 B

View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 10 4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-1.272-2.542" />
<path d="M10 2v2.343" />
<path d="M14 2v6.343" />
<path d="M8.5 2h7" />
<path d="M7 16h9" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 438 B

View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 2v8L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45L14 10V2" />
<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" />
<path d="M8.5 2h7" />
<path d="M7 16h10" />
</svg>

Before

Width:  |  Height:  |  Size: 340 B

After

Width:  |  Height:  |  Size: 390 B

20
icons/hop-off.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17.5 5.5C19 7 20.5 9 21 11c-1.323.265-2.646.39-4.118.226" />
<path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
<path d="M17.5 17.5c-2.5 0-4 0-6-1" />
<path d="M20 11.5c1 1.5 2 3.5 2 4.5" />
<path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
<path d="M22 22c-2 0-3.5-.5-5.5-1.5" />
<path d="M4.783 4.782C1.073 8.492 1 14.5 5 18c1-1 2-4.5 1.5-6.5 1.5 1 4 1 5.5.5M8.227 2.57C11.578 1.335 15.453 2.089 18 5c-.88.88-3.7 1.761-5.726 1.618" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 725 B

20
icons/hop.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1" />
<path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
<path d="M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1" />
<path d="M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5" />
<path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
<path d="M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5" />
<path d="M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z" />
<path d="M4.5 4.5 3 3c-.184-.185-.184-.816 0-1" />
</svg>

After

Width:  |  Height:  |  Size: 775 B

16
icons/milk-off.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 2h8" />
<path d="M9 2v1.343M15 2v2.789a4 4 0 0 0 .672 2.219l.656.984a4 4 0 0 1 .672 2.22v1.131M7.8 7.8l-.128.192A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3" />
<path d="M7 15a6.47 6.47 0 0 1 5 0 6.472 6.472 0 0 0 3.435.435" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 506 B

15
icons/milk.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 2h8" />
<path d="M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" />
<path d="M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
</svg>

After

Width:  |  Height:  |  Size: 462 B

17
icons/nut-off.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 4V2" />
<path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592a7.01 7.01 0 0 0 4.125-2.939" />
<path d="M19 10v3.343" />
<path d="M12 12c-1.349-.573-1.905-1.005-2.5-2-.546.902-1.048 1.353-2.5 2-1.018-.644-1.46-1.08-2-2-1.028.71-1.69.918-3 1 1.081-1.048 1.757-2.03 2-3 .194-.776.84-1.551 1.79-2.21m11.654 5.997c.887-.457 1.28-.891 1.556-1.787 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4-.74 0-1.461.068-2.15.192" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 767 B

15
icons/nut.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 4V2" />
<path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592A7.003 7.003 0 0 0 19 14v-4" />
<path d="M12 4C8 4 4.5 6 4 8c-.243.97-.919 1.952-2 3 1.31-.082 1.972-.29 3-1 .54.92.982 1.356 2 2 1.452-.647 1.954-1.098 2.5-2 .595.995 1.151 1.427 2.5 2 1.31-.621 1.862-1.058 2.5-2 .629.977 1.162 1.423 2.5 2 1.209-.548 1.68-.967 2-2 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4Z" />
</svg>

After

Width:  |  Height:  |  Size: 686 B

15
icons/vegan.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 2c4.056 3.007 9.232 9.337 10 20 .897-6.818 1.5-9.5 4-14" />
<path d="M20.375 6.533A9.953 9.953 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c2.003 0 3.869.589 5.433 1.603" />
<path d="M17.104 4c-1.002 1.274-1.146 2.586-1.1 4 1.9-.1 3.003-.201 4.3-1.4 1.406-1.3 1.6-2.3 1.7-4.6-2.7.1-3.623.375-4.9 2Z" />
</svg>

After

Width:  |  Height:  |  Size: 546 B

22
icons/wheat-off.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m2 22 10-10" />
<path d="m16 8-1.17 1.17" />
<path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97" />
<path d="M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62" />
<path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
<path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
<path d="m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98" />
<path d="M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 924 B

20
icons/wheat.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 22 16 8" />
<path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
<path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
<path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
<path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
<path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
</svg>

After

Width:  |  Height:  |  Size: 904 B

17
icons/wine-off.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 22h8" />
<path d="M7 10h3m7 0h-1.343" />
<path d="M12 15v7" />
<path d="M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 483 B

View File

@@ -48,16 +48,16 @@
"@types/jasmine": "~4.3.0",
"@types/node": "^18.11.4",
"codelyzer": "^6.0.2",
"jasmine-core": "~4.4.0",
"jasmine-core": "~3.10.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"karma": "~6.3.14",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"ng-packagr": "^14.2.1",
"protractor": "~7.0.0",
"puppeteer": "^19.1.0",
"puppeteer": "^8.0.0",
"rxjs": "7.5.7",
"ts-node": "~10.9.1",
"tslint": "~6.1.0",
@@ -65,4 +65,3 @@
"zone.js": "^0.11.8"
}
}

View File

@@ -66,3 +66,24 @@ export const getIcons = () => new Promise<LucideIcons>(async (resolve, reject)=>
}
}
});
type EventCallback = (lucideIcons: LucideIcons) => void
export const iconFetchListener = (callback: EventCallback) => {
fetchIcons()
const handleEvent = (event: MessageEvent) => {
if (event.type === 'message' && event?.data?.pluginMessage.type === 'cachedIcons') {
const lucideIcons = event?.data?.pluginMessage?.cachedIcons
callback(lucideIcons)
}
}
window.addEventListener('message', handleEvent)
const removeListener = () => {
window.removeEventListener('message', handleEvent)
}
return removeListener
}

View File

@@ -6,9 +6,11 @@
border-radius: 2px;
appearance: none;
outline: 0;
&:hover {
background: rgba(0, 0, 0, 0.06);
}
&:focus,
&:active {
box-shadow: inset 0 0 0 2px var(--color-blue);

View File

@@ -6,9 +6,10 @@ interface SearchInputProps extends React.HTMLProps<HTMLDivElement> {
value: string,
iconCount: number,
onChange: (event: ChangeEvent<HTMLInputElement>) => void
placeholder: string
}
function SearchInput({ value, onChange, iconCount, className, ...props }: SearchInputProps) {
function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps) {
return (
<div
className="search-input"
@@ -20,7 +21,7 @@ function SearchInput({ value, onChange, iconCount, className, ...props }: Search
type="search"
value={value}
onChange={onChange}
placeholder={`Search ${iconCount} icons`}
placeholder={placeholder}
className="input__field"
/>
</div>

View File

@@ -0,0 +1,25 @@
@keyframes load {
to {
background-position: 200% 0;
}
}
.skeleton {
--block: rgba(0, 0, 0, 0.06);
--loader: hsl(0 0% 89%);
background: linear-gradient(
-75deg,
transparent 40%,
var(--loader),
transparent 60%
) 0 0 / 200% 100%,
var(--block);
border-radius: calc(var(--padding) * 0.5);
animation: load 2s infinite linear;
background-attachment: fixed;
width: 40px;
height: 40px;
border-radius: 2px;
}

View File

@@ -0,0 +1,13 @@
import './Skeleton.scss'
const Skeleton = () => {
return (
<>
{Array.from({length: 48 }, () => (
<div className="skeleton"/>
))}
</>
)
}
export default Skeleton

View File

@@ -6,7 +6,7 @@ type Views = typeof views
import useSearch, { Icon } from '../hooks/useSearch'
import { getIcons } from '../api/fetchIcons'
import { getIcons, iconFetchListener, LucideIcons } from '../api/fetchIcons'
import './interface.scss'
import Menu from '../components/Menu'
@@ -19,21 +19,19 @@ function App() {
const searchResults = useMemo(() => useSearch(icons, tags, query), [icons, query])
const getLatestIcons = async () => {
const lucideIcons = await getIcons()
const handleFetchResponse = async (lucideIcons: LucideIcons) => {
const icons = Object.entries(lucideIcons.iconNodes)
setIcons(Object.entries(lucideIcons.iconNodes))
setIcons(icons)
setTags(lucideIcons.tags)
setVersion(lucideIcons.version)
}
useEffect(() => {
getLatestIcons()
}, [])
const removeListener = iconFetchListener(handleFetchResponse)
if(!icons.length) {
return null
}
return removeListener
}, [])
const View = views?.[page as keyof Views] ?? views.icons

View File

@@ -2,6 +2,7 @@ import IconButton from '../components/IconButton'
import SearchInput from '../components/SearchInput'
import createIconComponent from '../helpers/createIconComponent'
import { Icon } from '../hooks/useSearch'
import Skeleton from '../components/Skeleton/Skeleton'
interface PageProps {
query: string
@@ -24,16 +25,22 @@ const Icons = ({
value={query}
iconCount={icons.length}
onChange={(event) => setQuery(event.target.value)}
placeholder={icons.length ? `Search ${icons.length} icons`: 'Loading icons ..'}
/>
<main>
<div className='icon-grid'>
{searchResults.map(([name, iconNode] :any) => (
<IconButton
name={name}
key={name}
component={createIconComponent(name, iconNode)}
/>
))}
{icons.length ? (
searchResults.map(([name, iconNode]: any) => (
<IconButton
name={name}
key={name}
component={createIconComponent(name, iconNode)}
/>
))
) : (
<Skeleton />
)}
</div>
<footer>
<a

119
pnpm-lock.yaml generated
View File

@@ -90,16 +90,16 @@ importers:
'@types/jasmine': ~4.3.0
'@types/node': ^18.11.4
codelyzer: ^6.0.2
jasmine-core: ~4.4.0
jasmine-core: ~3.10.1
jasmine-spec-reporter: ~7.0.0
karma: ~6.4.1
karma-chrome-launcher: ~3.1.1
karma-coverage: ~2.2.0
karma-jasmine: ~5.1.0
karma-jasmine-html-reporter: ^2.0.0
karma: ~6.3.14
karma-chrome-launcher: ~3.1.0
karma-coverage: ~2.0.3
karma-jasmine: ~4.0.1
karma-jasmine-html-reporter: ^1.7.0
ng-packagr: ^14.2.1
protractor: ~7.0.0
puppeteer: ^19.1.0
puppeteer: ^8.0.0
rxjs: 7.5.7
ts-node: ~10.9.1
tslib: ^2.4.0
@@ -109,7 +109,7 @@ importers:
dependencies:
tslib: 2.4.0
devDependencies:
'@angular-devkit/build-angular': 14.2.6_apow2zkmlaoqzxf5dwzzzasmda
'@angular-devkit/build-angular': 14.2.6_ipbhr6x2xm7pml3wly3lktic5q
'@angular/cli': 14.2.6
'@angular/common': 14.2.7_mhxwww7bfpzvikl64i6lpyc2ua
'@angular/compiler': 14.2.7_@angular+core@14.2.7
@@ -120,16 +120,16 @@ importers:
'@types/jasmine': 4.3.0
'@types/node': 18.11.4
codelyzer: 6.0.2_cykvwhouafxz23wqf5dcj7lrei
jasmine-core: 4.4.0
jasmine-core: 3.10.1
jasmine-spec-reporter: 7.0.0
karma: 6.4.1
karma: 6.3.20
karma-chrome-launcher: 3.1.1
karma-coverage: 2.2.0
karma-jasmine: 5.1.0_karma@6.4.1
karma-jasmine-html-reporter: 2.0.0_vs5hqzgtonauktvvvebdlxyp2y
karma-coverage: 2.0.3
karma-jasmine: 4.0.2_karma@6.3.20
karma-jasmine-html-reporter: 1.7.0_c7wcpooxrfcj3ugs4cn4ze2mhu
ng-packagr: 14.2.2_wpcbsfrsniyujct5hxcq35xple
protractor: 7.0.0
puppeteer: 19.1.0
puppeteer: 8.0.0
rxjs: 7.5.7
ts-node: 10.9.1_6hf6ijjdmrvgn4gwd23tocsh2m
tslint: 6.1.3_typescript@4.8.4
@@ -405,7 +405,7 @@ packages:
- chokidar
dev: true
/@angular-devkit/build-angular/14.2.6_apow2zkmlaoqzxf5dwzzzasmda:
/@angular-devkit/build-angular/14.2.6_ipbhr6x2xm7pml3wly3lktic5q:
resolution: {integrity: sha512-XtaUwb3aZ8S0vl0y9bmbdFOH0KQCQ778twFH+ZfHW2BcPYtQz2Cy2rcVKXBQ850RyC0GxgMPfco6OGQndPpizg==}
engines: {node: ^14.15.0 || >=16.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
peerDependencies:
@@ -460,7 +460,7 @@ packages:
https-proxy-agent: 5.0.1
inquirer: 8.2.4
jsonc-parser: 3.1.0
karma: 6.4.1
karma: 6.3.20
karma-source-map-support: 1.4.0
less: 4.1.3
less-loader: 11.0.0_less@4.1.3+webpack@5.74.0
@@ -9119,14 +9119,6 @@ packages:
pretty-bytes: 5.6.0
dev: true
/cross-fetch/3.1.5:
resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
dependencies:
node-fetch: 2.6.7
transitivePeerDependencies:
- encoding
dev: true
/cross-spawn/5.1.0:
resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
dependencies:
@@ -9615,8 +9607,8 @@ packages:
resolution: {integrity: sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==}
dev: true
/devtools-protocol/0.0.1045489:
resolution: {integrity: sha512-D+PTmWulkuQW4D1NTiCRCFxF7pQPn0hgp4YyX4wAQ6xYXKOadSWPR3ENGDQ47MW/Ewc9v2rpC/UEEGahgBYpSQ==}
/devtools-protocol/0.0.854822:
resolution: {integrity: sha512-xd4D8kHQtB0KtWW0c9xBZD5LVtm9chkMOfs/3Yn01RhT/sFIsVtzTtypfKoFfWBaL+7xCYLxjOLkhwPXaX/Kcg==}
dev: true
/di/0.0.1:
@@ -12991,8 +12983,8 @@ packages:
resolution: {integrity: sha512-SNkOkS+/jMZvLhuSx1fjhcNWUC/KG6oVyFUGkSBEr9n1axSNduWU8GlI7suaHXr4yxjet6KjrUZxUTE5WzzWwQ==}
dev: true
/jasmine-core/4.4.0:
resolution: {integrity: sha512-+l482uImx5BVd6brJYlaHe2UwfKoZBqQfNp20ZmdNfsjGFTemGfqHLsXjKEW23w9R/m8WYeFc9JmIgjj6dUtAA==}
/jasmine-core/3.10.1:
resolution: {integrity: sha512-ooZWSDVAdh79Rrj4/nnfklL3NQVra0BcuhcuWoAwwi+znLDoUeH87AFfeX8s+YeYi6xlv5nveRyaA1v7CintfA==}
dev: true
/jasmine-spec-reporter/7.0.0:
@@ -14253,12 +14245,12 @@ packages:
which: 1.3.1
dev: true
/karma-coverage/2.2.0:
resolution: {integrity: sha512-gPVdoZBNDZ08UCzdMHHhEImKrw1+PAOQOIiffv1YsvxFhBjqvo/SVXNk4tqn1SYqX0BJZT6S/59zgxiBe+9OuA==}
/karma-coverage/2.0.3:
resolution: {integrity: sha512-atDvLQqvPcLxhED0cmXYdsPMCQuh6Asa9FMZW1bhNqlVEhJoB9qyZ2BY1gu7D/rr5GLGb5QzYO4siQskxaWP/g==}
engines: {node: '>=10.0.0'}
dependencies:
istanbul-lib-coverage: 3.2.0
istanbul-lib-instrument: 5.2.0
istanbul-lib-instrument: 4.0.3
istanbul-lib-report: 3.0.0
istanbul-lib-source-maps: 4.0.1
istanbul-reports: 3.1.5
@@ -14267,26 +14259,26 @@ packages:
- supports-color
dev: true
/karma-jasmine-html-reporter/2.0.0_vs5hqzgtonauktvvvebdlxyp2y:
resolution: {integrity: sha512-SB8HNNiazAHXM1vGEzf8/tSyEhkfxuDdhYdPBX2Mwgzt0OuF2gicApQ+uvXLID/gXyJQgvrM9+1/2SxZFUUDIA==}
/karma-jasmine-html-reporter/1.7.0_c7wcpooxrfcj3ugs4cn4ze2mhu:
resolution: {integrity: sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==}
peerDependencies:
jasmine-core: ^4.0.0
karma: ^6.0.0
karma-jasmine: ^5.0.0
jasmine-core: '>=3.8'
karma: '>=0.9'
karma-jasmine: '>=1.1'
dependencies:
jasmine-core: 4.4.0
karma: 6.4.1
karma-jasmine: 5.1.0_karma@6.4.1
jasmine-core: 3.10.1
karma: 6.3.20
karma-jasmine: 4.0.2_karma@6.3.20
dev: true
/karma-jasmine/5.1.0_karma@6.4.1:
resolution: {integrity: sha512-i/zQLFrfEpRyQoJF9fsCdTMOF5c2dK7C7OmsuKg2D0YSsuZSfQDiLuaiktbuio6F2wiCsZSnSnieIQ0ant/uzQ==}
engines: {node: '>=12'}
/karma-jasmine/4.0.2_karma@6.3.20:
resolution: {integrity: sha512-ggi84RMNQffSDmWSyyt4zxzh2CQGwsxvYYsprgyR1j8ikzIduEdOlcLvXjZGwXG/0j41KUXOWsUCBfbEHPWP9g==}
engines: {node: '>= 10'}
peerDependencies:
karma: ^6.0.0
karma: '*'
dependencies:
jasmine-core: 4.4.0
karma: 6.4.1
jasmine-core: 3.10.1
karma: 6.3.20
dev: true
/karma-source-map-support/1.4.0:
@@ -14295,8 +14287,8 @@ packages:
source-map-support: 0.5.21
dev: true
/karma/6.4.1:
resolution: {integrity: sha512-Cj57NKOskK7wtFWSlMvZf459iX+kpYIPXmkNUzP2WAFcA7nhr/ALn5R7sw3w+1udFDcpMx/tuB8d5amgm3ijaA==}
/karma/6.3.20:
resolution: {integrity: sha512-HRNQhMuKOwKpjYlWiJP0DUrJOh+QjaI/DTaD8b9rEm4Il3tJ8MijutVZH4ts10LuUFst/CedwTS6vieCN8yTSw==}
engines: {node: '>= 10'}
hasBin: true
dependencies:
@@ -17191,37 +17183,24 @@ packages:
engines: {node: '>=6'}
dev: true
/puppeteer-core/19.1.0:
resolution: {integrity: sha512-xIIJJuvqWbUwNzaB7l0TyChJYHdLvLhcHQiBLLKsMfvaQXnVa0Fzooq3Zb5bc01Q/b7XiP9pqDvUcYWSmzZQHA==}
engines: {node: '>=14.1.0'}
/puppeteer/8.0.0:
resolution: {integrity: sha512-D0RzSWlepeWkxPPdK3xhTcefj8rjah1791GE82Pdjsri49sy11ci/JQsAO8K2NRukqvwEtcI+ImP5F4ZiMvtIQ==}
engines: {node: '>=10.18.1'}
deprecated: Version no longer supported. Upgrade to @latest
requiresBuild: true
dependencies:
cross-fetch: 3.1.5
debug: 4.3.4
devtools-protocol: 0.0.1045489
devtools-protocol: 0.0.854822
extract-zip: 2.0.1
https-proxy-agent: 5.0.1
node-fetch: 2.6.7
pkg-dir: 4.2.0
progress: 2.0.3
proxy-from-env: 1.1.0
rimraf: 3.0.2
tar-fs: 2.1.1
unbzip2-stream: 1.4.3
ws: 8.9.0
transitivePeerDependencies:
- bufferutil
- encoding
- supports-color
- utf-8-validate
dev: true
/puppeteer/19.1.0:
resolution: {integrity: sha512-UyJ5gz5JNjuFo6VJzIf+qDNjbSWGSoAMLuW990eErcrH6sZP85EbpLi6yG50euTMudxO/lsj4w1VNDNogHv6dA==}
engines: {node: '>=14.1.0'}
requiresBuild: true
dependencies:
cosmiconfig: 7.0.1
https-proxy-agent: 5.0.1
progress: 2.0.3
proxy-from-env: 1.1.0
puppeteer-core: 19.1.0
ws: 7.5.9
transitivePeerDependencies:
- bufferutil
- encoding

153
tags.json
View File

@@ -446,12 +446,21 @@
"beaker": [
"cup"
],
"beer": [
"alcohol",
"bar",
"beverage",
"brewery",
"drink"
"bean": [
"legume",
"soy",
"food",
"seed"
],
"bean-off": [
"soy free",
"legume",
"soy",
"food",
"seed",
"allergy",
"intolerance",
"diet"
],
"bed": [
"sleep",
@@ -468,6 +477,13 @@
"hotel",
"furniture"
],
"beer": [
"alcohol",
"bar",
"beverage",
"brewery",
"drink"
],
"bell": [
"alarm",
"notification",
@@ -749,6 +765,19 @@
"webcam",
"video"
],
"candy": [
"sugar",
"food",
"sweet"
],
"candy-off": [
"sugar free",
"food",
"sweet",
"allergy",
"intolerance",
"diet"
],
"car": [
"vehicle",
"transport",
@@ -1337,6 +1366,22 @@
"calculate",
"maths"
],
"dna": [
"gene",
"gmo",
"helix",
"heredity",
"chromosome",
"nucleic acid"
],
"dna-off": [
"gene",
"gmo free",
"helix",
"heredity",
"chromosome",
"nucleic acid"
],
"dog": [
"animal",
"pet",
@@ -1369,6 +1414,12 @@
"chicken",
"meat"
],
"dumbbell": [
"barbell",
"weight",
"workout",
"gym"
],
"ear": [
"hearing",
"noise",
@@ -1810,6 +1861,11 @@
"beaker",
"erlenmeyer"
],
"flask-conical-off": [
"beaker",
"erlenmeyer",
"non toxic"
],
"flask-round": [
"beaker"
],
@@ -2258,6 +2314,20 @@
"house",
"living"
],
"hop": [
"beer",
"brewery",
"drink"
],
"hop-off": [
"beer",
"brewery",
"drink",
"hop free",
"allergy",
"intolerance",
"diet"
],
"hourglass": [
"timer",
"time",
@@ -2330,6 +2400,11 @@
"money",
"payment"
],
"joystick": [
"game",
"console",
"control stick"
],
"key": [
"password",
"login",
@@ -2789,6 +2864,24 @@
"signpost",
"version control"
],
"milk": [
"lactose",
"bottle",
"beverage",
"drink",
"water",
"diet"
],
"milk-off": [
"lactose free",
"bottle",
"beverage",
"drink",
"water",
"allergy",
"intolerance",
"diet"
],
"minimize": [
"exit fullscreen",
"close",
@@ -2948,6 +3041,20 @@
"article",
"headline"
],
"nut": [
"hazelnut",
"acorn",
"food",
"diet"
],
"nut-off": [
"hazelnut",
"acorn",
"food",
"allergy",
"intolerance",
"diet"
],
"octagon": [
"stop",
"shape"
@@ -4152,6 +4259,13 @@
"dinner",
"supper"
],
"vegan": [
"vegetarian",
"fruitarian",
"herbivorous",
"animal rights",
"diet"
],
"venetian-mask": [
"mask",
"masquerade",
@@ -4244,6 +4358,21 @@
"interface",
"callback"
],
"wheat": [
"corn",
"cereal",
"grain",
"gluten"
],
"wheat-off": [
"corn",
"cereal",
"grain",
"gluten free",
"allergy",
"intolerance",
"diet"
],
"wifi": [
"connection",
"signal",
@@ -4267,6 +4396,18 @@
"vineyard",
"winery"
],
"wine-off": [
"alcohol",
"beverage",
"drink",
"glass",
"alcohol free",
"abstinence",
"abstaining",
"teetotalism",
"allergy",
"intolerance"
],
"wrap-text": [
"words",
"lines",