From 7bbb1e1feabef136e8f8e5353d4d837f6c705b8b Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Thu, 11 Sep 2025 14:38:34 +0200 Subject: [PATCH] feat(@lucide/vue): Rename Vue package name to `@lucide/vue` (#3337) * Remove old vue 2 package * Add @lucide/vue package * Remove old vue 2 doc * Update docs * Adjust export template * Adjust vue package! * Fix tests * Format code * Update packages/vue/src/Icon.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Adjust vue package in docs * Update deadlinks --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .github/workflows/lucide-vue.yml | 43 + .github/workflows/release.yml | 1 + docs/.vitepress/data/packageData.json | 16 +- .../lib/codeExamples/createCodeExamples.ts | 2 +- docs/.vitepress/sidebar.ts | 2 +- .../home/HomePackagesSection.data.ts | 4 +- docs/guide/installation.md | 21 +- docs/guide/packages/lucide-static.md | 9 +- docs/guide/packages/lucide-vue-next.md | 141 -- docs/guide/packages/lucide-vue.md | 101 +- docs/vercel.json | 5 + packages/lucide-preact/package.json | 2 +- packages/lucide-react-native/package.json | 2 +- packages/lucide-react/package.json | 2 +- packages/lucide-solid/package.json | 2 +- packages/lucide-svelte/package.json | 2 +- packages/lucide-vue-next/package.json | 2 +- .../lucide-vue-next/src/createLucideIcon.ts | 14 +- packages/lucide-vue-next/tsconfig.json | 1 + packages/lucide-vue/nuxt.js | 11 - packages/lucide-vue/src/aliases/index.ts | 1 - packages/lucide-vue/src/createLucideIcon.ts | 66 - packages/lucide-vue/src/lucide-vue.ts | 3 - packages/lucide-vue/tests/lucide-vue.spec.ts | 132 -- packages/lucide-vue/tests/setupVitest.js | 1 - packages/lucide-vue/vitest.config.ts | 19 - packages/svelte/package.json | 2 +- packages/{lucide-vue => vue}/README.md | 25 +- packages/{lucide-vue => vue}/package.json | 38 +- .../{lucide-vue => vue}/rollup.config.mjs | 57 +- .../scripts/exportTemplate.mts} | 17 +- packages/vue/src/Icon.ts | 54 + packages/vue/src/aliases/index.ts | 3 + packages/vue/src/createLucideIcon.ts | 28 + .../src/defaultAttributes.ts | 4 +- .../{lucide-vue => vue}/src/icons/.gitkeep | 0 packages/vue/src/lucide-vue.prefixed.ts | 6 + packages/vue/src/lucide-vue.suffixed.ts | 6 + packages/vue/src/lucide-vue.ts | 7 + packages/vue/src/types.ts | 13 + packages/vue/tests/Icon.spec.ts | 35 + .../vue/tests/__snapshots__/Icon.spec.ts.snap | 29 + .../lucide-vue-next.spec.ts.snap | 197 +++ .../__snapshots__/lucide-vue.spec.ts.snap | 34 +- packages/vue/tests/lucide-vue.spec.ts | 183 +++ packages/vue/tests/setupVitest.js | 7 + packages/vue/tests/testIconNodes.ts | 22 + packages/{lucide-vue => vue}/tsconfig.json | 3 +- packages/vue/vitest.config.mts | 11 + pnpm-lock.yaml | 1452 +++-------------- 50 files changed, 1110 insertions(+), 1728 deletions(-) create mode 100644 .github/workflows/lucide-vue.yml delete mode 100644 docs/guide/packages/lucide-vue-next.md delete mode 100644 packages/lucide-vue/nuxt.js delete mode 100644 packages/lucide-vue/src/aliases/index.ts delete mode 100644 packages/lucide-vue/src/createLucideIcon.ts delete mode 100644 packages/lucide-vue/src/lucide-vue.ts delete mode 100644 packages/lucide-vue/tests/lucide-vue.spec.ts delete mode 100644 packages/lucide-vue/tests/setupVitest.js delete mode 100644 packages/lucide-vue/vitest.config.ts rename packages/{lucide-vue => vue}/README.md (69%) rename packages/{lucide-vue => vue}/package.json (66%) rename packages/{lucide-vue => vue}/rollup.config.mjs (52%) rename packages/{lucide-vue/scripts/exportTemplate.mjs => vue/scripts/exportTemplate.mts} (57%) create mode 100644 packages/vue/src/Icon.ts create mode 100644 packages/vue/src/aliases/index.ts create mode 100644 packages/vue/src/createLucideIcon.ts rename packages/{lucide-vue => vue}/src/defaultAttributes.ts (77%) rename packages/{lucide-vue => vue}/src/icons/.gitkeep (100%) create mode 100644 packages/vue/src/lucide-vue.prefixed.ts create mode 100644 packages/vue/src/lucide-vue.suffixed.ts create mode 100644 packages/vue/src/lucide-vue.ts create mode 100644 packages/vue/src/types.ts create mode 100644 packages/vue/tests/Icon.spec.ts create mode 100644 packages/vue/tests/__snapshots__/Icon.spec.ts.snap create mode 100644 packages/vue/tests/__snapshots__/lucide-vue-next.spec.ts.snap rename packages/{lucide-vue => vue}/tests/__snapshots__/lucide-vue.spec.ts.snap (82%) create mode 100644 packages/vue/tests/lucide-vue.spec.ts create mode 100644 packages/vue/tests/setupVitest.js create mode 100644 packages/vue/tests/testIconNodes.ts rename packages/{lucide-vue => vue}/tsconfig.json (80%) create mode 100644 packages/vue/vitest.config.mts diff --git a/.github/workflows/lucide-vue.yml b/.github/workflows/lucide-vue.yml new file mode 100644 index 000000000..a4694f85c --- /dev/null +++ b/.github/workflows/lucide-vue.yml @@ -0,0 +1,43 @@ +name: Lucide Vue checks + +on: + pull_request: + paths: + - packages/lucide-vue/** + - packages/shared/** + - tools/build-icons/** + - tools/rollup-plugins/** + - pnpm-lock.yaml + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v4 + - uses: actions/setup-node@v4 + with: + cache: 'pnpm' + node-version-file: 'package.json' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Build + run: pnpm --filter @lucide/vue build + + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v4 + - uses: actions/setup-node@v4 + with: + cache: 'pnpm' + node-version-file: 'package.json' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Test + run: pnpm --filter @lucide/vue test diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 7e1371df2..3c2a23f3a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -55,6 +55,7 @@ jobs: 'lucide-svelte', '@lucide/astro', '@lucide/svelte', + '@lucide/vue', ] steps: - uses: actions/checkout@v4 diff --git a/docs/.vitepress/data/packageData.json b/docs/.vitepress/data/packageData.json index 6ad333133..9027c2c75 100644 --- a/docs/.vitepress/data/packageData.json +++ b/docs/.vitepress/data/packageData.json @@ -31,20 +31,12 @@ } ] }, - "lucide-vue-next": { + "@lucide/vue": { "order": 2, - "icon": "vue-next", + "icon": "vue", + "docsAlias": "lucide-vue", + "packageDirname": "vue", "shields": [ - { - "alt": "npm", - "src": "https://img.shields.io/npm/v/lucide-vue-next", - "href": "https://www.npmjs.com/package/lucide-vue-next" - }, - { - "alt": "npm", - "src": "https://img.shields.io/npm/dw/lucide-vue-next", - "href": "https://www.npmjs.com/package/lucide-vue-next" - } ] }, "lucide-svelte": { diff --git a/docs/.vitepress/lib/codeExamples/createCodeExamples.ts b/docs/.vitepress/lib/codeExamples/createCodeExamples.ts index 0539dd37b..33ac112f3 100644 --- a/docs/.vitepress/lib/codeExamples/createCodeExamples.ts +++ b/docs/.vitepress/lib/codeExamples/createCodeExamples.ts @@ -37,7 +37,7 @@ export default App; language: 'vue', title: 'Vue', code: ` ``` +## With Lucide lab or custom icons + +[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library. + +They can be used by using the `Icon` component. +All props like regular lucide icons can be passed to adjust the icon appearance. + +### Using the `Icon` component + +This creates a single icon based on the iconNode passed and renders a Lucide icon component. + +```vue + + + +``` + ## One generic icon component It is possible to create one generic icon component to load icons, but it is not recommended. @@ -84,30 +100,37 @@ The example below imports all ES Modules, so exercise caution when using it. Imp ### Icon Component Example ```vue - + + + ``` -#### Using the Icon Component +### Using the Icon Component + +All other props listed above also work on the `Icon` Component. ```vue