vite-plugin-lucide-preprocess 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -6
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,21 +9,43 @@ A [Vite](https://vitejs.dev) plugin to replace imports for [Lucide icons](https:
|
|
|
9
9
|
|
|
10
10
|
## What is this?
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
### Motivation
|
|
13
|
+
|
|
14
|
+
If you want to import Lucide icons in your project, you can use two methods
|
|
15
|
+
since [this PR on Lucide](https://github.com/lucide-icons/lucide/pull/1707) (at least for `lucide-svelte`):
|
|
14
16
|
|
|
15
17
|
```js
|
|
16
18
|
import { IconName } from "lucide-svelte";
|
|
17
|
-
// or
|
|
19
|
+
// or
|
|
18
20
|
import IconName from "lucide-svelte/icons/icon-name";
|
|
19
21
|
```
|
|
20
22
|
|
|
21
|
-
While the first method is more convenient (and may be the one used by auto-import features in your editor),
|
|
23
|
+
While the first method is more convenient (and may be the one used by auto-import features in your editor),
|
|
24
|
+
it is not tree-shakable.
|
|
25
|
+
In fact, a single import from `"lucide-<framework>"` will import all icons, not ideal for performance and bundle size.
|
|
22
26
|
|
|
23
|
-
This plugin will replace the first method with the second one, so you can keep the convenience of the first method
|
|
27
|
+
**This plugin will replace the first method with the second one, so you can keep the convenience of the first method
|
|
28
|
+
while benefiting from tree-shaking optimizations.** “Correct” imports will be kept as-is.
|
|
24
29
|
|
|
25
30
|
> [!NOTE]
|
|
26
|
-
>
|
|
31
|
+
> The plugin is primarily intended for `lucide-svelte`, but it should work with
|
|
32
|
+
> any Lucide package using Vite if they follow the same structure.
|
|
33
|
+
|
|
34
|
+
### Credits and opinion
|
|
35
|
+
|
|
36
|
+
I got the idea
|
|
37
|
+
from [Phosphor Icons' optimizer](https://github.com/haruaki07/phosphor-svelte#import-optimizer-experimental).
|
|
38
|
+
However, this plugin is written from scratch and is not based on the Phosphor one (even though the technique is
|
|
39
|
+
essentially the same).
|
|
40
|
+
|
|
41
|
+
As it is a Vite plugin and not a Svelte one, it is more generic and can be used with any framework.
|
|
42
|
+
Additionally, it doesn't suffer from the limitations of the Svelte plugin, preventing the Phosphor
|
|
43
|
+
optimizer from working without disabling the native Vite optimizations of `phosphor-svelte`.
|
|
44
|
+
|
|
45
|
+
In my opinion, this should be a feature embedded in Lucide itself (`lucide-svelte/preprocessor`),
|
|
46
|
+
but I don't know if it will ever be implemented.
|
|
47
|
+
[I opened an issue](https://github.com/lucide-icons/lucide/issues/2295) on the `lucide-icons` repository to discuss
|
|
48
|
+
this.
|
|
27
49
|
|
|
28
50
|
## Installation
|
|
29
51
|
|
package/dist/index.js
CHANGED
|
@@ -26,7 +26,7 @@ export default function () {
|
|
|
26
26
|
const modules = modulesStr
|
|
27
27
|
.split(",")
|
|
28
28
|
.map(m => m.trim())
|
|
29
|
-
.filter(m => !m.startsWith("type"));
|
|
29
|
+
.filter(m => !!m && !m.startsWith("type"));
|
|
30
30
|
return modules
|
|
31
31
|
.map(m => {
|
|
32
32
|
const dashedModule = m.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? "-" : "") + match.toLowerCase());
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,CAAC,OAAO;IACb,OAAO;QACN,IAAI,EAAE,+BAA+B;QACrC,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YACzB,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC9C,OAAO;YACR,CAAC;YACD,OAAO;gBACN,IAAI,EAAE,IAAI,CAAC,OAAO,CACjB,kEAAkE;gBAClE;;;;;;;;mBAQG;gBACH,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;oBAC/D,MAAM,OAAO,GAAG,UAAU;yBACxB,KAAK,CAAC,GAAG,CAAC;yBACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;yBAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,gBAAgB,EAAE,eAAe,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,CAAC,OAAO;IACb,OAAO;QACN,IAAI,EAAE,+BAA+B;QACrC,OAAO,EAAE,KAAK;QACd,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;YACzB,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC9C,OAAO;YACR,CAAC;YACD,OAAO;gBACN,IAAI,EAAE,IAAI,CAAC,OAAO,CACjB,kEAAkE;gBAClE;;;;;;;;mBAQG;gBACH,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;oBAC/D,MAAM,OAAO,GAAG,UAAU;yBACxB,KAAK,CAAC,GAAG,CAAC;yBACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;yBAClB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;oBAC5C,OAAO,OAAO;yBACZ,GAAG,CAAC,CAAC,CAAC,EAAE;wBACR,MAAM,YAAY,GAAG,CAAC,CAAC,OAAO,CAC7B,QAAQ,EACR,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAChE,CAAC;wBACF,OAAO,GAAG,cAAc,UAAU,CAAC,SAAS,KAAK,UAAU,SAAS,UAAU,YAAY,GAAG,KAAK,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC;oBAC7H,CAAC,CAAC;yBACD,IAAI,CAAC,IAAI,CAAC,CAAC;gBACd,CAAC,CACD;aACD,CAAC;QACH,CAAC;KACD,CAAC;AACH,CAAC"}
|