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