{"id":21389837,"url":"https://github.com/warningimhack3r/vite-plugin-lucide-preprocess","last_synced_at":"2026-03-08T14:02:38.573Z","repository":{"id":252581008,"uuid":"840850758","full_name":"WarningImHack3r/vite-plugin-lucide-preprocess","owner":"WarningImHack3r","description":" A Vite plugin to replace imports for Lucide icons","archived":false,"fork":false,"pushed_at":"2024-11-22T08:59:28.000Z","size":76,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-22T09:30:00.614Z","etag":null,"topics":["lucide","lucide-icons","preprocessor","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-lucide-preprocess","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WarningImHack3r.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-10T22:06:22.000Z","updated_at":"2024-11-22T08:58:50.000Z","dependencies_parsed_at":"2024-11-14T20:24:18.155Z","dependency_job_id":"c0e8b318-defb-4553-a5de-a0ce0d730080","html_url":"https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess","commit_stats":null,"previous_names":["warningimhack3r/vite-plugin-lucide-preprocess"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fvite-plugin-lucide-preprocess","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fvite-plugin-lucide-preprocess/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fvite-plugin-lucide-preprocess/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WarningImHack3r%2Fvite-plugin-lucide-preprocess/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WarningImHack3r","download_url":"https://codeload.github.com/WarningImHack3r/vite-plugin-lucide-preprocess/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225901212,"owners_count":17542183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lucide","lucide-icons","preprocessor","vite","vite-plugin"],"created_at":"2024-11-22T13:13:07.459Z","updated_at":"2026-03-08T14:02:38.565Z","avatar_url":"https://github.com/WarningImHack3r.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-lucide-preprocess\n\n[![NPM Version](https://npmx.dev/api/registry/badge/version/vite-plugin-lucide-preprocess)](https://www.npmx.dev/package/vite-plugin-lucide-preprocess#versions)\n[![NPM Downloads](https://npmx.dev/api/registry/badge/downloads-week/vite-plugin-lucide-preprocess)](https://www.npmx.dev/package/vite-plugin-lucide-preprocess)\n[![NPM Type Definitions](https://npmx.dev/api/registry/badge/types/vite-plugin-lucide-preprocess)](https://www.npmx.dev/package/vite-plugin-lucide-preprocess)\n[![NPM License](https://npmx.dev/api/registry/badge/license/vite-plugin-lucide-preprocess)](LICENSE)\n\nA [Vite](https://vite.dev) plugin to tree-shake your [Lucide icons](https://lucide.dev).\n\n## What is this?\n\nIf you want to import Lucide icons in your project, you can (usually — depending on\nthe package) use two methods:\n\n```js\nimport { IconName } from \"@lucide/svelte\";\n// or\nimport IconName from \"@lucide/svelte/icons/icon-name\";\n```\n\nWhile the first method is more convenient (and may be the one used by auto-import features in your editor),\nit is not tree-shakable.  \nIn fact, a single import from `\"lucide-\u003cframework\u003e\"` or `\"@lucide/\u003cframework\u003e\"`\n[will import all icons](https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess/issues/11#issuecomment-2445209558);\nnot ideal for Vite dev server performance and build time.\n\n**This plugin will replace the first method with the second one, so you can keep the convenience of the first method\nwhile benefiting from tree-shaking optimizations.** “Correct” imports will be kept as-is.\n\n\u003e [!NOTE]\n\u003e The plugin is primarily intended for `@lucide/svelte`, but it works with\n\u003e any Lucide package using Vite.\n\u003e If it doesn't support a Lucide implementation,\n\u003e [please open an issue](https://github.com/WarningImHack3r/vite-plugin-lucide-preprocess).\n\n### Credits and opinion\n\nI got the idea from [Phosphor Icons' optimizer](https://github.com/haruaki07/phosphor-svelte#import-optimizer).\nHowever, this plugin is written from scratch and is not based on the Phosphor one, even though the technique is\nessentially the same.\n\nContrary to the experimental version of Phosphor Icons' implementation, this plugin is\na Vite plugin and not a Svelte one, it is more generic and can be used with any framework.\nAdditionally, it doesn't suffer from the limitations of the Svelte plugin, preventing the old Phosphor\noptimizer from working without disabling the native Vite optimizations of `phosphor-svelte`.\n\nThis should subjectively be a feature embedded in Lucide itself (`@lucide/svelte/preprocessor`),\nbut I don't know if it will ever be implemented.\n[I opened an issue](https://github.com/lucide-icons/lucide/issues/2295) on the `lucide-icons` repository to discuss\nthis.\n\n## Auto-updater\n\nAs of version 1.1.0, the plugin includes an auto-updater.\nIt helps support the renamed and deprecated icons by automatically updating the plugin when necessary.\n\nIf you use a recently deprecated icon and can't make your build work, please wait for a few hours for the plugin\nto update itself.\nIf the problem persists, please open an issue in this repository.\n\nMore information about the auto-updater can be found in WarningImHack3r/vite-plugin-lucide-preprocess#6.\n\n## Installation\n\nInstall the plugin with your package manager of choice:\n\n```bash\npnpm i -D vite-plugin-lucide-preprocess\n```\n\nThen, add it to your `vite.config.js`/`.ts`:\n\n```js\nimport { defineConfig } from \"vite\";\nimport lucidePreprocess from \"vite-plugin-lucide-preprocess\";\n\nexport default defineConfig({\n\tplugins: [lucidePreprocess() /* , ... */]\n});\n```\n\n\u003e [!WARNING]\n\u003e Make sure to add the plugin **before** any other preprocessors in the `plugins` array.\n\n## Options\n\nThe plugin optionally accepts an object with the following options:\n\n- `importMode` (default: `\"esm\"`): The import mode for CommonJS-compatible frameworks.\n  - `\"esm\"`: Import the icons as ES modules.\n  - `\"cjs\"`: Import the icons as CommonJS modules.\n\n  This option is useful if you use a CommonJS-compatible framework like React or Vue.\n  It will automatically replace the imports with the correct syntax depending on whether\n  your framework supports CJS or not.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarningimhack3r%2Fvite-plugin-lucide-preprocess","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarningimhack3r%2Fvite-plugin-lucide-preprocess","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarningimhack3r%2Fvite-plugin-lucide-preprocess/lists"}