create new vue directory

packages/vue/README.md

@@ -0,0 +1,106 @@
+# Lucide Vue
+
+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 3, For Vue 2 got to [lucide-vue](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue)
+
+## Installation
+
+```sh
+yarn add @lucide/vue
+```
+
+or
+
+```sh
+npm install @lucide/vue
+```
+
+## How to use
+
+It's build with ESmodules so it's completely tree-shakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+```vue
+<template>
+  <Camera color="red" :size="32" />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from '@lucide/vue';
+
+export default {
+  name: 'My Component',
+  components: { Camera }
+};
+</script>
+```
+
+### Props
+
+|  name                   |   type    |  default     |
+| ----------------------- | --------- | ------------ |
+| `size`                  | *number*  | 24           |
+| `color`                 | *string*  | currentColor |
+| `stroke-width`          | *number*  | 2            |
+| `absolute-stroke-width` | *boolean* | false        |
+| `default-class`         | *string*  | lucide-icon  |
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+```vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+```vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from '@lucide/vue';
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    }
+  }
+};
+</script>
+```
+
+##### Then you can use it like this
+
+```vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

packages/vue/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@lucide/vue",
+  "version": "0.0.1",
+  "author": "Eric Fennis",
+  "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/vue"
+  },
+  "keywords": [
+    "Lucide",
+    "Vue",
+    "Feather",
+    "Icons",
+    "Icon",
+    "SVG",
+    "Feather Icons",
+    "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",
+  "typings": "dist/lucide-vue.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "nuxt.js"
+  ],
+  "scripts": {
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
+    "copy:license": "cp ../../LICENSE ./LICENSE",
+    "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",
+    "version": "pnpm version --git-tag-version=false"
+  },
+  "devDependencies": {
+    "@lucide/build-icons": "workspace:*",
+    "@lucide/rollup-plugins": "workspace:*",
+    "@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": "^1.1.1",
+    "vue": "^3.0.1"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.1"
+  }
+}

packages/vue/rollup.config.mjs

@@ -0,0 +1,75 @@
+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';
+const outputDir = 'dist';
+const inputs = ['src/lucide-vue.ts'];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+    preserveModules: true,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
+    inputs.map(input => ({
+      input,
+      plugins: plugins(pkg, minify),
+      external: ['vue'],
+      output: {
+        name: packageName,
+        ...(preserveModules
+          ? {
+              dir: `${outputDir}/${format}`,
+            }
+          : {
+              file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+            }),
+        format,
+        preserveModules,
+        sourcemap: true,
+        globals: {
+          vue: 'vue',
+        },
+      },
+    })),
+  )
+  .flat();
+
+  export default [
+    {
+      input: inputs[0],
+      output: [{
+        file: `dist/${outputFileName}.d.ts`, format: "es"
+      }],
+      plugins: [
+        dts({
+          compilerOptions: {
+            preserveSymlinks: false
+          }
+        })
+      ],
+    },
+    ...configs
+  ];

packages/vue/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+  }
+}

packages/vue/vitest.config.mts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './tests/setupVitest.js',
+  },
+});