Lucide Vue Package (#174)

* add configs * Add vue components * Add documentation * add alpha release version * improve npm ignore files * add tests * Make style and class attrs work * 📦 bump version * Add Icon suffix for component names * bump version * Add icon component example * remove space * improvements package.json * update tests * update workflow
2025-12-24 09:29:22 +01:00 · 2021-02-22 20:26:38 +01:00
parent acea1b4116
commit 4024911219
33 changed files with 4551 additions and 74 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -33,6 +33,9 @@ jobs:
      - name: Build lucide package
        run: yarn build

+      - name: Test lucide package
+        run: yarn test
+
      # Build lucide-react
      - name: Install Dependencies lucide-react
        run: yarn --pure-lockfile
@@ -42,6 +45,23 @@ jobs:
        run: yarn build
        working-directory: packages/lucide-react

+      - name: Test lucide-react
+        run: yarn test
+        working-directory: packages/lucide-react
+
+      # Build lucide-vue
+      - name: Install Dependencies lucide-vue
+        run: yarn --pure-lockfile
+        working-directory: packages/lucide-vue
+
+      - name: Build lucide-vue
+        run: yarn build
+        working-directory: packages/lucide-vue
+
+      - name: Test lucide-vue
+        run: yarn test
+        working-directory: packages/lucide-vue
+
      # Publish lucide
      - name: Set package.json version lucide
        run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version
@@ -58,10 +78,20 @@ jobs:
        run: yarn publish
        working-directory: packages/lucide-react

+      # Publish lucide-vue
+      - name: Set package.json version lucide-vue
+        run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version
+        working-directory: packages/lucide-vue
+
+      - name: publish lucide-vue
+        run: yarn publish
+        working-directory: packages/lucide-vue
+
      - name: Commit package.json
        run: |
          git add package.json
          git add packages/lucide-react/package.json
+          git add packages/lucide-vue/package.json
          git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
            commit -m ":package: Bump version to ${{ steps.get_version.outputs.VERSION }}" --no-verify --quiet
          git remote set-url --push origin https://lucide-bot:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git
--- a/.npmignore
+++ b/.npmignore
@@ -5,3 +5,12 @@ node_modules
 tests
 scripts
 site
+src
+build
+babel.config.js
+categories.json
+jest.config.js
+netlify.toml
+rollup.config.js
+rollup.plugins.js
+tags.json
--- a/icons/image-plus.svg
+++ b/icons/image-plus.svg
@@ -9,9 +9,9 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M21 11V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H13" />
-  <path d="M8.5 10C9.32843 10 10 9.32843 10 8.5C10 7.67157 9.32843 7 8.5 7C7.67157 7 7 7.67157 7 8.5C7 9.32843 7.67157 10 8.5 10Z" />
-  <path d="M21 15L16 10L5 21" />
-  <path d="M19 2V8" />
-  <path d="M22 5H16" />
+  <path d="M21 11v8a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h8" />
+  <path d="M8.5 10a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
+  <path d="M21 15l-5-5L5 21" />
+  <path d="M19 2v6" />
+  <path d="M22 5h-6" />
 </svg>
--- a/icons/pencil.svg
+++ b/icons/pencil.svg
@@ -1,8 +1,8 @@
 <svg
  width="24"
  height="24"
-  viewBox="0 0 24 24"
  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
--- a/icons/webcam.svg
+++ b/icons/webcam.svg
@@ -11,5 +11,5 @@
 >
  <circle cx="12" cy="10" r="8" />
  <circle cx="12" cy="10" r="3" />
-  <path d="M12 22V18M7 22H12H7ZM17 22H12H17Z"  />
+  <path d="M12 22v-4m-5 4h5-5zm10 0h-5 5z" />
 </svg>
--- a/package.json
+++ b/package.json
@@ -4,9 +4,10 @@
  "version": "0.13.0",
  "license": "ISC",
  "homepage": "https://lucide.dev",
-  "repository": "github:lucide-icons/lucide",
-  "bugs": {
-    "url": "https://github.com/lucide-icons/lucide/issues"
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git"
  },
  "amdName": "lucide",
  "source": "build/lucide.js",
--- a/packages/lucide-react/.npmignore
+++ b/packages/lucide-react/.npmignore
@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js
--- a/packages/lucide-react/README.md
+++ b/packages/lucide-react/README.md
@@ -15,7 +15,7 @@ npm install lucide-react
 ## How to use

 It's build with ESmodules so it's completely threeshakable.
-Each icon can be imported as an react component.
+Each icon can be imported as a react component.

 ### Example

@@ -56,7 +56,7 @@ const App = () => {

 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.
+> :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

--- a/packages/lucide-react/babel.config.js
+++ b/packages/lucide-react/babel.config.js
@@ -1,4 +1,3 @@
-// module.exports = require('../../babel.config');
 module.exports = {
  presets: ['react-app'],
 };
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -3,35 +3,39 @@
  "description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
  "version": "0.13.0",
  "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/lucide-react"
+  },
+  "author": "Eric Fennis",
  "amdName": "lucide-react",
-  "source": "build/lucide-react.js",
  "main": "dist/cjs/lucide-react.js",
  "main:umd": "dist/umd/lucide-react.js",
  "module": "dist/esm/lucide-react.js",
  "unpkg": "dist/umd/lucide-react.min.js",
-  "repository": "github:lucide-icons/lucide",
-  "author": "Eric Fennis",
  "scripts": {
    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
    "clean": "rm -rf dist && rm -rf build",
    "build:move": "cp -av src build",
-    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/build --templateSrc=../packages/lucide-react/scripts/exportTemplate --camelizeAttrs --renderUniqueKey",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/build --templateSrc=../packages/lucide-react/scripts/exportTemplate --camelizeAttrs --noDefaultAttrs --renderUniqueKey",
    "build:es": "yarn --cwd ../../ babel packages/lucide-react/build -d packages/lucide-react/dist/esm",
    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-react/rollup.config.js",
    "test": "jest"
  },
  "dependencies": {
    "prop-types": "^15.7.2",
-    "react": "^17.0.1"
+    "react": "^16.5.1"
  },
  "devDependencies": {
    "babel-preset-react-app": "^10.0.0",
    "jest": "^26.6.3",
-    "lucide": "file:../..",
-    "react-test-renderer": "^17.0.1"
+    "react-test-renderer": "^16.5.1"
  },
  "peerDependencies": {
    "prop-types": "^15.7.2",
-    "react": "^17.0.1"
+    "react": "^16.5.1"
  }
 }
--- a/packages/lucide-react/rollup.config.js
+++ b/packages/lucide-react/rollup.config.js
@@ -1,7 +1,8 @@
-const plugins = require('lucide/rollup.plugins');
+const plugins = require('../../rollup.plugins');
 const pkg = require('./package.json');

-const outputFileName = pkg.name;
+const packageName = 'LucideReact';
+const outputFileName = 'lucide-react';
 const rootDir = 'packages/lucide-react'; // It runs from the root
 const outputDir = `${rootDir}/dist`;
 const inputs = [`${rootDir}/build/lucide-react.js`];
@@ -31,7 +32,7 @@ const configs = bundles
      plugins: plugins(pkg, minify),
      external: ['react', 'prop-types'],
      output: {
-        name: outputFileName,
+        name: packageName,
        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
        format,
        sourcemap: true,
--- a/packages/lucide-react/scripts/exportTemplate.js
+++ b/packages/lucide-react/scripts/exportTemplate.js
@@ -1,7 +1,8 @@
 export default ({ componentName, node }) => `
 import createReactComponent from '../createReactComponent';
+import defaultAttributes from '../defaultAttributes';

-const ${componentName} = createReactComponent('${componentName}', ${node});
+const ${componentName} = createReactComponent('${componentName}', ['svg', defaultAttributes, ${node}]);

 export default ${componentName};
 `;
--- a/packages/lucide-react/src/createReactComponent.js
+++ b/packages/lucide-react/src/createReactComponent.js
@@ -11,7 +11,7 @@ export default (iconName, [tag, attrs, children]) => {
          ...attrs,
          width: size,
          height: size,
-          color,
+          stroke: color,
          strokeWidth,
          ...rest,
        },
--- a/packages/lucide-react/src/defaultAttributes.js
+++ b/packages/lucide-react/src/defaultAttributes.js
@@ -0,0 +1,11 @@
+export default {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+};
--- a/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
+++ b/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
@@ -2,7 +2,6 @@

 exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
 <svg
-  color="currentColor"
  fill="none"
  height={48}
  stroke="red"
@@ -50,7 +49,6 @@ exports[`Using lucide icon components should adjust the size, stroke color and s

 exports[`Using lucide icon components should render an component 1`] = `
 <svg
-  color="currentColor"
  fill="none"
  height={24}
  stroke="currentColor"
--- a/packages/lucide-react/yarn.lock
+++ b/packages/lucide-react/yarn.lock
@@ -3246,9 +3246,6 @@ lru-cache@^6.0.0:
  dependencies:
    yallist "^4.0.0"

-"lucide@file:../..":
-  version "0.11.0"
-
 make-dir@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -3661,7 +3658,7 @@ prompts@^2.0.1:
    kleur "^3.0.3"
    sisteransi "^1.0.5"

-prop-types@^15.7.2:
+prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -3693,41 +3690,34 @@ qs@~6.5.2:
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
  integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==

-"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
-  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
-
-react-is@^16.8.1:
+react-is@^16.8.1, react-is@^16.8.6:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

-react-shallow-renderer@^16.13.1:
-  version "16.14.1"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
-  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+react-is@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
+  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+
+react-test-renderer@^16.5.1:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
+  integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
  dependencies:
    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.19.1"

-react-test-renderer@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
-  integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^17.0.1"
-    react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.1"
-
-react@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+react@^16.5.1:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
+    prop-types "^15.6.2"

 read-pkg-up@^7.0.1:
  version "7.0.1"
@@ -3962,10 +3952,10 @@ saxes@^5.0.0:
  dependencies:
    xmlchars "^2.2.0"

-scheduler@^0.20.1:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
-  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
--- a/packages/lucide-vue/.npmignore
+++ b/packages/lucide-vue/.npmignore
@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js
--- a/packages/lucide-vue/README.md
+++ b/packages/lucide-vue/README.md
@@ -0,0 +1,103 @@
+# Lucide Vue
+
+Use the lucide icon library in you Vue app.
+
+## Installation
+
+```sh
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+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
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *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>
+```
--- a/packages/lucide-vue/babel.config.js
+++ b/packages/lucide-vue/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};
--- a/packages/lucide-vue/jest.config.js
+++ b/packages/lucide-vue/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
+  moduleFileExtensions: ['js'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
+  transformIgnorePatterns: [`/node_modules`],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+};
--- a/packages/lucide-vue/package.json
+++ b/packages/lucide-vue/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "lucide-vue",
+  "version": "0.13.0-beta.1",
+  "author": "Eric Fennis",
+  "description": "Lucide Vue Package",
+  "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/lucide-vue"
+  },
+  "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",
+  "dependencies": {
+    "vue": "^2.6.12"
+  },
+  "scripts": {
+    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
+    "clean": "rm -rf dist && rm -rf build",
+    "build:move": "cp -av src build",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue/build --templateSrc=../packages/lucide-vue/scripts/exportTemplate --noDefaultAttrs",
+    "build:es": "yarn --cwd ../../ babel packages/lucide-vue/build -d packages/lucide-vue/dist/esm",
+    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-vue/rollup.config.js",
+    "test": "jest",
+    "test:watch": "jest --watchAll"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^1.1.2",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "jest-serializer-vue": "^2.0.2",
+    "vue-jest": "^3.0.7",
+    "vue-template-compiler": "^2.6.12"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.12"
+  }
+}
--- a/packages/lucide-vue/rollup.config.js
+++ b/packages/lucide-vue/rollup.config.js
@@ -0,0 +1,47 @@
+const plugins = require('../../rollup.plugins');
+const pkg = require('./package.json');
+
+const packageName = 'LucideVue';
+const outputFileName = 'lucide-vue';
+const rootDir = 'packages/lucide-vue'; // It runs from the root
+const outputDir = `${rootDir}/dist`;
+const inputs = [`${rootDir}/build/lucide-vue.js`];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify }) =>
+    inputs.map(input => ({
+      input,
+      plugins: plugins(pkg, minify),
+      external: ['vue'],
+      output: {
+        name: packageName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          vue: 'vue',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;
--- a/packages/lucide-vue/scripts/exportTemplate.js
+++ b/packages/lucide-vue/scripts/exportTemplate.js
@@ -0,0 +1,8 @@
+export default ({ componentName, node }) => `
+import createVueComponent from '../createVueComponent';
+import defaultAttributes from '../defaultAttributes';
+
+const ${componentName} = createVueComponent('${componentName}Icon', ['svg', defaultAttributes, ${node}]);
+
+export default ${componentName};
+`;
--- a/packages/lucide-vue/src/createVueComponent.js
+++ b/packages/lucide-vue/src/createVueComponent.js
@@ -0,0 +1,47 @@
+export default (iconName, [tag, defaultAttrs, children]) => ({
+  name: iconName,
+  functional: true,
+  props: {
+    color: {
+      type: String,
+      default: 'currentColor',
+    },
+    size: {
+      type: Number,
+      default: 24,
+    },
+    strokeWidth: {
+      type: Number,
+      default: 2,
+    },
+    defaultClass: {
+      type: String,
+      default: 'lucide-icon',
+    },
+  },
+  render(
+    createElement,
+    {
+      props: { color, size, strokeWidth, defaultClass },
+      data,
+    },
+  ) {
+    return createElement(
+      tag,
+      {
+        // eslint-disable-next-line prettier/prettier
+        class: [defaultClass, data.class, data.staticClass, data.attrs && data.attrs.class].filter(Boolean),
+        style: [data.style, data.staticStyle, data.attrs && data.attrs.style].filter(Boolean),
+        attrs: {
+          ...defaultAttrs,
+          width: size,
+          height: size,
+          stroke: color,
+          'stroke-width': strokeWidth,
+          ...data.attrs,
+        },
+      },
+      children.map(([childTag, childAttrs]) => createElement(childTag, { attrs: childAttrs })),
+    );
+  },
+});
--- a/packages/lucide-vue/src/defaultAttributes.js
+++ b/packages/lucide-vue/src/defaultAttributes.js
@@ -0,0 +1,11 @@
+export default {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  'stroke-width': 2,
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
+};
--- a/packages/lucide-vue/src/icons/index.js
+++ b/packages/lucide-vue/src/icons/index.js
@@ -0,0 +1,5 @@
+/*
+ Icons exports.
+
+ Will be generated
+*/
--- a/packages/lucide-vue/src/lucide-vue.js
+++ b/packages/lucide-vue/src/lucide-vue.js
@@ -0,0 +1 @@
+export * from './icons';
--- a/packages/lucide-vue/tests/snapshots/lucide-vue.spec.js.snap
+++ b/packages/lucide-vue/tests/snapshots/lucide-vue.spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Using lucide icon components should add a class to the element 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon my-icon">
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+  <line x1="9" y1="9" x2="9.01" y2="9"></line>
+  <line x1="15" y1="9" x2="15.01" y2="9"></line>
+</svg>
+`;
+
+exports[`Using lucide icon components should add a style attribute to the element 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute" class="lucide-icon">
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+  <line x1="9" y1="9" x2="9.01" y2="9"></line>
+  <line x1="15" y1="9" x2="15.01" y2="9"></line>
+</svg>
+`;
+
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon">
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+  <line x1="9" y1="9" x2="9.01" y2="9"></line>
+  <line x1="15" y1="9" x2="15.01" y2="9"></line>
+</svg>
+`;
+
+exports[`Using lucide icon components should render an component 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon">
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+  <line x1="9" y1="9" x2="9.01" y2="9"></line>
+  <line x1="15" y1="9" x2="15.01" y2="9"></line>
+</svg>
+`;
--- a/packages/lucide-vue/tests/lucide-vue.spec.js
+++ b/packages/lucide-vue/tests/lucide-vue.spec.js
@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils'
+import { Smile } from '..'
+
+describe('Using lucide icon components', () => {
+  it('should render an component', () => {
+    const wrapper = mount(Smile)
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should adjust the size, stroke color and stroke width', () => {
+    const wrapper = mount(Smile, {
+      propsData: {
+        size: 48,
+        stroke: 'red',
+        strokeWidth: 4
+      }
+    })
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+
+  it('should add a class to the element', () => {
+    const wrapper = mount(Smile, {
+      attrs: {
+        class: "my-icon"
+      }
+    })
+
+    expect(wrapper).toMatchSnapshot();
+    expect(String(wrapper.classes())).toBe(String(['lucide-icon', 'my-icon']))
+  });
+
+  it('should add a style attribute to the element', () => {
+    const wrapper = mount(Smile, {
+      attrs: {
+        style: 'position: absolute',
+      }
+
+    })
+
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.attributes('style')).toContain('position: absolute')
+  });
+});
--- a/packages/lucide-vue/yarn.lock
+++ b/packages/lucide-vue/yarn.lock
--- a/scripts/render/renderIconNodes.js
+++ b/scripts/render/renderIconNodes.js
@@ -38,13 +38,15 @@ export default (iconsObject, options) => {
      ];
    });

-    iconNodes[icon] = [
+    iconNodes[icon] = !options.noDefaultAttrs
+      ? [
          'svg',
          {
            ...(options.camelizeAttrs ? camelizeAttrs(DEFAULT_ATTRS) : DEFAULT_ATTRS),
          },
          children,
-    ];
+        ]
+      : children;
  });

  return iconNodes;
--- a/src/defaultAttributesCamelized.js
+++ b/src/defaultAttributesCamelized.js
@@ -0,0 +1,11 @@
+export default {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+};