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

.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="[email protected]" \
             commit -m ":package: Bump version to ${{ steps.get_version.outputs.VERSION }}" --no-verify --quiet
           git remote set-url --push origin https://lucide-bot:[email protected]/$GITHUB_REPOSITORY.git

.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

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",

packages/lucide-react/.npmignore

@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js

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
 

packages/lucide-react/babel.config.js

@@ -1,4 +1,3 @@
-// module.exports = require('../../babel.config');
 module.exports = {
   presets: ['react-app'],
 };

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"
   }
 }

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,

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};
 `;

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,
         },

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',
+};

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"

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==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0"
-
-react-test-renderer@^17.0.1:
+react-is@^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==
+  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 "^17.0.1"
-    react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.1"
+    prop-types "^15.6.2"
+    react-is "^16.8.6"
+    scheduler "^0.19.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"

packages/lucide-vue/.npmignore

@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js