mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-17 21:47:40 +01:00
Compare commits
8 Commits
0.314.0
...
lucide-vue
| Author | SHA1 | Date | |
|---|---|---|---|
|
d1d57d3c85 | ||
|
|
701c2fb6b2 | ||
|
|
294ec9c727 | ||
|
|
99c883e60a | ||
|
|
9e68779d22 | ||
|
|
06372db723 | ||
|
|
114fb08556 | ||
|
|
3bad7f6ced |
@@ -48,7 +48,7 @@
|
||||
"lucide-vue-next": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sandpack-vue3": "^3.1.9",
|
||||
"sandpack-vue3": "3.1.8",
|
||||
"semver": "^7.5.2",
|
||||
"shikiji": "^0.7.4",
|
||||
"simple-git": "^3.18.0",
|
||||
|
||||
@@ -6,10 +6,13 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"confirm",
|
||||
"subscribe",
|
||||
"schedule",
|
||||
"done",
|
||||
"todo",
|
||||
"tick",
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="m16 20 2 2 4-4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 433 B After Width: | Height: | Size: 380 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"confirm",
|
||||
"subscribe",
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="m9 16 2 2 4-4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 419 B After Width: | Height: | Size: 359 B |
@@ -6,9 +6,12 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"clock"
|
||||
"clock",
|
||||
"hour"
|
||||
],
|
||||
"categories": [
|
||||
"time"
|
||||
|
||||
@@ -13,6 +13,6 @@
|
||||
<path d="M16 2v4" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M3 10h5" />
|
||||
<path d="M17.5 17.5 16 16.25V14" />
|
||||
<path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z" />
|
||||
<path d="M17.5 17.5 16 16.3V14" />
|
||||
<circle cx="16" cy="16" r="6" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 443 B After Width: | Height: | Size: 424 B |
@@ -6,7 +6,8 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"month",
|
||||
"year",
|
||||
"event"
|
||||
],
|
||||
"categories": [
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M8 14h.01" />
|
||||
<path d="M12 14h.01" />
|
||||
<path d="M16 14h.01" />
|
||||
|
||||
|
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 484 B |
19
icons/calendar-fold.json
Normal file
19
icons/calendar-fold.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"birthday",
|
||||
"birthdate",
|
||||
"ics"
|
||||
],
|
||||
"categories": [
|
||||
"time",
|
||||
"files"
|
||||
]
|
||||
}
|
||||
17
icons/calendar-fold.svg
Normal file
17
icons/calendar-fold.svg
Normal 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 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M15 22v-4a2 2 0 0 1 2-2h4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 393 B |
@@ -5,11 +5,13 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"heart",
|
||||
"favourite",
|
||||
"subscribe"
|
||||
"subscribe",
|
||||
"valentines day"
|
||||
],
|
||||
"categories": [
|
||||
"time"
|
||||
|
||||
@@ -9,9 +9,8 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M3 10h18V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M21.29 14.7a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-2.65-.53c-.3.12-.56.3-.79.53-.95.94-1 2.53.2 3.74L17.5 22l3.6-3.55c1.2-1.21 1.14-2.8.19-3.74Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 547 B After Width: | Height: | Size: 525 B |
18
icons/calendar-minus-2.json
Normal file
18
icons/calendar-minus-2.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"delete",
|
||||
"remove"
|
||||
],
|
||||
"categories": [
|
||||
"time"
|
||||
]
|
||||
}
|
||||
17
icons/calendar-minus-2.svg
Normal file
17
icons/calendar-minus-2.svg
Normal 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 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M10 16h4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 354 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"delete",
|
||||
"remove"
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<line x1="16" x2="22" y1="19" y2="19" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M16 19h6" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 446 B After Width: | Height: | Size: 374 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"delete",
|
||||
"remove"
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4.18 4.18A2 2 0 0 0 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 1.82-1.18" />
|
||||
<path d="M4.2 4.2A2 2 0 0 0 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 1.82-1.18" />
|
||||
<path d="M21 15.5V6a2 2 0 0 0-2-2H9.5" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M3 10h7" />
|
||||
<path d="M21 10h-5.5" />
|
||||
<line x1="2" x2="22" y1="2" y2="22" />
|
||||
<path d="m2 2 20 20" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 446 B After Width: | Height: | Size: 429 B |
20
icons/calendar-plus-2.json
Normal file
20
icons/calendar-plus-2.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"add",
|
||||
"subscribe",
|
||||
"create",
|
||||
"new"
|
||||
],
|
||||
"categories": [
|
||||
"time"
|
||||
]
|
||||
}
|
||||
18
icons/calendar-plus-2.svg
Normal file
18
icons/calendar-plus-2.svg
Normal 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="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M10 16h4" />
|
||||
<path d="M12 14v4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"add",
|
||||
"subscribe",
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<line x1="19" x2="19" y1="16" y2="22" />
|
||||
<line x1="16" x2="22" y1="19" y2="19" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M16 19h6" />
|
||||
<path d="M19 16v6" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 489 B After Width: | Height: | Size: 398 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"range",
|
||||
"period"
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M17 14h-6" />
|
||||
<path d="M13 18H7" />
|
||||
<path d="M7 14h.01" />
|
||||
|
||||
|
Before Width: | Height: | Size: 490 B After Width: | Height: | Size: 430 B |
@@ -6,9 +6,11 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"search",
|
||||
"events"
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"events",
|
||||
"search"
|
||||
],
|
||||
"categories": [
|
||||
"time"
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7.5" />
|
||||
<path d="M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7.5" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6v0Z" />
|
||||
<circle cx="18" cy="18" r="3" />
|
||||
<path d="m22 22-1.5-1.5" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 435 B After Width: | Height: | Size: 417 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"remove"
|
||||
],
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<line x1="17" x2="22" y1="17" y2="22" />
|
||||
<line x1="17" x2="22" y1="22" y2="17" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="m17 22 5-5" />
|
||||
<path d="m17 17 5 5" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 489 B After Width: | Height: | Size: 402 B |
@@ -6,7 +6,9 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"time",
|
||||
"day",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"remove",
|
||||
"busy"
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<line x1="10" x2="14" y1="14" y2="18" />
|
||||
<line x1="14" x2="10" y1="14" y2="18" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
<path d="m14 14-4 4" />
|
||||
<path d="m10 14 4 4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 476 B After Width: | Height: | Size: 382 B |
@@ -6,10 +6,11 @@
|
||||
],
|
||||
"tags": [
|
||||
"date",
|
||||
"birthdate",
|
||||
"month",
|
||||
"year",
|
||||
"event",
|
||||
"birthday",
|
||||
"time",
|
||||
"event"
|
||||
"birthdate"
|
||||
],
|
||||
"categories": [
|
||||
"time"
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
|
||||
<line x1="16" x2="16" y1="2" y2="6" />
|
||||
<line x1="8" x2="8" y1="2" y2="6" />
|
||||
<line x1="3" x2="21" y1="10" y2="10" />
|
||||
<path d="M8 2v4" />
|
||||
<path d="M16 2v4" />
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" />
|
||||
<path d="M3 10h18" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 390 B After Width: | Height: | Size: 330 B |
@@ -4,14 +4,13 @@ import defaultAttributes from './defaultAttributes';
|
||||
|
||||
// Create interface extending SVGAttributes
|
||||
export interface SVGProps extends Partial<SVGAttributes> {
|
||||
size?: 24 | number
|
||||
strokeWidth?: number | string
|
||||
absoluteStrokeWidth?: boolean
|
||||
size?: 24 | number;
|
||||
strokeWidth?: number | string;
|
||||
absoluteStrokeWidth?: boolean;
|
||||
}
|
||||
|
||||
|
||||
export type IconNode = [elementName: string, attrs: Record<string, string>][]
|
||||
export type Icon = FunctionalComponent<SVGProps>
|
||||
export type IconNode = [elementName: string, attrs: Record<string, string>][];
|
||||
export type Icon = FunctionalComponent<SVGProps>;
|
||||
/**
|
||||
* Converts string to KebabCase
|
||||
* Copied from scripts/helper. If anyone knows how to properly import it here
|
||||
@@ -20,29 +19,31 @@ export type Icon = FunctionalComponent<SVGProps>
|
||||
* @param {string} string
|
||||
* @returns {string} A kebabized string
|
||||
*/
|
||||
export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
export const toKebabCase = (string: string) =>
|
||||
string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
|
||||
const createLucideIcon = (iconName: string, iconNode: IconNode): Icon => (
|
||||
{ size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
|
||||
{ attrs, slots } // context
|
||||
const createLucideIcon =
|
||||
(iconName: string, iconNode: IconNode): Icon =>
|
||||
(
|
||||
{ size, strokeWidth = 2, absoluteStrokeWidth, color, class: classes, ...props }, // props
|
||||
{ attrs, slots }, // context
|
||||
) => {
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
...defaultAttributes,
|
||||
width: size || defaultAttributes.width,
|
||||
height: size || defaultAttributes.height,
|
||||
stroke: color || defaultAttributes.stroke,
|
||||
'stroke-width': absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
|
||||
...attrs,
|
||||
class: ['lucide', `lucide-${toKebabCase(iconName)}`],
|
||||
...props,
|
||||
},
|
||||
[
|
||||
...iconNode.map(child => h(...child)),
|
||||
...(slots.default ? [slots.default()] : [])
|
||||
],
|
||||
);
|
||||
};
|
||||
return h(
|
||||
'svg',
|
||||
{
|
||||
...defaultAttributes,
|
||||
width: size || defaultAttributes.width,
|
||||
height: size || defaultAttributes.height,
|
||||
stroke: color || defaultAttributes.stroke,
|
||||
'stroke-width': absoluteStrokeWidth
|
||||
? (Number(strokeWidth) * 24) / Number(size)
|
||||
: strokeWidth,
|
||||
...attrs,
|
||||
class: ['lucide', `lucide-${toKebabCase(iconName)}`],
|
||||
...props,
|
||||
},
|
||||
[...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])],
|
||||
);
|
||||
};
|
||||
|
||||
export default createLucideIcon;
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import { join } from 'path';
|
||||
|
||||
export default function LucideNuxtPlugin() {
|
||||
this.nuxt.hook('components:dirs', (dirs) => {
|
||||
dirs.push({
|
||||
path: join(__dirname, 'dist', 'esm', 'icons'),
|
||||
prefix: 'Icon',
|
||||
ignore: ['**/index.js'],
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
|
||||
|
||||
export default ({ componentName, iconName, children, getSvg, deprecated }) => {
|
||||
const svgContents = getSvg();
|
||||
const svgBase64 = base64SVG(svgContents);
|
||||
|
||||
return `
|
||||
import createLucideIcon from '../createLucideIcon';
|
||||
|
||||
/**
|
||||
* @component @name ${componentName}
|
||||
* @description Lucide SVG icon component, renders SVG Element with children.
|
||||
*
|
||||
* @preview  - https://lucide.dev/icons/${iconName}
|
||||
* @see https://lucide.dev/guide/packages/lucide-vue - Documentation
|
||||
*
|
||||
* @param {Object} props - Lucide icons props and any valid SVG attribute
|
||||
* @returns {Component} Vue Component
|
||||
* ${deprecated ? '@deprecated' : ''}
|
||||
*/
|
||||
const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)});
|
||||
|
||||
export default ${componentName};
|
||||
`;
|
||||
};
|
||||
@@ -1,84 +0,0 @@
|
||||
import { Component } from 'vue';
|
||||
import { Vue, VueConfiguration } from 'vue/types/vue';
|
||||
import defaultAttributes from './defaultAttributes';
|
||||
|
||||
var showDeprecationWarning = true;
|
||||
|
||||
type IconNode = [elementName: string, attrs: Record<string, string>][]
|
||||
|
||||
/**
|
||||
* Converts string to KebabCase
|
||||
* Copied from scripts/helper. If anyone knows how to properly import it here
|
||||
* then please fix it.
|
||||
*
|
||||
* @param {string} string
|
||||
* @returns {string} A kebabized string
|
||||
*/
|
||||
export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
|
||||
export default (iconName: string, iconNode: IconNode): Component => ({
|
||||
name: iconName,
|
||||
functional: true,
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'currentColor',
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
absoluteStrokeWidth: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
defaultClass: {
|
||||
type: String,
|
||||
default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`,
|
||||
},
|
||||
},
|
||||
render(
|
||||
createElement,
|
||||
{
|
||||
props: { color, size, strokeWidth, absoluteStrokeWidth, defaultClass },
|
||||
data,
|
||||
children = [],
|
||||
},
|
||||
) {
|
||||
if (showDeprecationWarning) {
|
||||
console.warn(
|
||||
'[Lucide Vue] This package will be deprecated end of 2023. Please upgrade to Vue 3 and use the latest lucide package for Vue.',
|
||||
);
|
||||
showDeprecationWarning = false;
|
||||
}
|
||||
|
||||
return createElement(
|
||||
'svg',
|
||||
{
|
||||
// prettier-ignore
|
||||
class: [defaultClass, data.class, data.staticClass, data.attrs && data.attrs.class].filter(Boolean),
|
||||
style: [data.style, data.staticStyle, data.attrs && data.attrs.style].filter(Boolean),
|
||||
attrs: {
|
||||
...defaultAttributes,
|
||||
width: size,
|
||||
height: size,
|
||||
stroke: color,
|
||||
'stroke-width':
|
||||
absoluteStrokeWidth
|
||||
? Number(strokeWidth) * 24 / Number(size)
|
||||
: strokeWidth,
|
||||
...data.attrs,
|
||||
},
|
||||
on: data?.on || {}
|
||||
},
|
||||
[
|
||||
...iconNode.map(([tag, attrs]) => createElement(String(tag), { attrs })),
|
||||
...children
|
||||
],
|
||||
);
|
||||
},
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
const defaultAttributes = {
|
||||
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',
|
||||
};
|
||||
|
||||
export default defaultAttributes
|
||||
@@ -1 +0,0 @@
|
||||
Folder for generated icons
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './icons';
|
||||
export * as icons from './icons';
|
||||
export * from './aliases';
|
||||
@@ -1,215 +0,0 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Using lucide icon components > should add a class to the element 1`] = `
|
||||
<div>
|
||||
<svg
|
||||
class="lucide-icon lucide lucide-smile my-icon"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
key="1mglay"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M8 14s1.5 2 4 2 4-2 4-2"
|
||||
key="1y1vjs"
|
||||
/>
|
||||
<line
|
||||
key="yxxnd0"
|
||||
x1="9"
|
||||
x2="9.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
key="1p4y9e"
|
||||
x1="15"
|
||||
x2="15.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Using lucide icon components > should add a style attribute to the element 1`] = `
|
||||
<div>
|
||||
<svg
|
||||
class="lucide-icon lucide lucide-smile"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
style="position: absolute"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
key="1mglay"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M8 14s1.5 2 4 2 4-2 4-2"
|
||||
key="1y1vjs"
|
||||
/>
|
||||
<line
|
||||
key="yxxnd0"
|
||||
x1="9"
|
||||
x2="9.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
key="1p4y9e"
|
||||
x1="15"
|
||||
x2="15.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
|
||||
<div>
|
||||
<svg
|
||||
class="lucide-icon lucide lucide-smile"
|
||||
fill="none"
|
||||
height="48"
|
||||
stroke="red"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="4"
|
||||
viewBox="0 0 24 24"
|
||||
width="48"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
key="1mglay"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M8 14s1.5 2 4 2 4-2 4-2"
|
||||
key="1y1vjs"
|
||||
/>
|
||||
<line
|
||||
key="yxxnd0"
|
||||
x1="9"
|
||||
x2="9.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
key="1p4y9e"
|
||||
x1="15"
|
||||
x2="15.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Using lucide icon components > should pass children to the icon slot 1`] = `
|
||||
<div>
|
||||
<svg
|
||||
class="lucide-icon lucide lucide-smile"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
key="1mglay"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M8 14s1.5 2 4 2 4-2 4-2"
|
||||
key="1y1vjs"
|
||||
/>
|
||||
<line
|
||||
key="yxxnd0"
|
||||
x1="9"
|
||||
x2="9.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
key="1p4y9e"
|
||||
x1="15"
|
||||
x2="15.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<text>
|
||||
Hello World
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Using lucide icon components > should render an component 1`] = `
|
||||
<div>
|
||||
<svg
|
||||
class="lucide-icon lucide lucide-smile"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
key="1mglay"
|
||||
r="10"
|
||||
/>
|
||||
<path
|
||||
d="M8 14s1.5 2 4 2 4-2 4-2"
|
||||
key="1y1vjs"
|
||||
/>
|
||||
<line
|
||||
key="yxxnd0"
|
||||
x1="9"
|
||||
x2="9.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
key="1p4y9e"
|
||||
x1="15"
|
||||
x2="15.01"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,133 +0,0 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, fireEvent, cleanup } from '@testing-library/vue'
|
||||
import { Smile, Pen, Edit2 } from '../src/lucide-vue'
|
||||
import { afterEach } from 'vitest';
|
||||
import { VueClass } from '@vue/test-utils';
|
||||
|
||||
describe('Using lucide icon components', () => {
|
||||
afterEach(() => cleanup())
|
||||
|
||||
it('should render an component', () => {
|
||||
const {container} = render(Smile as VueClass<any>)
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should adjust the size, stroke color and stroke width', () => {
|
||||
const {container} = render(Smile as VueClass<any>, {
|
||||
props: {
|
||||
size: 48,
|
||||
color: 'red',
|
||||
strokeWidth: 4
|
||||
}
|
||||
})
|
||||
|
||||
const [icon] = document.getElementsByClassName('lucide');
|
||||
|
||||
expect(icon.getAttribute('width')).toBe('48')
|
||||
expect(icon.getAttribute('stroke')).toBe('red')
|
||||
expect(icon.getAttribute('stroke-width')).toBe('4')
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
|
||||
it('should add a class to the element', () => {
|
||||
const {container} = render(Smile as VueClass<any>, {
|
||||
attrs: {
|
||||
class: "my-icon"
|
||||
}
|
||||
})
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
const [icon] = document.getElementsByClassName('lucide');
|
||||
|
||||
expect(icon).toHaveClass('my-icon')
|
||||
expect(icon).toHaveClass('lucide-smile')
|
||||
expect(icon).toHaveClass('lucide')
|
||||
});
|
||||
|
||||
it('should add a style attribute to the element', () => {
|
||||
const {container} = render(Smile as VueClass<any>, {
|
||||
attrs: {
|
||||
style: 'position: absolute',
|
||||
}
|
||||
})
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
|
||||
const [icon] = document.getElementsByClassName('lucide');
|
||||
|
||||
expect(icon).toHaveStyle({ position: 'absolute' })
|
||||
});
|
||||
|
||||
it('should call the onClick event', async () => {
|
||||
const onClick = vi.fn()
|
||||
render(Smile as VueClass<any>, {
|
||||
listeners: {
|
||||
click: onClick
|
||||
}
|
||||
})
|
||||
|
||||
const [icon] = document.getElementsByClassName('lucide');
|
||||
|
||||
await fireEvent.click(icon)
|
||||
|
||||
expect(onClick).toHaveBeenCalled()
|
||||
});
|
||||
|
||||
it('should pass children to the icon slot', () => {
|
||||
const testText = 'Hello World'
|
||||
const template = `<text>${testText}</text>`
|
||||
const { getByText, container } = render(Smile as VueClass<any>, {
|
||||
slots: {
|
||||
default: { template }
|
||||
}
|
||||
})
|
||||
|
||||
const textElement = getByText(testText)
|
||||
|
||||
expect(textElement).toBeInTheDocument()
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render the alias icon', () => {
|
||||
const { getByText, container } = render(Pen as VueClass<any>, {
|
||||
props: {
|
||||
size: '48',
|
||||
color: 'red',
|
||||
strokeWidth: '4'
|
||||
}
|
||||
})
|
||||
|
||||
const PenIconRenderedHTML = container.innerHTML
|
||||
|
||||
cleanup()
|
||||
|
||||
const { container: Edit2Container } = render(Edit2 as VueClass<any>, {
|
||||
props: {
|
||||
size: '48',
|
||||
color: 'red',
|
||||
strokeWidth: '4'
|
||||
}
|
||||
})
|
||||
|
||||
expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
|
||||
})
|
||||
|
||||
it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
|
||||
const { getByText, container } = render(Pen as VueClass<any>, {
|
||||
props: {
|
||||
size: '48',
|
||||
color: 'red',
|
||||
absoluteStrokeWidth: true
|
||||
}
|
||||
})
|
||||
|
||||
const [icon] = document.getElementsByClassName('lucide');
|
||||
|
||||
expect(icon.getAttribute('width')).toBe('48')
|
||||
expect(icon.getAttribute('stroke')).toBe('red')
|
||||
expect(icon.getAttribute('stroke-width')).toBe('1')
|
||||
})
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
import '@testing-library/jest-dom';
|
||||
@@ -1,21 +1,19 @@
|
||||
# Lucide Vue
|
||||
|
||||
Implementation of the lucide icon library for Vue applications.
|
||||
Implementation of the lucide icon library for Vue 3 applications.
|
||||
|
||||
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
|
||||
|
||||
> :warning: This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next)
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue
|
||||
yarn add @lucide/vue
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
npm install @lucide/vue
|
||||
```
|
||||
|
||||
## How to use
|
||||
@@ -34,7 +32,7 @@ You can pass additional props to adjust the icon.
|
||||
|
||||
<script>
|
||||
// Returns Vue component
|
||||
import { Camera } from 'lucide-vue';
|
||||
import { Camera } from '@lucide/vue';
|
||||
|
||||
export default {
|
||||
name: 'My Component',
|
||||
@@ -77,7 +75,7 @@ It is possible to create one generic icon component to load icons.
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as icons from 'lucide-vue';
|
||||
import * as icons from '@lucide/vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@@ -104,25 +102,3 @@ export default {
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
|
||||
|
||||
### Setup
|
||||
|
||||
In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
|
||||
|
||||
```js
|
||||
export default {
|
||||
buildModules: ['lucide-vue/nuxt']
|
||||
};
|
||||
```
|
||||
|
||||
### How to use
|
||||
|
||||
Icon components are prefixed with `Icon`. Use icon components without importing them.
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<IconCamera color="red" :size="32" />
|
||||
```
|
||||
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "lucide-vue",
|
||||
"name": "@lucide/vue",
|
||||
"version": "0.0.1",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 2 applications",
|
||||
"description": "A Lucide icon library package for Vue 3 applications",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lucide-icons/lucide.git",
|
||||
"directory": "packages/lucide-vue"
|
||||
"directory": "packages/vue"
|
||||
},
|
||||
"keywords": [
|
||||
"Lucide",
|
||||
@@ -22,12 +22,13 @@
|
||||
"Fontawesome",
|
||||
"Font Awesome"
|
||||
],
|
||||
"amdName": "lucide-vue",
|
||||
"source": "build/lucide-vue.js",
|
||||
"main": "dist/cjs/lucide-vue.js",
|
||||
"main:umd": "dist/umd/lucide-vue.js",
|
||||
"module": "dist/esm/lucide-vue.js",
|
||||
"unpkg": "dist/umd/lucide-vue.min.js",
|
||||
"amdName": "lucide-vue-next",
|
||||
"source": "build/lucide-vue-next.js",
|
||||
"main": "dist/cjs/lucide-vue-next.js",
|
||||
"main:umd": "dist/umd/lucide-vue-next.js",
|
||||
"module": "dist/esm/lucide-vue-next.js",
|
||||
"unpkg": "dist/umd/lucide-vue-next.min.js",
|
||||
"typings": "dist/lucide-vue-next.d.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist",
|
||||
@@ -36,7 +37,7 @@
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
|
||||
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
|
||||
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
|
||||
"build:bundles": "rollup -c ./rollup.config.mjs",
|
||||
"test": "vitest run",
|
||||
@@ -45,18 +46,17 @@
|
||||
"devDependencies": {
|
||||
"@lucide/build-icons": "workspace:*",
|
||||
"@lucide/rollup-plugins": "workspace:*",
|
||||
"@testing-library/jest-dom": "^6.1.4",
|
||||
"@testing-library/vue": "^5.9.0",
|
||||
"@vitejs/plugin-vue2": "2.2.0",
|
||||
"@vue/test-utils": "1.3.0",
|
||||
"rollup": "^3.23.0",
|
||||
"typescript": "^4.9.5",
|
||||
"@testing-library/jest-dom": "^6.1.6",
|
||||
"@testing-library/vue": "^8.0.1",
|
||||
"@vitejs/plugin-vue": "^4.6.2",
|
||||
"@vue/test-utils": "2.4.3",
|
||||
"rollup": "^4.9.2",
|
||||
"rollup-plugin-dts": "^6.1.0",
|
||||
"vite": "5.0.12",
|
||||
"vitest": "^0.32.2",
|
||||
"vue": "2.7.14",
|
||||
"vue-template-compiler": "2.7.14"
|
||||
"vitest": "^1.1.1",
|
||||
"vue": "^3.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.6.12"
|
||||
"vue": ">=3.0.1"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import plugins, { replace } from '@lucide/rollup-plugins';
|
||||
import pkg from './package.json' assert { type: 'json' };
|
||||
import dts from "rollup-plugin-dts";
|
||||
|
||||
const packageName = 'LucideVue';
|
||||
const outputFileName = 'lucide-vue';
|
||||
@@ -56,4 +57,19 @@ const configs = bundles
|
||||
)
|
||||
.flat();
|
||||
|
||||
export default configs;
|
||||
export default [
|
||||
{
|
||||
input: inputs[0],
|
||||
output: [{
|
||||
file: `dist/${outputFileName}.d.ts`, format: "es"
|
||||
}],
|
||||
plugins: [
|
||||
dts({
|
||||
compilerOptions: {
|
||||
preserveSymlinks: false
|
||||
}
|
||||
})
|
||||
],
|
||||
},
|
||||
...configs
|
||||
];
|
||||
1
packages/vue/scripts
Symbolic link
1
packages/vue/scripts
Symbolic link
@@ -0,0 +1 @@
|
||||
../lucide-vue-next/scripts
|
||||
1
packages/vue/src
Symbolic link
1
packages/vue/src
Symbolic link
@@ -0,0 +1 @@
|
||||
../lucide-vue-next/src
|
||||
1
packages/vue/tests
Symbolic link
1
packages/vue/tests
Symbolic link
@@ -0,0 +1 @@
|
||||
../lucide-vue-next/tests
|
||||
@@ -11,7 +11,6 @@
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"skipLibCheck": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"noEmit": true,
|
||||
}
|
||||
}
|
||||
@@ -1,19 +1,11 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue2'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
transformMode: {
|
||||
web: [/\.jsx?$/],
|
||||
},
|
||||
setupFiles: './tests/setupVitest.js',
|
||||
threads: false,
|
||||
isolate: false,
|
||||
},
|
||||
resolve: {
|
||||
conditions: ['development', 'browser'],
|
||||
},
|
||||
});
|
||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
@@ -131,8 +131,8 @@ importers:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
sandpack-vue3:
|
||||
specifier: ^3.1.9
|
||||
version: 3.1.9(@lezer/common@1.2.0)(vue@3.4.13)
|
||||
specifier: 3.1.8
|
||||
version: 3.1.8(@lezer/common@1.2.0)(vue@3.4.13)
|
||||
semver:
|
||||
specifier: ^7.5.2
|
||||
version: 7.5.4
|
||||
@@ -3781,7 +3781,7 @@ packages:
|
||||
mime: 3.0.0
|
||||
dev: true
|
||||
|
||||
/@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0):
|
||||
/@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0):
|
||||
resolution: {integrity: sha512-r4IjdYFthwbCQyvqnSlx0WBHRHi8nBvU+WjJxFUij81qsBfhNudf/XKKmmC2j3m0LaOYUQTf3qiEK1J8lO1sdg==}
|
||||
peerDependencies:
|
||||
'@codemirror/language': ^6.0.0
|
||||
@@ -3790,7 +3790,7 @@ packages:
|
||||
'@lezer/common': ^1.0.0
|
||||
dependencies:
|
||||
'@codemirror/language': 6.10.0
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@codemirror/view': 6.23.0
|
||||
'@lezer/common': 1.2.0
|
||||
dev: false
|
||||
@@ -3807,9 +3807,9 @@ packages:
|
||||
/@codemirror/lang-css@6.2.1(@codemirror/view@6.23.0):
|
||||
resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/language': 6.10.0
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@lezer/common': 1.2.0
|
||||
'@lezer/css': 1.1.3
|
||||
transitivePeerDependencies:
|
||||
@@ -3819,11 +3819,11 @@ packages:
|
||||
/@codemirror/lang-html@6.4.6:
|
||||
resolution: {integrity: sha512-E4C8CVupBksXvgLSme/zv31x91g06eZHSph7NczVxZW+/K+3XgJGWNT//2WLzaKSBoxpAjaOi5ZnPU1SHhjh3A==}
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/lang-css': 6.2.1(@codemirror/view@6.23.0)
|
||||
'@codemirror/lang-javascript': 6.2.1
|
||||
'@codemirror/language': 6.10.0
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@codemirror/view': 6.23.0
|
||||
'@lezer/common': 1.2.0
|
||||
'@lezer/css': 1.1.3
|
||||
@@ -3833,10 +3833,10 @@ packages:
|
||||
/@codemirror/lang-javascript@6.2.1:
|
||||
resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/language': 6.10.0
|
||||
'@codemirror/lint': 6.4.2
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@codemirror/view': 6.23.0
|
||||
'@lezer/common': 1.2.0
|
||||
'@lezer/javascript': 1.4.7
|
||||
@@ -3845,7 +3845,7 @@ packages:
|
||||
/@codemirror/language@6.10.0:
|
||||
resolution: {integrity: sha512-2vaNn9aPGCRFKWcHPFksctzJ8yS5p7YoaT+jHpc0UGKzNuAIx4qy6R5wiqbP+heEEdyaABA582mNqSHzSoYdmg==}
|
||||
dependencies:
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@codemirror/view': 6.23.0
|
||||
'@lezer/common': 1.2.0
|
||||
'@lezer/highlight': 1.1.6
|
||||
@@ -3856,15 +3856,11 @@ packages:
|
||||
/@codemirror/lint@6.4.2:
|
||||
resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
|
||||
dependencies:
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@codemirror/view': 6.23.0
|
||||
crelt: 1.0.6
|
||||
dev: false
|
||||
|
||||
/@codemirror/state@6.2.1:
|
||||
resolution: {integrity: sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==}
|
||||
dev: false
|
||||
|
||||
/@codemirror/state@6.4.0:
|
||||
resolution: {integrity: sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A==}
|
||||
dev: false
|
||||
@@ -19193,8 +19189,8 @@ packages:
|
||||
rimraf: 2.7.1
|
||||
dev: true
|
||||
|
||||
/sandpack-vue3@3.1.9(@lezer/common@1.2.0)(vue@3.4.13):
|
||||
resolution: {integrity: sha512-s/W5I9o1fpQnGiuCy7QcpnwFB/JopwZU2dwI7YXXYFI1FYv21CfI/jz3bDWAN6GzWUt3BIxNFuzzdwqgd5zPWw==}
|
||||
/sandpack-vue3@3.1.8(@lezer/common@1.2.0)(vue@3.4.13):
|
||||
resolution: {integrity: sha512-XdlFSWXLOgpGAeZUUHbOxWYezVQxJOSjz7dlObTx8et9vKAn1lPf4A19qdOykzH13RNTDv0gXflRsXbJLQ4H2w==}
|
||||
engines: {node: '>=16'}
|
||||
peerDependencies:
|
||||
vue: '>=3.2.0'
|
||||
@@ -19202,13 +19198,13 @@ packages:
|
||||
vue:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.2.1)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.0)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)(@lezer/common@1.2.0)
|
||||
'@codemirror/commands': 6.3.3
|
||||
'@codemirror/lang-css': 6.2.1(@codemirror/view@6.23.0)
|
||||
'@codemirror/lang-html': 6.4.6
|
||||
'@codemirror/lang-javascript': 6.2.1
|
||||
'@codemirror/language': 6.10.0
|
||||
'@codemirror/state': 6.2.1
|
||||
'@codemirror/state': 6.4.0
|
||||
'@codemirror/view': 6.23.0
|
||||
'@codesandbox/sandpack-client': 2.11.2
|
||||
'@lezer/highlight': 1.1.6
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { shuffle, readSvgDirectory, getCurrentDirPath } from './helpers.mjs';
|
||||
import { shuffle, readSvgDirectory, getCurrentDirPath, minifySvg } from './helpers.mjs';
|
||||
|
||||
const currentDir = getCurrentDirPath(import.meta.url);
|
||||
const ICONS_DIR = path.resolve(currentDir, '../icons');
|
||||
@@ -17,11 +17,10 @@ const getImageTagsByFiles = (files, getBaseUrl, width) =>
|
||||
files
|
||||
.map((file) => {
|
||||
const svgContent = fs.readFileSync(path.join(process.cwd(), file), 'utf-8');
|
||||
const strippedAttrsSVG = svgContent
|
||||
.replace(/<svg[^>]*>/, '<svg>')
|
||||
.replaceAll(/\n| {2}|\t/g, '');
|
||||
const strippedAttrsSVG = svgContent.replace(/<svg[^>]*>/, '<svg>')
|
||||
const minifiedSvg = minifySvg(strippedAttrsSVG)
|
||||
|
||||
const base64 = Buffer.from(strippedAttrsSVG).toString('base64');
|
||||
const base64 = Buffer.from(minifiedSvg).toString('base64');
|
||||
const url = getBaseUrl(file);
|
||||
const widthAttr = width ? `width="${width}"` : '';
|
||||
|
||||
|
||||
@@ -208,3 +208,17 @@ export const shuffle = (array) => {
|
||||
}
|
||||
return array;
|
||||
};
|
||||
|
||||
/**
|
||||
* Minifies SVG
|
||||
*
|
||||
* @param {string} string
|
||||
* @returns string
|
||||
*/
|
||||
export function minifySvg(string){
|
||||
return string ? string
|
||||
.replace(/\>[\r\n ]+</g, "><")
|
||||
.replace(/(<.*?>)|\s+/g, (m, $1) => $1 || ' ')
|
||||
.trim()
|
||||
: ""
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user