swcs/lucide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lucide Vue Package (#174)

Browse Source 
* 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
This commit is contained in:
Eric Fennis
2021-02-22 20:26:38 +01:00
committed by GitHub
parent acea1b4116
commit 4024911219
33 changed files with 4551 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/release.yml
+30
View File
@@ -33,6 +33,9 @@ jobs:
- name: Build lucide package - name: Build lucide package
run: yarn build run: yarn build
- name: Test lucide package
run: yarn test
# Build lucide-react # Build lucide-react
- name: Install Dependencies lucide-react - name: Install Dependencies lucide-react
run: yarn --pure-lockfile run: yarn --pure-lockfile
@@ -42,6 +45,23 @@ jobs:
run: yarn build run: yarn build
working-directory: packages/lucide-react 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 # Publish lucide
- name: Set package.json version lucide - name: Set package.json version lucide
run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version
@@ -58,10 +78,20 @@ jobs:
run: yarn publish run: yarn publish
working-directory: packages/lucide-react 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 - name: Commit package.json
run: | run: |
git add package.json git add package.json
git add packages/lucide-react/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" \ 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 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 git remote set-url --push origin https://lucide-bot:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git
.npmignore
+9
View File
@@ -5,3 +5,12 @@ node_modules
tests tests
scripts scripts
site site
src
build
babel.config.js
categories.json
jest.config.js
netlify.toml
rollup.config.js
rollup.plugins.js
tags.json
icons/image-plus.svg
+5 -5
View File
@@ -9,9 +9,9 @@
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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="M21 11v8a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h8" />
<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="M8.5 10a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
<path d="M21 15L16 10L5 21" /> <path d="M21 15l-5-5L5 21" />
<path d="M19 2V8" /> <path d="M19 2v6" />
<path d="M22 5H16" /> <path d="M22 5h-6" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 411 B

icons/pencil.svg
+1 -1
View File
@@ -1,8 +1,8 @@
<svg <svg
width="24" width="24"
height="24" height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 307 B

After

Width:  |  Height:  |  Size: 307 B

icons/podcast.svg
+4 -4
View File
@@ -9,8 +9,8 @@
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<circle cx="12" cy="11" r="1" /> <circle cx="12" cy="11" r="1" />
<path d="M17.03 18.46a9 9 0 10-10.02.03" /> <path d="M17.03 18.46a9 9 0 10-10.02.03" />
<path d="M16.06 13.91a5 5 0 10-7.97.2" /> <path d="M16.06 13.91a5 5 0 10-7.97.2" />
<path d="M11.11 17a.9.9 0 111.78 0l-.52 4.67a.37.37 0 01-.74 0l-.52-4.68z" /> <path d="M11.11 17a.9.9 0 111.78 0l-.52 4.67a.37.37 0 01-.74 0l-.52-4.68z" />
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 413 B

icons/webcam.svg
+3 -3
View File
@@ -9,7 +9,7 @@
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<circle cx="12" cy="10" r="8" /> <circle cx="12" cy="10" r="8" />
<circle cx="12" cy="10" r="3" /> <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> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 B

After

Width:  |  Height:  |  Size: 324 B

package.json
+4 -3
View File
@@ -4,9 +4,10 @@
"version": "0.13.0", "version": "0.13.0",
"license": "ISC", "license": "ISC",
"homepage": "https://lucide.dev", "homepage": "https://lucide.dev",
"repository": "github:lucide-icons/lucide", "bugs": "https://github.com/lucide-icons/lucide/issues",
"bugs": { "repository": {
"url": "https://github.com/lucide-icons/lucide/issues" "type": "git",
"url": "https://github.com/lucide-icons/lucide.git"
}, },
"amdName": "lucide", "amdName": "lucide",
"source": "build/lucide.js", "source": "build/lucide.js",
packages/lucide-react/.npmignore
+9
View File
@@ -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
+2 -2
View File
@@ -15,7 +15,7 @@ npm install lucide-react
## How to use ## How to use
It's build with ESmodules so it's completely threeshakable. 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 ### Example
@@ -56,7 +56,7 @@ const App = () => {
It is possible to create one generic icon component to load icons. 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 #### Icon Component Example
packages/lucide-react/babel.config.js
-1
View File
@@ -1,4 +1,3 @@
// module.exports = require('../../babel.config');
module.exports = { module.exports = {
presets: ['react-app'], presets: ['react-app'],
}; };
packages/lucide-react/package.json
+12 -8
View File
@@ -3,35 +3,39 @@
"description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.", "description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
"version": "0.13.0", "version": "0.13.0",
"license": "ISC", "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", "amdName": "lucide-react",
"source": "build/lucide-react.js",
"main": "dist/cjs/lucide-react.js", "main": "dist/cjs/lucide-react.js",
"main:umd": "dist/umd/lucide-react.js", "main:umd": "dist/umd/lucide-react.js",
"module": "dist/esm/lucide-react.js", "module": "dist/esm/lucide-react.js",
"unpkg": "dist/umd/lucide-react.min.js", "unpkg": "dist/umd/lucide-react.min.js",
"repository": "github:lucide-icons/lucide",
"author": "Eric Fennis",
"scripts": { "scripts": {
"build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles", "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
"clean": "rm -rf dist && rm -rf build", "clean": "rm -rf dist && rm -rf build",
"build:move": "cp -av src 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: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", "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-react/rollup.config.js",
"test": "jest" "test": "jest"
}, },
"dependencies": { "dependencies": {
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.1" "react": "^16.5.1"
}, },
"devDependencies": { "devDependencies": {
"babel-preset-react-app": "^10.0.0", "babel-preset-react-app": "^10.0.0",
"jest": "^26.6.3", "jest": "^26.6.3",
"lucide": "file:../..", "react-test-renderer": "^16.5.1"
"react-test-renderer": "^17.0.1"
}, },
"peerDependencies": { "peerDependencies": {
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^17.0.1" "react": "^16.5.1"
} }
} }
packages/lucide-react/rollup.config.js
+4 -3
View File
@@ -1,7 +1,8 @@
const plugins = require('lucide/rollup.plugins'); const plugins = require('../../rollup.plugins');
const pkg = require('./package.json'); 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 rootDir = 'packages/lucide-react'; // It runs from the root
const outputDir = `${rootDir}/dist`; const outputDir = `${rootDir}/dist`;
const inputs = [`${rootDir}/build/lucide-react.js`]; const inputs = [`${rootDir}/build/lucide-react.js`];
@@ -31,7 +32,7 @@ const configs = bundles
plugins: plugins(pkg, minify), plugins: plugins(pkg, minify),
external: ['react', 'prop-types'], external: ['react', 'prop-types'],
output: { output: {
name: outputFileName, name: packageName,
file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`, file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
format, format,
sourcemap: true, sourcemap: true,
packages/lucide-react/scripts/exportTemplate.js
+2 -1
View File
@@ -1,7 +1,8 @@
export default ({ componentName, node }) => ` export default ({ componentName, node }) => `
import createReactComponent from '../createReactComponent'; import createReactComponent from '../createReactComponent';
import defaultAttributes from '../defaultAttributes';
const ${componentName} = createReactComponent('${componentName}', ${node}); const ${componentName} = createReactComponent('${componentName}', ['svg', defaultAttributes, ${node}]);
export default ${componentName}; export default ${componentName};
`; `;
packages/lucide-react/src/createReactComponent.js
+1 -1
View File
@@ -11,7 +11,7 @@ export default (iconName, [tag, attrs, children]) => {
...attrs, ...attrs,
width: size, width: size,
height: size, height: size,
color, stroke: color,
strokeWidth, strokeWidth,
...rest, ...rest,
}, },
packages/lucide-react/src/defaultAttributes.js
+11
View File
@@ -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
View File
@@ -2,7 +2,6 @@
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = ` exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
<svg <svg
color="currentColor"
fill="none" fill="none"
height={48} height={48}
stroke="red" 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`] = ` exports[`Using lucide icon components should render an component 1`] = `
<svg <svg
color="currentColor"
fill="none" fill="none"
height={24} height={24}
stroke="currentColor" stroke="currentColor"
packages/lucide-react/yarn.lock
+23 -33
View File
@@ -3246,9 +3246,6 @@ lru-cache@^6.0.0:
dependencies: dependencies:
yallist "^4.0.0" yallist "^4.0.0"
"lucide@file:../..":
version "0.11.0"
make-dir@^3.0.0: make-dir@^3.0.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" 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" kleur "^3.0.3"
sisteransi "^1.0.5" sisteransi "^1.0.5"
prop-types@^15.7.2: prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2" version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== 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" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
"react-is@^16.12.0 || ^17.0.0", react-is@^17.0.1: react-is@^16.8.1, react-is@^16.8.6:
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:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-shallow-renderer@^16.13.1: react-is@^17.0.1:
version "16.14.1" version "17.0.1"
resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg== 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: dependencies:
object-assign "^4.1.1" 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: react@^16.5.1:
version "17.0.1" version "16.14.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7" resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA== integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
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==
dependencies: dependencies:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"
prop-types "^15.6.2"
read-pkg-up@^7.0.1: read-pkg-up@^7.0.1:
version "7.0.1" version "7.0.1"
@@ -3962,10 +3952,10 @@ saxes@^5.0.0:
dependencies: dependencies:
xmlchars "^2.2.0" xmlchars "^2.2.0"
scheduler@^0.20.1: scheduler@^0.19.1:
version "0.20.1" version "0.19.1"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw== integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
dependencies: dependencies:
loose-envify "^1.1.0" loose-envify "^1.1.0"
object-assign "^4.1.1" object-assign "^4.1.1"
packages/lucide-vue/.npmignore
+9
View File
@@ -0,0 +1,9 @@
stats
node_modules
tests
scripts
build
src
babel.config.js
jest.config.js
rollup.config.js
packages/lucide-vue/README.md
+103
View File
@@ -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>
```
packages/lucide-vue/babel.config.js
+12
View File
@@ -0,0 +1,12 @@
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
packages/lucide-vue/jest.config.js
+14
View File
@@ -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',
},
};
packages/lucide-vue/package.json
+44
View File
@@ -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"
}
}
packages/lucide-vue/rollup.config.js
+47
View File
@@ -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;
packages/lucide-vue/scripts/exportTemplate.js
+8
View File
@@ -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};
`;
packages/lucide-vue/src/createVueComponent.js
+47
View File
@@ -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 })),
);
},
});
packages/lucide-vue/src/defaultAttributes.js
+11
View File
@@ -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',
};
packages/lucide-vue/src/icons/index.js
+5
View File
@@ -0,0 +1,5 @@
/*
Icons exports.
Will be generated
*/
packages/lucide-vue/src/lucide-vue.js
+1
View File
@@ -0,0 +1 @@
export * from './icons';
packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.js.snap
+37
View File
@@ -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>
`;
packages/lucide-vue/tests/lucide-vue.spec.js
+45
View File
@@ -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')
});
});
packages/lucide-vue/yarn.lock
+4028
View File
File diff suppressed because it is too large Load Diff
scripts/render/renderIconNodes.js
+9 -7
View File
@@ -38,13 +38,15 @@ export default (iconsObject, options) => {
]; ];
}); });
iconNodes[icon] = [ iconNodes[icon] = !options.noDefaultAttrs
'svg', ? [
{ 'svg',
...(options.camelizeAttrs ? camelizeAttrs(DEFAULT_ATTRS) : DEFAULT_ATTRS), {
}, ...(options.camelizeAttrs ? camelizeAttrs(DEFAULT_ATTRS) : DEFAULT_ATTRS),
children, },
]; children,
]
: children;
}); });
return iconNodes; return iconNodes;
src/defaultAttributesCamelized.js
+11
View File
@@ -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',
};