Compare commits
54 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9e524fd557 | ||
|
|
b5c71c4fc3 | ||
|
|
aa8861a2cd | ||
|
|
a41918a81e | ||
|
|
33be2c2430 | ||
|
|
eb706417e6 | ||
|
|
01e11a61f8 | ||
|
|
b323bbd28e | ||
|
|
514e88bbf9 | ||
|
|
de6ed26152 | ||
|
|
b8cc9ea3c8 | ||
|
|
cc2ac8bfcd | ||
|
|
0e340a2679 | ||
|
|
c15e3914a6 | ||
|
|
ff81fbfd9a | ||
|
|
5317abb867 | ||
|
|
ac80b9e58f | ||
|
|
a25f139953 | ||
|
|
b457c8dea1 | ||
|
|
2e24567f8e | ||
|
|
9b90bc4d51 | ||
|
|
6fd0380e19 | ||
|
|
603ee05674 | ||
|
|
be15f5e54b | ||
|
|
ea409105ce | ||
|
|
969254d986 | ||
|
|
200cc17ef6 | ||
|
|
893119b064 | ||
|
|
3e10988978 | ||
|
|
53a764fc5b | ||
|
|
4cc195092f | ||
|
|
b7ef305b9f | ||
|
|
52896efc94 | ||
|
|
2c0448a19a | ||
|
|
aa524c65a0 | ||
|
|
609ca31815 | ||
|
|
8fc34bfe1b | ||
|
|
48fa902b1c | ||
|
|
cdd57e6610 | ||
|
|
1f5119785b | ||
|
|
90a3f6e1dd | ||
|
|
4ae4eae53d | ||
|
|
e99228c65d | ||
|
|
34249ff42c | ||
|
|
f9d37968d6 | ||
|
|
864b71822b | ||
|
|
bc3bd1267a | ||
|
|
5d22d8e456 | ||
|
|
db98602331 | ||
|
|
4eca473cd4 | ||
|
|
e6eedee22d | ||
|
|
a8174a34b5 | ||
|
|
3196af66ce | ||
|
|
dd593e3dc3 |
@@ -17,5 +17,9 @@ module.exports = {
|
||||
trailingComma: 'all'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
|
||||
},
|
||||
};
|
||||
|
||||
4
.github/workflows/ci.yml
vendored
@@ -14,8 +14,8 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
|
||||
5
.github/workflows/lucide-angular.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-angular:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-angular test
|
||||
|
||||
|
||||
5
.github/workflows/lucide-preact.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-preact:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-preact test
|
||||
|
||||
|
||||
5
.github/workflows/lucide-react-native.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-react-native:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-react-native test
|
||||
|
||||
|
||||
5
.github/workflows/lucide-react.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-react:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-react test
|
||||
|
||||
|
||||
47
.github/workflows/lucide-solid.yml
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
name: Lucide Solid Checks
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
paths:
|
||||
- packages/lucide-solid/**
|
||||
push:
|
||||
paths:
|
||||
- packages/lucide-solid/**
|
||||
|
||||
jobs:
|
||||
lucide-solid:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
- uses: pnpm/action-setup@v2.0.1
|
||||
name: Install pnpm
|
||||
id: pnpm-install
|
||||
with:
|
||||
version: 7
|
||||
run_install: false
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
run: |
|
||||
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
|
||||
|
||||
- uses: actions/cache@v3
|
||||
name: Setup pnpm cache
|
||||
with:
|
||||
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Build
|
||||
run: pnpm --filter lucide-solid build
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-solid test
|
||||
5
.github/workflows/lucide-static.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-static:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -42,4 +42,3 @@ jobs:
|
||||
|
||||
- name: Build
|
||||
run: pnpm --filter lucide-static build
|
||||
|
||||
|
||||
5
.github/workflows/lucide-svelte.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-svelte:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-svelte test
|
||||
|
||||
|
||||
5
.github/workflows/lucide-vue-next.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-vue-next:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-vue-next test
|
||||
|
||||
|
||||
5
.github/workflows/lucide-vue.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide-vue:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-vue test
|
||||
|
||||
|
||||
5
.github/workflows/lucide.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
||||
lucide:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -45,4 +45,3 @@ jobs:
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide test
|
||||
|
||||
|
||||
124
.github/workflows/release.yml
vendored
@@ -3,7 +3,7 @@ name: Release Packages
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "v*"
|
||||
- 'v*'
|
||||
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
@@ -32,8 +32,8 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -73,7 +73,7 @@ jobs:
|
||||
run: pnpm --filter lucide test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide publish
|
||||
run: pnpm --filter lucide publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -86,9 +86,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -128,7 +128,7 @@ jobs:
|
||||
run: pnpm --filter lucide-react test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-react publish
|
||||
run: pnpm --filter lucide-react publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -141,9 +141,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -183,7 +183,7 @@ jobs:
|
||||
run: pnpm --filter lucide-react-native test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-react-native publish
|
||||
run: pnpm --filter lucide-react-native publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -196,9 +196,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -238,7 +238,7 @@ jobs:
|
||||
run: pnpm --filter lucide-vue test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-vue publish
|
||||
run: pnpm --filter lucide-vue publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -251,9 +251,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -293,7 +293,7 @@ jobs:
|
||||
run: pnpm --filter lucide-vue-next test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-vue-next publish
|
||||
run: pnpm --filter lucide-vue-next publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -306,9 +306,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -345,10 +345,10 @@ jobs:
|
||||
run: pnpm --filter lucide-angular build
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-angular test:headless
|
||||
run: pnpm --filter lucide-angular test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-angular publish dist
|
||||
run: pnpm --filter lucide-angular publish dist --no-git-checks --ignore-scripts
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -361,9 +361,9 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -403,7 +403,7 @@ jobs:
|
||||
run: pnpm --filter lucide-preact test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-preact publish
|
||||
run: pnpm --filter lucide-preact publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -411,14 +411,69 @@ jobs:
|
||||
name: lucide-preact-package-json
|
||||
path: packages/lucide-preact/package.json
|
||||
|
||||
lucide-solid:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
- uses: pnpm/action-setup@v2.0.1
|
||||
name: Install pnpm
|
||||
id: pnpm-install
|
||||
with:
|
||||
version: 7
|
||||
run_install: false
|
||||
|
||||
- name: Get pnpm store directory
|
||||
id: pnpm-cache
|
||||
run: |
|
||||
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
|
||||
|
||||
- uses: actions/cache@v3
|
||||
name: Setup pnpm cache
|
||||
with:
|
||||
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Set Auth Token
|
||||
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
- name: Set package.json version lucide
|
||||
run: pnpm --filter lucide-solid version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
|
||||
|
||||
- name: Build
|
||||
run: pnpm --filter lucide-solid build
|
||||
|
||||
- name: Test
|
||||
run: pnpm --filter lucide-solid test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-solid publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-solid-package-json
|
||||
path: packages/lucide-solid/package.json
|
||||
|
||||
lucide-svelte:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -458,7 +513,7 @@ jobs:
|
||||
run: pnpm --filter lucide-svelte test
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-svelte publish
|
||||
run: pnpm --filter lucide-svelte publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -471,10 +526,10 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: [pre-build, lucide-font]
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/download-artifact@v2
|
||||
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -514,7 +569,7 @@ jobs:
|
||||
run: pnpm --filter lucide-static build
|
||||
|
||||
- name: Publish
|
||||
run: pnpm --filter lucide-static publish
|
||||
run: pnpm --filter lucide-static publish --no-git-checks
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
@@ -527,8 +582,8 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
@@ -584,7 +639,7 @@ jobs:
|
||||
mkdir lucide-font
|
||||
pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
|
||||
|
||||
- name: "Upload to Artifacts"
|
||||
- name: 'Upload to Artifacts'
|
||||
uses: actions/upload-artifact@v1
|
||||
with:
|
||||
name: lucide-font
|
||||
@@ -597,7 +652,7 @@ jobs:
|
||||
container:
|
||||
image: cirrusci/flutter:latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/download-artifact@v2
|
||||
- uses: actions/cache@v2
|
||||
with:
|
||||
@@ -680,13 +735,14 @@ jobs:
|
||||
]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/download-artifact@v2
|
||||
|
||||
- name: Commit package files
|
||||
run: |
|
||||
mv lucide-package-json/package.json packages/lucide/package.json
|
||||
mv lucide-react-package-json/package.json packages/lucide-react/package.json
|
||||
mv lucide-react-native-package-json/package.json packages/lucide-react-native/package.json
|
||||
mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
|
||||
mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
|
||||
mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json
|
||||
|
||||
@@ -10,13 +10,13 @@ The following is a set of guidelines for contributing to Lucide. Feel free to pr
|
||||
Feel free to open a pull-request to contribute to this project.
|
||||
|
||||
**Working on your first Pull Request?** You can learn how from this *free* series
|
||||
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
|
||||
[How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
|
||||
|
||||
Guidelines for pull requests:
|
||||
|
||||
- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
|
||||
- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
|
||||
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
|
||||
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `main` branch.
|
||||
- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
|
||||
|
||||
### Pull Requests Including Icons
|
||||
@@ -65,7 +65,7 @@ If you are a designer who wants to contribute to Lucide but you don't know what
|
||||
|
||||
## Development
|
||||
|
||||
You will need minimum version of [Nodejs 16+](https://nodejs.org)
|
||||
You will need minimum version of [Nodejs 16.4+](https://nodejs.org)
|
||||
For packagemanagement you will need [yarn v1](https://yarnpkg.com/getting-started/install).
|
||||
For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).
|
||||
|
||||
|
||||
122
README.md
@@ -1,15 +1,15 @@
|
||||
<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
|
||||
<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
|
||||
<p align="center">
|
||||
<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
|
||||
<a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
|
||||
<a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json" alt="figma installs"></a>
|
||||
<a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
|
||||
<a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
|
||||
</p>
|
||||
|
||||
# Lucide
|
||||
|
||||

|
||||
[](https://www.npmjs.com/package/lucide)
|
||||
[](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)
|
||||
[](https://discord.gg/EH6nSts)
|
||||
|
||||
## What is Lucide?
|
||||
|
||||
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
|
||||
Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
|
||||
|
||||
It began after growing disaffection with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
|
||||
|
||||
@@ -23,24 +23,25 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
|
||||
|
||||
## Table of Contents
|
||||
|
||||
* [Installation](#installation)
|
||||
* [Package managers](#package-managers)
|
||||
* [CDN](#cdn)
|
||||
* [Usage](#usage)
|
||||
* [Web](#web)
|
||||
* [React](#react)
|
||||
* [React Native](#react-native)
|
||||
* [Vue 2](#vue-2)
|
||||
* [Vue 3](#vue-3)
|
||||
* [Angular](#angular)
|
||||
* [Preact](#preact)
|
||||
* [Static](#static-svg-sprite-font-icons-)
|
||||
* [Figma](#figma)
|
||||
* [Laravel](#laravel)
|
||||
* [Flutter](#flutter)
|
||||
* [Contributing](#contributing)
|
||||
* [Community](#community)
|
||||
* [License](#license)
|
||||
- [Usage](#usage)
|
||||
- [Web](#web)
|
||||
- [React](#react)
|
||||
- [React Native](#react-native)
|
||||
- [Vue 2](#vue-2)
|
||||
- [Vue 3](#vue-3)
|
||||
- [Angular](#angular)
|
||||
- [Preact](#preact)
|
||||
- [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
|
||||
- [Figma](#figma)
|
||||
- [Laravel](#laravel)
|
||||
- [Flutter](#flutter)
|
||||
- [Svelte](#svelte)
|
||||
- [Solid](#solid)
|
||||
- [Contributing](#contributing)
|
||||
- [Community](#community)
|
||||
- [License](#license)
|
||||
- [Credits](#credits)
|
||||
- [Sponsors](#sponsors)
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -55,9 +56,11 @@ Implementation of the lucide icon library for web applications.
|
||||
|
||||
```sh
|
||||
npm install lucide
|
||||
```
|
||||
|
||||
#or
|
||||
or
|
||||
|
||||
```sh
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
@@ -69,9 +72,11 @@ Implementation of the lucide icon library for react applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
@@ -83,13 +88,15 @@ Implementation of the lucide icon library for React Native applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-react-native
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react-native
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react-native#lucide-react-native).
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native).
|
||||
|
||||
### Vue 2
|
||||
|
||||
@@ -97,9 +104,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
```
|
||||
|
||||
@@ -111,9 +120,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue-next
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue-next
|
||||
```
|
||||
|
||||
@@ -123,9 +134,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
|
||||
|
||||
```sh
|
||||
yarn add lucide-angular
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
@@ -137,9 +150,11 @@ Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-preact
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
@@ -156,9 +171,11 @@ NPM package
|
||||
|
||||
```sh
|
||||
yarn add lucide-static
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-static
|
||||
```
|
||||
|
||||
@@ -190,6 +207,38 @@ flutter pub add lucide_icons
|
||||
|
||||
For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
|
||||
|
||||
### Svelte
|
||||
|
||||
Implementation of the lucide icon library for Svelte applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte#lucide-svelte).
|
||||
|
||||
### Solid
|
||||
|
||||
Implementation of the lucide icon library for solid applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-solid
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-solid
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-solid#lucide-solid).
|
||||
|
||||
## Contributing
|
||||
|
||||
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
|
||||
@@ -216,4 +265,3 @@ Thank you to all the people who contributed to Lucide!
|
||||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
|
||||
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||
</a>
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ title: Comparison
|
||||
|
||||
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
|
||||
|
||||
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned adn not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
|
||||
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned and not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
|
||||
|
||||
Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers.
|
||||
|
||||
|
||||
@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
|
||||
|
||||
```bash
|
||||
npm install lucide
|
||||
```
|
||||
|
||||
#or
|
||||
or
|
||||
|
||||
```sh
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-vue
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
```
|
||||
|
||||
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-vue-next
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue-next
|
||||
```
|
||||
|
||||
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
|
||||
|
||||
```bash
|
||||
yarn add lucide-angular
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-preact
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
@@ -106,7 +120,7 @@ The lucide figma plugin.
|
||||
|
||||
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
|
||||
|
||||

|
||||

|
||||
|
||||
## Laravel
|
||||
|
||||
|
||||
@@ -4,11 +4,13 @@ Implementation of the lucide icon library for angular applications.
|
||||
|
||||
## Installation
|
||||
|
||||
``` sh
|
||||
```sh
|
||||
yarn add lucide-angular
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
@@ -20,12 +22,12 @@ There are three ways for use this library.
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- app.component.html -->
|
||||
<div id="lucide-icon"></div>
|
||||
```
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.component.ts
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const div = document.getElementById('lucide-icon');
|
||||
@@ -51,11 +52,11 @@ export class AppComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
### Method 2: User __Tag__ with __name__ property
|
||||
### Method 2: User **Tag** with **name** property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@@ -65,32 +66,29 @@ import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
|
||||
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
|
||||
<lucide-icon name="edit" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
### Method 3: User __Tag__ with __img__ property
|
||||
### Method 3: User **Tag** with **img** property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@@ -100,28 +98,21 @@ import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
LucideAngularModule.pick({ })
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
``` xml
|
||||
```xml
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
|
||||
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.component.ts
|
||||
import { Component } from '@angular/core';
|
||||
import { Airplay, Circle } from 'lucide-angular';
|
||||
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent {
|
||||
ico1 = Airplay;
|
||||
ico2 = Circle;
|
||||
@@ -144,7 +134,7 @@ export class AppComponent {
|
||||
|
||||
In `Method 2`: import all icons in `app.module.ts` by:
|
||||
|
||||
``` js
|
||||
```js
|
||||
|
||||
import { icons } from 'lucide-angular/icons';
|
||||
|
||||
|
||||
@@ -10,28 +10,30 @@ Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-preact
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
It's build with ESmodules so it's completely tree-shakable.
|
||||
Each icon can be imported as a preact component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import { Camera } from 'lucide-preact';
|
||||
// Returns PreactComponent
|
||||
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -39,20 +41,20 @@ export default App;
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props / svg attributes
|
||||
|
||||
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera fill="red" stroke-linejoin="bevel"/>
|
||||
return <Camera fill="red" stroke-linejoin="bevel" />;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -62,17 +64,17 @@ const App = () => {
|
||||
|
||||
It is possible to create one generic icon component to load icons.
|
||||
|
||||
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
|
||||
> ⚠️ 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
|
||||
|
||||
``` js
|
||||
```js
|
||||
import * as icons from 'lucide-preact';
|
||||
|
||||
const Icon = ({name, color, size}) => {
|
||||
const Icon = ({ name, color, size }) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />
|
||||
return <LucideIcon color={color} size={size} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
||||
@@ -8,15 +8,17 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install
|
||||
|
||||
```bash
|
||||
yarn add lucide-react-native
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react-native
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
It's build with ESmodules so it's completely tree-shakable.
|
||||
Each icon can be imported as a react component.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -4,30 +4,32 @@ Implementation of the lucide icon library for react applications
|
||||
|
||||
## Installation
|
||||
|
||||
``` bash
|
||||
```bash
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
It's build with ESmodules so it's completely tree-shakable.
|
||||
Each icon can be imported as a react component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import { Camera } from 'lucide-react';
|
||||
// Returns ReactComponent
|
||||
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -35,20 +37,20 @@ export default App;
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props
|
||||
|
||||
You can also pass custom props that will be added in the svg as attributes.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera fill="red"/>
|
||||
return <Camera fill="red" />;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -56,17 +58,17 @@ 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, your application build size will grow strongly.
|
||||
> :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
|
||||
|
||||
``` js
|
||||
```js
|
||||
import * as icons from 'lucide-react';
|
||||
|
||||
const Icon = ({name, color, size}) => {
|
||||
const Icon = ({ name, color, size }) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />
|
||||
return <LucideIcon color={color} size={size} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
||||
@@ -19,23 +19,25 @@ This package is suitable for very specific use cases for example if you want to
|
||||
|
||||
```sh
|
||||
yarn add lucide-static
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-static
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
|
||||
|
||||
<!-- Icon Font -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "LucideIcons";
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
|
||||
font-family: 'LucideIcons';
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
|
||||
|
||||
To use it in for example html:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="~lucide-static/icons/home.svg">
|
||||
<img src="~lucide-static/icons/home.svg" />
|
||||
```
|
||||
|
||||
``` css
|
||||
```css
|
||||
.home-icon {
|
||||
background-image: url(~lucide-static/icons/home.svg)
|
||||
background-image: url(~lucide-static/icons/home.svg);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
|
||||
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
|
||||
|
||||
```js
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right'
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right';
|
||||
|
||||
// return string of a svg
|
||||
```
|
||||
@@ -80,7 +82,7 @@ You may need additional loader for this.
|
||||
|
||||
```html
|
||||
<!-- Icon Sprite, not recommended for production! -->
|
||||
<img src="lucide-static/sprite.svg#home">
|
||||
<img src="lucide-static/sprite.svg#home" />
|
||||
|
||||
<!-- or -->
|
||||
<svg
|
||||
@@ -104,13 +106,13 @@ If you'd prefer, you can use CSS to hold your base SVG properties
|
||||
|
||||
```css
|
||||
.lucide-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -133,20 +135,19 @@ and update the svg as follows
|
||||
### Icon Font
|
||||
|
||||
```css
|
||||
@import("~lucide-static/font/Lucide.css")
|
||||
@import ('~lucide-static/font/Lucide.css');
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="icon-home"></div>
|
||||
```
|
||||
|
||||
|
||||
### Node.js
|
||||
|
||||
To use lucide icons in your Nodejs project you can import each icon as:
|
||||
|
||||
```js
|
||||
const { messageSquare } = require('lucide-static/lib')
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
```
|
||||
|
||||
> Note: Each icon name is in camelCase.
|
||||
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
|
||||
#### Example in node.js project
|
||||
|
||||
```js
|
||||
const express = require('express')
|
||||
const { messageSquare } = require('lucide-static/lib')
|
||||
const app = express()
|
||||
const port = 3000
|
||||
const express = require('express');
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
const app = express();
|
||||
const port = 3000;
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send(`
|
||||
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
})
|
||||
`);
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening at http://localhost:${port}`)
|
||||
})
|
||||
console.log(`Example app listening at http://localhost:${port}`);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
@@ -22,17 +24,17 @@ Default usage:
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Skull } from 'lucide-svelte'
|
||||
import { Skull } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<Skull/>
|
||||
<Skull />
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Camera } from 'lucide-svelte'
|
||||
import { Camera } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<Camera color="#ff3e98" />
|
||||
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
|
||||
|
||||
### Available props
|
||||
|
||||
| name | type | default
|
||||
| -------------- | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth` | *Number* | 2
|
||||
| `*<SVGProps>` | *String* | -
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
| `*<SVGProps>` | _String_ | - |
|
||||
|
||||
\* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
|
||||
|
||||
@@ -53,10 +55,10 @@ import { Camera } from 'lucide-svelte'
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Phone } from 'lucide-svelte'
|
||||
import { Phone } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<Phone fill="#333"/>
|
||||
<Phone fill="#333" />
|
||||
```
|
||||
|
||||
This results a filled phone icon.
|
||||
@@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
#### Icon Component Example
|
||||
|
||||
``` html
|
||||
```html
|
||||
<script>
|
||||
import * as icons from "lucide-svelte";
|
||||
import * as icons from 'lucide-svelte';
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<svelte:component this={icons[name]} {...$$props}/>
|
||||
<svelte:component this="{icons[name]}" {...$$props} />
|
||||
```
|
||||
|
||||
##### Then you can use it like this
|
||||
|
||||
``` html
|
||||
```html
|
||||
<script>
|
||||
import LucideIcon from "./LucideIcon";
|
||||
import LucideIcon from './LucideIcon';
|
||||
</script>
|
||||
|
||||
<LucideIcon name="Menu" />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
Implementation of the lucide icon library for Vue 3 applications.
|
||||
|
||||
> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](lucide-vue)
|
||||
> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue](lucide-vue)
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -20,7 +20,7 @@ npm install lucide-vue-next
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
It's build with ESmodules so it's completely tree-shakable.
|
||||
Each icon can be imported as a vue component.
|
||||
|
||||
### Example
|
||||
@@ -35,15 +35,8 @@ You can pass additional props to adjust the icon.
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Returns Vue component
|
||||
<script setup>
|
||||
import { Camera } from 'lucide-vue-next';
|
||||
|
||||
export default {
|
||||
name: "My Component",
|
||||
components: { Camera }
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -53,8 +46,8 @@ export default {
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| `defaultClass`| *String* | lucide-icon
|
||||
| `stroke-width`| *Number* | 2
|
||||
| `default-class`| *String* | lucide-icon
|
||||
|
||||
### Custom props
|
||||
|
||||
@@ -76,25 +69,25 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
``` html
|
||||
<template>
|
||||
<component :is="icon" />
|
||||
<component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import * as icons from "lucide-vue-next";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
setup(props) {
|
||||
const icon = computed(() => icons[props.name])
|
||||
size: Number,
|
||||
color: String,
|
||||
strokeWidth: Number,
|
||||
defaultClass: String
|
||||
})
|
||||
|
||||
return { icon }
|
||||
}
|
||||
};
|
||||
const icon = computed(() => icons[props.name]);
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -107,3 +100,4 @@ export default {
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
All other props listed above also work on the `Icon` Component.
|
||||
|
||||
@@ -8,55 +8,53 @@ Implementation of the lucide icon library for Vue applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
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.
|
||||
|
||||
``` html
|
||||
```html
|
||||
<template>
|
||||
<Camera
|
||||
color="red"
|
||||
:size="32"
|
||||
/>
|
||||
<Camera color="red" :size="32" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Returns Vue component
|
||||
import { Camera } from 'lucide-vue';
|
||||
|
||||
export default {
|
||||
name: "My Component",
|
||||
components: { Camera }
|
||||
}
|
||||
// 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
|
||||
| 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.
|
||||
|
||||
``` html
|
||||
```html
|
||||
<template>
|
||||
<Camera fill="red" />
|
||||
</template>
|
||||
@@ -70,33 +68,33 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
#### Icon Component Example
|
||||
|
||||
``` html
|
||||
```html
|
||||
<template>
|
||||
<component :is="icon" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as icons from "lucide-vue";
|
||||
import * as icons from 'lucide-vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
return icons[this.name];
|
||||
},
|
||||
},
|
||||
};
|
||||
computed: {
|
||||
icon() {
|
||||
return icons[this.name];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
##### Then you can use it like this
|
||||
|
||||
``` html
|
||||
```html
|
||||
<template>
|
||||
<div id="app">
|
||||
<Icon name="Airplay" />
|
||||
|
||||
@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
|
||||
|
||||
### Package Managers
|
||||
|
||||
``` bash
|
||||
```sh
|
||||
npm install lucide
|
||||
#or
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Development version -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
||||
|
||||
@@ -44,7 +48,7 @@ Here is a complete example with unpkg
|
||||
|
||||
### With ESModules
|
||||
|
||||
To reduce bundle size, lucide is built to be fully treeshakable.
|
||||
To reduce bundle size, lucide is built to be fully tree-shakable.
|
||||
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
|
||||
|
||||
```html
|
||||
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
|
||||
import { createIcons, icons } from 'lucide';
|
||||
|
||||
// Caution, this will import all the icons and bundle them.
|
||||
createIcons({icons});
|
||||
createIcons({ icons });
|
||||
|
||||
// Recommended way, to include only the icons you need.
|
||||
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
|
||||
@@ -65,8 +69,8 @@ createIcons({
|
||||
icons: {
|
||||
Menu,
|
||||
ArrowRight,
|
||||
Globe,
|
||||
},
|
||||
Globe
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
@@ -83,9 +87,9 @@ createIcons({
|
||||
attrs: {
|
||||
class: ['my-custom-class', 'icon'],
|
||||
'stroke-width': 1,
|
||||
stroke: '#333',
|
||||
stroke: '#333'
|
||||
},
|
||||
nameAttr: 'icon-name', // attribute for the icon name.
|
||||
nameAttr: 'icon-name' // attribute for the icon name.
|
||||
});
|
||||
```
|
||||
|
||||
@@ -98,8 +102,8 @@ createIcons({
|
||||
icons: {
|
||||
Menu,
|
||||
ArrowRight,
|
||||
Globe,
|
||||
},
|
||||
Globe
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
16
icons/arrow-up-down.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<polyline points="11 17 7 21 3 17"/>
|
||||
<line x1="7" y1="21" x2="7" y2="9"/>
|
||||
<polyline points="21 7 17 3 13 7"/>
|
||||
<line x1="17" y1="15" x2="17" y2="3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 365 B |
15
icons/book-open-check.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4Z" />
|
||||
<path d="m16 12 2 2 4-4" />
|
||||
<path d="M22 6V3h-6c-2.2 0-4 1.8-4 4v14c0-1.7 1.3-3 3-3h7v-2.3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 369 B |
18
icons/cat.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M14 5.256A8.148 8.148 0 0 0 12 5a9.04 9.04 0 0 0-2 .227M20.098 10c.572 1.068.902 2.24.902 3.444C21 17.89 16.97 21 12 21s-9-3-9-7.556c0-1.251.288-2.41.792-3.444"/>
|
||||
<path d="M3.75 10S2.11 3.58 3.5 3C4.89 2.42 8 3 9.781 5"/>
|
||||
<path d="M20.172 10.002s1.64-6.42.25-7c-1.39-.58-4.5 0-6.282 2"/>
|
||||
<path d="M8 14v.5"/>
|
||||
<path d="M16 14v.5"/>
|
||||
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 605 B |
14
icons/check-check.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M18 6 7 17l-5-5" />
|
||||
<path d="m22 10-7.5 7.5L13 16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 275 B |
16
icons/concierge-bell.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M2 18a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2H2v-2Z" />
|
||||
<path d="M20 16a8 8 0 1 0-16 0" />
|
||||
<path d="M12 4v4" />
|
||||
<path d="M10 4h4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 351 B |
18
icons/dog.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5"/>
|
||||
<path d="M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/>
|
||||
<path d="M8 14v.5"/>
|
||||
<path d="M16 14v.5"/>
|
||||
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
|
||||
<path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444c0-1.061-.162-2.2-.493-3.309m-9.243-6.082A8.801 8.801 0 0 1 12 5c.78 0 1.5.108 2.161.306"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 764 B |
17
icons/ear-off.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M6 18.5a3.5 3.5 0 1 0 7 0c0-1.57.92-2.52 2.04-3.46" />
|
||||
<path d="M6 8.5c0-.75.13-1.47.36-2.14" />
|
||||
<path d="M8.8 3.15A6.5 6.5 0 0 1 19 8.5c0 1.63-.44 2.81-1.09 3.76" />
|
||||
<path d="M12.5 6A2.5 2.5 0 0 1 15 8.5M10 13a2 2 0 0 0 1.82-1.18" />
|
||||
<line x1="2" y1="2" x2="22" y2="22" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 501 B |
14
icons/ear.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0" />
|
||||
<path d="M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
14
icons/fan.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z" />
|
||||
<path d="M12 12v.01" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 431 B |
16
icons/heading-1.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="m17 12 3-2v8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 306 B |
16
icons/heading-2.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 331 B |
17
icons/heading-3.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2" />
|
||||
<path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 393 B |
17
icons/heading-4.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M17 10v4h4" />
|
||||
<path d="M21 10v8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 328 B |
17
icons/heading-5.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<path d="M17 13v-3h4" />
|
||||
<path d="M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 385 B |
17
icons/heading-6.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M4 12h8" />
|
||||
<path d="M4 18V6" />
|
||||
<path d="M12 18V6" />
|
||||
<circle cx="19" cy="16" r="2" />
|
||||
<path d="M20 10c-2 2-3 3.5-3 6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 350 B |
15
icons/heading.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M6 12h12" />
|
||||
<path d="M6 20V4" />
|
||||
<path d="M18 20V4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
17
icons/microwave.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<rect x="2" y="4" width="20" height="15" rx="2" />
|
||||
<rect x="6" y="8" width="8" height="7" rx="1" />
|
||||
<path d="M18 8v7" />
|
||||
<path d="M6 19v2" />
|
||||
<path d="M18 19v2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 382 B |
17
icons/plug-2.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M9 2v6" />
|
||||
<path d="M15 2v6" />
|
||||
<path d="M12 17v5" />
|
||||
<path d="M5 8h14" />
|
||||
<path d="M6 11V8h12v3a6 6 0 1 1-12 0v0Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 346 B |
16
icons/plug.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M12 22v-5" />
|
||||
<path d="M9 7V2" />
|
||||
<path d="M15 7V2" />
|
||||
<path d="M6 13V8h12v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
15
icons/refrigerator.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M5 6a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6Z" />
|
||||
<path d="M5 10h14" />
|
||||
<path d="M15 7v6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
15
icons/sailboat.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M22 18H2a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4Z"/>
|
||||
<path d="M21 14 10 2 3 14h18Z"/>
|
||||
<path d="M10 2v16"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 321 B |
22
icons/shower-head.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<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"
|
||||
>
|
||||
<path d="m4 4 2.5 2.5" />
|
||||
<path d="M13.5 6.5a4.95 4.95 0 0 0-7 7" />
|
||||
<path d="M15 5 5 15" />
|
||||
<path d="M14 17v.01" />
|
||||
<path d="M10 16v.01" />
|
||||
<path d="M13 13v.01" />
|
||||
<path d="M16 10v.01" />
|
||||
<path d="M11 20v.01" />
|
||||
<path d="M17 14v.01" />
|
||||
<path d="M20 11v.01" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 489 B |
@@ -10,5 +10,4 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M2 20h.01" />
|
||||
<path d="M7 20v-4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 233 B |
@@ -9,9 +9,9 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M11 5h4" />
|
||||
<path d="M11 9h7" />
|
||||
<path d="M11 13h10" />
|
||||
<path d="m3 17 3 3 3-3" />
|
||||
<path d="M6 18V4" />
|
||||
<path d="M11 11H15" />
|
||||
<path d="M11 15H18" />
|
||||
<path d="M11 19H21" />
|
||||
<path d="M9 7L6 4L3 7" />
|
||||
<path d="M6 6L6 20" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 336 B |
15
icons/spline.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
>
|
||||
<path d="M21 6V4c0-.6-.4-1-1-1h-2a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
|
||||
<path d="M7 20v-2c0-.6-.4-1-1-1H4a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
|
||||
<path d="M5 17A12 12 0 0 1 17 5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 418 B |
@@ -17,7 +17,8 @@
|
||||
"generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
|
||||
"optimize": "node ./scripts/optimizeSvgs.mjs",
|
||||
"addtags": "node ./scripts/addMissingKeysToTags.mjs",
|
||||
"generate:changelog": "node ./scripts/generateChangelog.mjs"
|
||||
"generate:changelog": "node ./scripts/generateChangelog.mjs",
|
||||
"postinstall": "husky install"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@atomico/rollup-plugin-sizes": "^1.1.4",
|
||||
@@ -39,7 +40,7 @@
|
||||
"eslint-config-prettier": "^2.10.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-prettier": "^2.7.0",
|
||||
"husky": "^4.3.8",
|
||||
"husky": "^8.0.0",
|
||||
"jest": "^28.1.3",
|
||||
"lint-staged": "^10.5.4",
|
||||
"minimist": "^1.2.6",
|
||||
@@ -62,5 +63,6 @@
|
||||
},
|
||||
"lint-staged": {
|
||||
"icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
|
||||
}
|
||||
},
|
||||
"packageManager": "pnpm@7.14.0"
|
||||
}
|
||||
|
||||
@@ -6,11 +6,13 @@ Implementation of the lucide icon library for angular applications.
|
||||
|
||||
## Installation
|
||||
|
||||
``` sh
|
||||
```sh
|
||||
yarn add lucide-angular
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
@@ -22,12 +24,12 @@ There are three ways for use this library.
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- app.component.html -->
|
||||
<div id="lucide-icon"></div>
|
||||
```
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.component.ts
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
@@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const div = document.getElementById('lucide-icon');
|
||||
@@ -53,11 +54,11 @@ export class AppComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
### Method 2: User __Tag__ with __name__ property
|
||||
### Method 2: User **Tag** with **name** property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@@ -67,31 +68,29 @@ import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
|
||||
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
|
||||
<lucide-icon name="edit" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
### Method 3: User __Tag__ with __img__ property
|
||||
### Method 3: User **Tag** with **img** property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@@ -101,27 +100,21 @@ import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
LucideAngularModule.pick({ })
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
``` xml
|
||||
```xml
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
|
||||
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.component.ts
|
||||
import { Component } from '@angular/core';
|
||||
import { Airplay, Circle } from 'lucide-angular';
|
||||
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent {
|
||||
ico1 = Airplay;
|
||||
ico2 = Circle;
|
||||
@@ -144,7 +136,7 @@ export class AppComponent {
|
||||
|
||||
In `Method 2`: import all icons in `app.module.ts` by:
|
||||
|
||||
``` js
|
||||
```js
|
||||
...
|
||||
import { icons } from 'lucide-angular/icons';
|
||||
....
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-angular",
|
||||
"description": "A Lucide icon library package for Angular applications",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"author": "SMAH1",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
@@ -26,42 +26,43 @@
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
|
||||
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtention=.ts --exportFileName=index.ts",
|
||||
"build:ng": "ng build --prod",
|
||||
"build:ng": "ng build --configuration production",
|
||||
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
|
||||
"test:watch": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e",
|
||||
"postinstall": "ngcc"
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^2.3.1"
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1102.5",
|
||||
"@angular/cli": "~11.2.15",
|
||||
"@angular/common": "~11.2.14",
|
||||
"@angular/compiler": "~11.2.14",
|
||||
"@angular/compiler-cli": "~11.2.14",
|
||||
"@angular/core": "~11.2.14",
|
||||
"@angular/platform-browser": "~11.2.14",
|
||||
"@angular/platform-browser-dynamic": "~11.2.14",
|
||||
"@types/jasmine": "~3.10.2",
|
||||
"@types/node": "^16.11.7",
|
||||
"@angular-devkit/build-angular": "~14.2.6",
|
||||
"@angular/cli": "~14.2.6",
|
||||
"@angular/common": "~14.2.7",
|
||||
"@angular/compiler": "~14.2.7",
|
||||
"@angular/compiler-cli": "~14.2.7",
|
||||
"@angular/core": "~14.2.7",
|
||||
"@angular/platform-browser": "~14.2.7",
|
||||
"@angular/platform-browser-dynamic": "~14.2.7",
|
||||
"@types/jasmine": "~4.3.0",
|
||||
"@types/node": "^18.11.4",
|
||||
"codelyzer": "^6.0.2",
|
||||
"jasmine-core": "~3.10.1",
|
||||
"jasmine-core": "~4.4.0",
|
||||
"jasmine-spec-reporter": "~7.0.0",
|
||||
"karma": "~6.3.14",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~4.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.7.0",
|
||||
"ng-packagr": "^11.2.4",
|
||||
"karma": "~6.4.1",
|
||||
"karma-chrome-launcher": "~3.1.1",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "^2.0.0",
|
||||
"ng-packagr": "^14.2.1",
|
||||
"protractor": "~7.0.0",
|
||||
"puppeteer": "^8.0.0",
|
||||
"rxjs": "6.5.3",
|
||||
"ts-node": "~10.4.0",
|
||||
"puppeteer": "^19.1.0",
|
||||
"rxjs": "7.5.7",
|
||||
"ts-node": "~10.9.1",
|
||||
"tslint": "~6.1.0",
|
||||
"typescript": "~4.1.5",
|
||||
"zone.js": "^0.11.7"
|
||||
"typescript": "~4.8.4",
|
||||
"zone.js": "^0.11.8"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
"declarationMap": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableIvy": false
|
||||
"enableIvy": true,
|
||||
"compilationMode": "partial"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.14",
|
||||
"minimist": "^1.2.6",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
name: lucide_icons
|
||||
description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
|
||||
version: 0.84.0
|
||||
version: 0.93.0
|
||||
homepage: https://lucide.dev
|
||||
repository: https://github.com/lucide-icons/lucide
|
||||
|
||||
|
||||
@@ -8,28 +8,30 @@ Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-preact
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
It's build with ESmodules so it's completely tree-shakable.
|
||||
Each icon can be imported as a preact component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import { Camera } from 'lucide-preact';
|
||||
// Returns PreactComponent
|
||||
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -37,20 +39,20 @@ export default App;
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props / svg attributes
|
||||
|
||||
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera fill="red" stroke-linejoin="bevel"/>
|
||||
return <Camera fill="red" stroke-linejoin="bevel" />;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -60,17 +62,17 @@ 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, your application build size will grow strongly.
|
||||
> :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
|
||||
|
||||
``` js
|
||||
```js
|
||||
import * as icons from 'lucide-preact';
|
||||
|
||||
const Icon = ({name, color, size}) => {
|
||||
const Icon = ({ name, color, size }) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />
|
||||
return <LucideIcon color={color} size={size} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-preact",
|
||||
"description": "A Lucide icon library package for Preact applications",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
@@ -17,17 +17,20 @@
|
||||
"module": "dist/esm/lucide-preact.js",
|
||||
"unpkg": "dist/umd/lucide-preact.min.js",
|
||||
"typings": "dist/lucide-preact.d.ts",
|
||||
"files": ["dist"],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
|
||||
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
|
||||
"build:es": "babel src -d dist/esm",
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test": "jest"
|
||||
"test": "jest",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/preact": "^2.0.1",
|
||||
|
||||
@@ -21,6 +21,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
|
||||
ref?: string | ((component: any) => any) | RefObject<any>;
|
||||
color?: string
|
||||
size?: string | number
|
||||
strokeWidth?: string | number
|
||||
}
|
||||
|
||||
// Generated icons
|
||||
|
||||
@@ -6,30 +6,32 @@ Implementation of the lucide icon library for React Native applications.
|
||||
|
||||
## Installation
|
||||
|
||||
First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
|
||||
First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0.0` installed. Then, install the package:
|
||||
|
||||
```sh
|
||||
yarn add lucide-react-native
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react-native
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ES modules so it's completely threeshakable.
|
||||
It's built with ES modules so it's completely tree-shakable.
|
||||
Each icon can be imported as a react component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import { Camera } from 'lucide-react-native';
|
||||
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -37,19 +39,19 @@ export default App;
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props
|
||||
|
||||
You can also pass custom props that will be added in the svg as attributes.
|
||||
|
||||
``` js
|
||||
```js
|
||||
const App = () => {
|
||||
return <Camera fill="red"/>
|
||||
return <Camera fill="red" />;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -59,13 +61,13 @@ It is possible to create a generic icon component to load icons.
|
||||
|
||||
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import * as icons from 'lucide-react-native';
|
||||
|
||||
const Icon = ({name, color, size}) => {
|
||||
const Icon = ({ name, color, size }) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />
|
||||
return <LucideIcon color={color} size={size} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
||||
@@ -19,7 +19,9 @@
|
||||
"typings": "dist/lucide-react-native.d.ts",
|
||||
"react-native": "dist/esm/lucide-react-native.js",
|
||||
"sideEffects": false,
|
||||
"files": ["dist"],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
@@ -27,7 +29,8 @@
|
||||
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test": "jest"
|
||||
"test": "jest",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^11.2.6",
|
||||
@@ -37,12 +40,12 @@
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-native": "^0.69.0",
|
||||
"react-native-svg": "^12.0.0"
|
||||
"react-native-svg": "^13.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
|
||||
"react-native": ">=0.50.0",
|
||||
"react-native-svg": "^12.0.0"
|
||||
"react-native": "*",
|
||||
"react-native-svg": "^12.0.0 || ^13.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,26 +8,28 @@ Implementation of the lucide icon library for react applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ES modules so it's completely threeshakable.
|
||||
It's built with ES modules so it's completely tree-shakable.
|
||||
Each icon can be imported as a react component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import { Camera } from 'lucide-react';
|
||||
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48}/>
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -35,19 +37,19 @@ export default App;
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props
|
||||
|
||||
You can also pass custom props that will be added in the svg as attributes.
|
||||
|
||||
``` js
|
||||
```js
|
||||
const App = () => {
|
||||
return <Camera fill="red"/>
|
||||
return <Camera fill="red" />;
|
||||
};
|
||||
```
|
||||
|
||||
@@ -57,13 +59,13 @@ It is possible to create a generic icon component to load icons.
|
||||
|
||||
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
|
||||
|
||||
``` js
|
||||
```js
|
||||
import * as icons from 'lucide-react';
|
||||
|
||||
const Icon = ({name, color, size}) => {
|
||||
const Icon = ({ name, color, size }) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />
|
||||
return <LucideIcon color={color} size={size} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-react",
|
||||
"description": "A Lucide icon library package for React applications",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
@@ -18,7 +18,9 @@
|
||||
"unpkg": "dist/umd/lucide-react.min.js",
|
||||
"typings": "dist/lucide-react.d.ts",
|
||||
"sideEffects": false,
|
||||
"files": ["dist"],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
@@ -27,7 +29,8 @@
|
||||
"build:es": "babel src -d dist/esm",
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test": "jest"
|
||||
"test": "jest",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^11.2.6",
|
||||
|
||||
80
packages/lucide-solid/README.md
Normal file
@@ -0,0 +1,80 @@
|
||||
# Lucide Solid
|
||||
|
||||
Implementation of the lucide icon library for solid applications.
|
||||
|
||||
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add lucide-solid
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-solid
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely tree-shakable.
|
||||
Each icon can be imported as a solid component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
import { Camera } from 'lucide-solid';
|
||||
// Returns SolidComponent
|
||||
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props / svg attributes
|
||||
|
||||
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
|
||||
|
||||
```js
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera fill="red" stroke-linejoin="bevel" />;
|
||||
};
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
```tsx
|
||||
import * as icons from 'lucide-solid';
|
||||
import type { LucideProps } from 'lucide-solid';
|
||||
import { splitProps } from 'solid-js';
|
||||
import { Dynamic } from 'solid-js/web';
|
||||
|
||||
const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
|
||||
const [local, others] = splitProps(props, ["name"]);
|
||||
|
||||
return <Dynamic component={icons[local.name]} {...others} />
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
```
|
||||
6
packages/lucide-solid/babel.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const mainConfig = require('../../babel.config');
|
||||
|
||||
module.exports = {
|
||||
presets: ['solid'],
|
||||
env: mainConfig.env,
|
||||
};
|
||||
51
packages/lucide-solid/package.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"name": "lucide-solid",
|
||||
"description": "A Lucide icon library package for Solid applications",
|
||||
"version": "0.88.0-beta.3",
|
||||
"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-solid"
|
||||
},
|
||||
"author": "Eric Fennis",
|
||||
"amdName": "lucide-solid",
|
||||
"main": "dist/cjs/lucide-solid.js",
|
||||
"main:umd": "dist/umd/lucide-solid.js",
|
||||
"module": "dist/esm/lucide-solid.js",
|
||||
"unpkg": "dist/umd/lucide-solid.min.js",
|
||||
"typings": "dist/lucide-solid.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
|
||||
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
|
||||
"build:es": "babel src -d dist/esm",
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test:jest": "jest",
|
||||
"test": "vitest",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"babel-preset-solid": "^1.5.4",
|
||||
"jest": "^26.6.3",
|
||||
"jsdom": "^20.0.0",
|
||||
"solid-js": "^1.4.7",
|
||||
"solid-testing-library": "^0.3.0",
|
||||
"solid-jest": "^0.2.0",
|
||||
"vite": "^2.6.4",
|
||||
"vite-plugin-solid": "^2.3.0",
|
||||
"vitest": "^0.23.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"solid-js": "^1.4.7"
|
||||
}
|
||||
}
|
||||
47
packages/lucide-solid/rollup.config.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import plugins from '../../rollup.plugins';
|
||||
import pkg from './package.json';
|
||||
|
||||
const packageName = 'LucideSolid';
|
||||
const outputFileName = 'lucide-solid';
|
||||
const outputDir = 'dist';
|
||||
const inputs = [`src/lucide-solid.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: ['solid-js', 'solid-js/h'],
|
||||
output: {
|
||||
name: packageName,
|
||||
file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
|
||||
format,
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
'solid-js': 'solid-js',
|
||||
'solid-js/h': 'solid-js/h',
|
||||
},
|
||||
},
|
||||
})),
|
||||
)
|
||||
.flat();
|
||||
|
||||
export default configs;
|
||||
47
packages/lucide-solid/scripts/buildTypes.mjs
Normal file
@@ -0,0 +1,47 @@
|
||||
import path from 'path';
|
||||
import {
|
||||
writeFile,
|
||||
readSvgDirectory,
|
||||
resetFile,
|
||||
toPascalCase,
|
||||
appendFile,
|
||||
getCurrentDirPath
|
||||
} from '../../../scripts/helpers.mjs';
|
||||
|
||||
const currentDir = getCurrentDirPath(import.meta.url)
|
||||
const srcDirectory = path.join(currentDir, '../dist');
|
||||
|
||||
// Declare type definitions
|
||||
const typeDefinitions = `\
|
||||
/// <reference types="solid-js" />
|
||||
import { JSX } from 'solid-js'
|
||||
|
||||
interface LucideProps extends Partial<JSX.IntrinsicElements & JSX.SvgSVGAttributes<SVGSVGElement>> {
|
||||
key?: string | number;
|
||||
ref?: string | ((component: any) => any);
|
||||
color?: string
|
||||
size?: string | number
|
||||
strokeWidth?: string | number
|
||||
class?: string
|
||||
}
|
||||
|
||||
// Generated icons
|
||||
`;
|
||||
|
||||
const ICONS_DIR = path.resolve(currentDir, '../../../icons');
|
||||
const TYPES_FILE = 'lucide-solid.d.ts';
|
||||
|
||||
resetFile(TYPES_FILE, srcDirectory);
|
||||
writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
|
||||
|
||||
const svgFiles = readSvgDirectory(ICONS_DIR);
|
||||
|
||||
svgFiles.forEach(svgFile => {
|
||||
const iconName = path.basename(svgFile, '.svg');
|
||||
const componentName = toPascalCase(iconName);
|
||||
|
||||
const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`;
|
||||
appendFile(exportTypeString, TYPES_FILE, srcDirectory);
|
||||
});
|
||||
|
||||
console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');
|
||||
7
packages/lucide-solid/scripts/exportTemplate.mjs
Normal file
@@ -0,0 +1,7 @@
|
||||
export default ({ componentName, children }) => `
|
||||
import createSolidComponent from '../createSolidComponent';
|
||||
|
||||
const ${componentName} = createSolidComponent('${componentName}', ${JSON.stringify(children)});
|
||||
|
||||
export default ${componentName};
|
||||
`;
|
||||
47
packages/lucide-solid/src/createSolidComponent.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import h from 'solid-js/h';
|
||||
import { splitProps } from 'solid-js';
|
||||
import defaultAttributes from './defaultAttributes';
|
||||
|
||||
/**
|
||||
* Converts string to KebabCase
|
||||
* Copied from scripts/helper. If anyone knows how to properly import it here
|
||||
* then please fix it.
|
||||
*
|
||||
* @param {string} string
|
||||
* @returns {string} A kebabized string
|
||||
*/
|
||||
export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
|
||||
|
||||
export default (iconName, iconNode) => {
|
||||
const Component = props => {
|
||||
const [localProps, rest] = splitProps(props, [
|
||||
'color',
|
||||
'size',
|
||||
'strokeWidth',
|
||||
'children',
|
||||
'class',
|
||||
]);
|
||||
|
||||
const svgProps = {
|
||||
...defaultAttributes,
|
||||
width: () => (localProps.size != null ? localProps.size : defaultAttributes.width),
|
||||
height: () => (localProps.size != null ? localProps.size : defaultAttributes.height),
|
||||
stroke: () => (localProps.color != null ? localProps.color : defaultAttributes.stroke),
|
||||
'stroke-width': () =>
|
||||
localProps.strokeWidth != null ? localProps.strokeWidth : defaultAttributes['stroke-width'],
|
||||
class: () =>
|
||||
`lucide lucide-${toKebabCase(iconName)} ${
|
||||
localProps.class != null ? localProps.class : ''
|
||||
}`,
|
||||
};
|
||||
|
||||
return h(
|
||||
'svg',
|
||||
[svgProps, rest],
|
||||
[...iconNode.map(([tag, attrs]) => h(tag, attrs)), localProps.children],
|
||||
);
|
||||
};
|
||||
|
||||
Component.displayName = `${iconName}`;
|
||||
return Component;
|
||||
};
|
||||
11
packages/lucide-solid/src/defaultAttributes.js
Normal 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',
|
||||
};
|
||||
1
packages/lucide-solid/src/icons/.gitkeep
Normal file
@@ -0,0 +1 @@
|
||||
Folder for generated icons
|
||||
1
packages/lucide-solid/src/lucide-solid.js
Normal file
@@ -0,0 +1 @@
|
||||
export * from './icons';
|
||||
@@ -0,0 +1,5 @@
|
||||
// Vitest Snapshot v1
|
||||
|
||||
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 lucide-grid \\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\" key=\\"maln0c\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\" key=\\"1uch6j\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\" key=\\"1xojw2\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\" key=\\"nvcl17\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\" key=\\"jcv93v\\"></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 lucide-grid \\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\" key=\\"maln0c\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\" key=\\"1uch6j\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\" key=\\"1xojw2\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\" key=\\"nvcl17\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\" key=\\"jcv93v\\"></line></svg>"`;
|
||||
30
packages/lucide-solid/tests/lucide-solid.spec.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render } from 'solid-testing-library'
|
||||
import { Grid } from '../src/icons'
|
||||
|
||||
describe('Using lucide icon components', () => {
|
||||
it('should render an component', () => {
|
||||
const { container } = render(() => <Grid/> );
|
||||
|
||||
expect( container.innerHTML ).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should adjust the size, stroke color and stroke width', async () => {
|
||||
const testId = 'grid-icon';
|
||||
const { container, getByTestId } = render( () =>
|
||||
<Grid
|
||||
data-testid={testId}
|
||||
size={48}
|
||||
stroke="red"
|
||||
strokeWidth={4}
|
||||
/>,
|
||||
);
|
||||
|
||||
const { attributes } = await getByTestId(testId) as unknown as{ attributes: Record<string, { value: string }>};
|
||||
expect(attributes.stroke.value).toBe('red');
|
||||
expect(attributes.width.value).toBe('48');
|
||||
expect(attributes.height.value).toBe('48');
|
||||
expect(attributes['stroke-width'].value).toBe('4');
|
||||
expect( container.innerHTML ).toMatchSnapshot();
|
||||
});
|
||||
})
|
||||
1
packages/lucide-solid/tests/setupVitest.js
Normal file
@@ -0,0 +1 @@
|
||||
import '@testing-library/jest-dom';
|
||||
15
packages/lucide-solid/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"types": ["vite/client"],
|
||||
"noEmit": true,
|
||||
"isolatedModules": true
|
||||
}
|
||||
}
|
||||
19
packages/lucide-solid/vitest.config.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import solidPlugin from 'vite-plugin-solid';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [solidPlugin()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
transformMode: {
|
||||
web: [/\.jsx?$/],
|
||||
},
|
||||
setupFiles: './tests/setupVitest.js',
|
||||
threads: false,
|
||||
isolate: false,
|
||||
},
|
||||
resolve: {
|
||||
conditions: ['development', 'browser'],
|
||||
},
|
||||
});
|
||||
@@ -21,23 +21,25 @@ This package is suitable for very specific use cases for example if you want to
|
||||
|
||||
```sh
|
||||
yarn add lucide-static
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-static
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
|
||||
|
||||
<!-- Icon Font -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "LucideIcons";
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
|
||||
font-family: 'LucideIcons';
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -52,16 +54,17 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
|
||||
|
||||
To use it in for example html:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="~lucide-static/icons/home.svg">
|
||||
<img src="~lucide-static/icons/home.svg" />
|
||||
```
|
||||
|
||||
``` css
|
||||
```css
|
||||
.home-icon {
|
||||
background-image: url(~lucide-static/icons/home.svg)
|
||||
background-image: url(~lucide-static/icons/home.svg);
|
||||
}
|
||||
```
|
||||
|
||||
Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
|
||||
|
||||
#### Svg file Inline
|
||||
@@ -70,7 +73,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
|
||||
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
|
||||
|
||||
```js
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right'
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right';
|
||||
|
||||
// return string of a svg
|
||||
```
|
||||
@@ -81,7 +84,7 @@ You may need additional loader for this.
|
||||
|
||||
```html
|
||||
<!-- Icon Sprite, not recommended for production! -->
|
||||
<img src="lucide-static/sprite.svg#home">
|
||||
<img src="lucide-static/sprite.svg#home" />
|
||||
|
||||
<!-- or -->
|
||||
<svg
|
||||
@@ -96,22 +99,20 @@ You may need additional loader for this.
|
||||
<use href="#alert-triangle" />
|
||||
</svg>
|
||||
|
||||
<svg>
|
||||
...sprite svg
|
||||
</svg>
|
||||
<svg>...sprite svg</svg>
|
||||
```
|
||||
|
||||
If you'd prefer, you can use CSS to hold your base SVG properties
|
||||
|
||||
```css
|
||||
.lucide-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -134,20 +135,19 @@ and update the svg as follows
|
||||
### Icon Font
|
||||
|
||||
```css
|
||||
@import("~lucide-static/font/Lucide.css")
|
||||
@import ('~lucide-static/font/Lucide.css');
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="icon-home"></div>
|
||||
```
|
||||
|
||||
|
||||
### Node.js
|
||||
|
||||
To use lucide icons in your Nodejs project you can import each icon as:
|
||||
|
||||
```js
|
||||
const { messageSquare } = require('lucide-static/lib')
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
```
|
||||
|
||||
> Note: Each icon name is in camelCase.
|
||||
@@ -155,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
|
||||
#### Example in node.js project
|
||||
|
||||
```js
|
||||
const express = require('express')
|
||||
const { messageSquare } = require('lucide-static/lib')
|
||||
const app = express()
|
||||
const port = 3000
|
||||
const express = require('express');
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
const app = express();
|
||||
const port = 3000;
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send(`
|
||||
@@ -173,12 +173,12 @@ app.get('/', (req, res) => {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
})
|
||||
`);
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening at http://localhost:${port}`)
|
||||
})
|
||||
console.log(`Example app listening at http://localhost:${port}`);
|
||||
});
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
@@ -16,7 +16,8 @@
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm copy:icons && pnpm copy:tags && pnpm build:lib",
|
||||
"build:lib": "node ./scripts/buildLib.mjs",
|
||||
"clean": "rm -rf lib && rm -rf build && rm -rf icons && rm -f sprite.svg && rm -f tags.json"
|
||||
"clean": "rm -rf lib && rm -rf build && rm -rf icons && rm -f sprite.svg && rm -f tags.json",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.3.2",
|
||||
|
||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for svelte applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
@@ -42,14 +44,14 @@ import { Camera } from 'lucide-svelte'
|
||||
|
||||
### Available props
|
||||
|
||||
| name | type | default
|
||||
| -------------- | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth` | *Number* | 2
|
||||
| `*<SVGProps>` | *String* | -
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
| `*<SVGProps>` | _String_ | - |
|
||||
|
||||
* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
|
||||
- All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
|
||||
|
||||
### Example of custom props
|
||||
|
||||
@@ -71,7 +73,7 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
#### Icon Component Example
|
||||
|
||||
``` svelte
|
||||
```svelte
|
||||
<script>
|
||||
import * as icons from "lucide-svelte";
|
||||
export let name;
|
||||
@@ -82,7 +84,7 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
##### Then you can use it like this
|
||||
|
||||
``` svelte
|
||||
```svelte
|
||||
<script>
|
||||
import LucideIcon from "./LucideIcon";
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-svelte",
|
||||
"description": "A Lucide icon library package for Svelte applications",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
@@ -19,7 +19,9 @@
|
||||
"unpkg": "dist/umd/lucide-svelte.min.js",
|
||||
"typings": "dist/lucide-svelte.d.ts",
|
||||
"sideEffects": false,
|
||||
"files": ["dist"],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles && pnpm build:types",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
@@ -29,7 +31,8 @@
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watch"
|
||||
"test:watch": "jest --watch",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
|
||||
@@ -4,33 +4,32 @@ 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-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue)
|
||||
> :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-next
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue-next
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
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
|
||||
```vue
|
||||
<template>
|
||||
<Camera
|
||||
color="red"
|
||||
:size="32"
|
||||
/>
|
||||
<Camera color="red" :size="32" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -38,27 +37,26 @@ You can pass additional props to adjust the icon.
|
||||
import { Camera } from 'lucide-vue-next';
|
||||
|
||||
export default {
|
||||
name: "My Component",
|
||||
name: 'My Component',
|
||||
components: { Camera }
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| `defaultClass`| *String* | lucide-icon
|
||||
| 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
|
||||
```vue
|
||||
<template>
|
||||
<Camera fill="red" />
|
||||
</template>
|
||||
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
#### Icon Component Example
|
||||
|
||||
``` vue
|
||||
```vue
|
||||
<template>
|
||||
<component :is="icon" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as icons from "lucide-vue-next";
|
||||
import * as icons from 'lucide-vue-next';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
return icons[this.name];
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
##### Then you can use it like this
|
||||
|
||||
``` vue
|
||||
```vue
|
||||
<template>
|
||||
<div id="app">
|
||||
<Icon name="Airplay" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-vue-next",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 3 applications",
|
||||
"license": "ISC",
|
||||
@@ -19,7 +19,10 @@
|
||||
"unpkg": "dist/umd/lucide-vue-next.min.js",
|
||||
"typings": "dist/lucide-vue-next.d.ts",
|
||||
"sideEffects": false,
|
||||
"files": ["dist", "nuxt.js"],
|
||||
"files": [
|
||||
"dist",
|
||||
"nuxt.js"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
@@ -29,7 +32,8 @@
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watchAll"
|
||||
"test:watch": "jest --watchAll",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/vue": "^6.4.2",
|
||||
|
||||
@@ -10,27 +10,26 @@ Implementation of the lucide icon library for Vue applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
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
|
||||
```vue
|
||||
<template>
|
||||
<Camera
|
||||
color="red"
|
||||
:size="32"
|
||||
/>
|
||||
<Camera color="red" :size="32" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -38,27 +37,26 @@ You can pass additional props to adjust the icon.
|
||||
import { Camera } from 'lucide-vue';
|
||||
|
||||
export default {
|
||||
name: "My Component",
|
||||
name: 'My Component',
|
||||
components: { Camera }
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| `defaultClass`| *String* | lucide-icon
|
||||
| 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
|
||||
```vue
|
||||
<template>
|
||||
<Camera fill="red" />
|
||||
</template>
|
||||
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
#### Icon Component Example
|
||||
|
||||
``` vue
|
||||
```vue
|
||||
<template>
|
||||
<component :is="icon" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as icons from "lucide-vue";
|
||||
import * as icons from 'lucide-vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
return icons[this.name];
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
##### Then you can use it like this
|
||||
|
||||
``` vue
|
||||
```vue
|
||||
<template>
|
||||
<div id="app">
|
||||
<Icon name="Airplay" />
|
||||
@@ -109,17 +107,21 @@ export default {
|
||||
## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
|
||||
|
||||
### Setup
|
||||
|
||||
In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
|
||||
|
||||
```js
|
||||
export default {
|
||||
buildModules: ['lucide-vue/nuxt']
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### How to use
|
||||
|
||||
Icon components are prefixed with `Icon`. Use icon components without importing them.
|
||||
|
||||
### Example
|
||||
|
||||
```html
|
||||
<IconCamera color="red" :size="32" />
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-vue",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"author": "Eric Fennis",
|
||||
"description": "A Lucide icon library package for Vue 2 applications",
|
||||
"license": "ISC",
|
||||
@@ -18,7 +18,9 @@
|
||||
"module": "dist/esm/lucide-vue.js",
|
||||
"unpkg": "dist/umd/lucide-vue.min.js",
|
||||
"sideEffects": false,
|
||||
"files": ["dist"],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
@@ -27,7 +29,8 @@
|
||||
"build:es": "babel src -d dist/esm",
|
||||
"build:bundles": "rollup -c ./rollup.config.js",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watchAll"
|
||||
"test:watch": "jest --watchAll",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.2",
|
||||
|
||||
@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
|
||||
|
||||
### Package Managers
|
||||
|
||||
``` bash
|
||||
```sh
|
||||
npm install lucide
|
||||
#or
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Development version -->
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
||||
|
||||
@@ -44,7 +48,7 @@ Here is a complete example with unpkg
|
||||
|
||||
### With ESModules
|
||||
|
||||
To reduce bundle size, lucide is built to be fully treeshakable.
|
||||
To reduce bundle size, lucide is built to be fully tree-shakable.
|
||||
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
|
||||
|
||||
```html
|
||||
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
|
||||
import { createIcons, icons } from 'lucide';
|
||||
|
||||
// Caution, this will import all the icons and bundle them.
|
||||
createIcons({icons});
|
||||
createIcons({ icons });
|
||||
|
||||
// Recommended way, to include only the icons you need.
|
||||
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
|
||||
@@ -65,8 +69,8 @@ createIcons({
|
||||
icons: {
|
||||
Menu,
|
||||
ArrowRight,
|
||||
Globe,
|
||||
},
|
||||
Globe
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
@@ -83,9 +87,9 @@ createIcons({
|
||||
attrs: {
|
||||
class: ['my-custom-class', 'icon'],
|
||||
'stroke-width': 1,
|
||||
stroke: '#333',
|
||||
stroke: '#333'
|
||||
},
|
||||
nameAttr: 'icon-name', // attribute for the icon name.
|
||||
nameAttr: 'icon-name' // attribute for the icon name.
|
||||
});
|
||||
```
|
||||
|
||||
@@ -98,8 +102,8 @@ createIcons({
|
||||
icons: {
|
||||
Menu,
|
||||
ArrowRight,
|
||||
Globe,
|
||||
},
|
||||
Globe
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide",
|
||||
"description": "A Lucide icon library package for web and javascript applications.",
|
||||
"version": "0.84.0",
|
||||
"version": "0.93.0",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
@@ -18,7 +18,9 @@
|
||||
"unpkg": "dist/umd/lucide.min.js",
|
||||
"typings": "dist/lucide.d.ts",
|
||||
"sideEffects": false,
|
||||
"files": ["dist"],
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles && pnpm build:types",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
|
||||
9599
pnpm-lock.yaml
generated
@@ -1,21 +1,14 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint', 'import', 'prettier'],
|
||||
plugins: ['@typescript-eslint', 'import'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:@next/next/recommended',
|
||||
'prettier',
|
||||
],
|
||||
rules: {
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
singleQuote: true,
|
||||
trailingComma: 'all',
|
||||
},
|
||||
],
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
|
||||
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* eslint-disable */
|
||||
module.exports = {
|
||||
webpack(config) {
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
issuer: {
|
||||
and: [/\.(js|ts)x?$/],
|
||||
},
|
||||
|
||||
use: ['@svgr/webpack'],
|
||||
use: ["@svgr/webpack"]
|
||||
});
|
||||
|
||||
return config;
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@@ -10,16 +10,16 @@
|
||||
"export": "next export -o build",
|
||||
"deploy": "pnpm build && pnpm export",
|
||||
"lint": "eslint .",
|
||||
"test": "jest"
|
||||
"lint:fix": "eslint --fix .",
|
||||
"test": "jest",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "1.8.8",
|
||||
"@emotion/react": "^11",
|
||||
"@emotion/styled": "^11",
|
||||
"@mdx-js/loader": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@next/mdx": "^11.0.0",
|
||||
"@svgr/webpack": "^6.2.1",
|
||||
"@svgr/webpack": "^6.3.1",
|
||||
"downloadjs": "^1.4.7",
|
||||
"framer-motion": "^4",
|
||||
"fuse.js": "^6.5.3",
|
||||
@@ -37,23 +37,24 @@
|
||||
"react-svg-loader": "^3.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@next/eslint-plugin-next": "^11.1.0",
|
||||
"@testing-library/dom": "^7.24.4",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.0.4",
|
||||
"@testing-library/react-hooks": "^3.4.2",
|
||||
"react-test-renderer": "17.0.2",
|
||||
"@next/eslint-plugin-next": "^12.2.5",
|
||||
"@testing-library/dom": "^7.31.2",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
"@testing-library/react-hooks": "^8.0.1",
|
||||
"@types/jest": "^28.1.7",
|
||||
"@types/node": "^14.0.11",
|
||||
"@types/react": "^16.9.35",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.1",
|
||||
"@typescript-eslint/parser": "^4.29.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.34.0",
|
||||
"@typescript-eslint/parser": "^5.34.0",
|
||||
"babel-jest": "^26.5.2",
|
||||
"babel-loader": "^8.1.0",
|
||||
"cheerio": "^1.0.0-rc.3",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint": "^8.22.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"jest": "^26.5.2",
|
||||
"prettier": "^2.3.2",
|
||||
"react-test-renderer": "17.0.2",
|
||||
"typescript": "^4.3.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="24" height="24" viewBox="-2 -2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0h20v20H0V0Z" fill="#F7DF1E"/>
|
||||
<path d="M13.43 15.62c.41.67.92 1.14 1.87 1.14.76 0 1.27-.38 1.27-.92 0-.63-.5-.89-1.36-1.24l-.48-.22c-1.37-.57-2.25-1.3-2.25-2.82 0-1.4 1.08-2.48 2.73-2.48 1.2 0 2.06.41 2.7 1.5l-1.47.94c-.34-.57-.7-.79-1.23-.79-.54 0-.9.35-.9.8 0 .57.36.79 1.18 1.14l.45.19c1.62.7 2.5 1.4 2.5 2.95 0 1.68-1.33 2.63-3.1 2.63-1.75 0-2.9-.85-3.44-1.93l1.53-.9Zm-6.64.16c.29.54.58.98 1.21.98s1.02-.25 1.02-1.17V9.17h1.87v6.42c0 1.97-1.14 2.85-2.8 2.85a2.9 2.9 0 0 1-2.82-1.74l1.52-.92Z" fill="#000"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 632 B After Width: | Height: | Size: 634 B |
6
site/public/framework-logos/react-native.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="35" height="32" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.5 12.3a2 2 0 1 0 0-4.1 2 2 0 0 0 0 4Z" fill="#20232a"/>
|
||||
<path d="M11.5 14.4c6 0 11-1.8 11-4.2 0-2.3-5-4.2-11-4.2s-11 2-11 4.2c0 2.4 5 4.2 11 4.2Z" stroke="#20232a"/>
|
||||
<path d="M7.9 12.3c3 5.3 7 8.6 9.1 7.5 2-1.2 1.2-6.4-1.9-11.7C12.1 3 8.1-.5 6 .7 4 2 4.8 7.1 7.9 12.3Z" stroke="#20232a"/>
|
||||
<path d="M7.9 8.1c-3 5.3-4 10.5-1.9 11.7 2 1.1 6.1-2.2 9.1-7.5 3-5.2 4-10.4 1.9-11.6C15-.5 10.9 3 7.9 8.1Z" stroke="#20232a"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 540 B |
35
site/public/framework-logos/solid.svg
Normal file
@@ -0,0 +1,35 @@
|
||||
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#a)">
|
||||
<path d="M31.42 6.75S21.2-.77 13.3.96l-.58.2a5.48 5.48 0 0 0-2.7 1.73l-.38.58-2.9 5.01 5.02.97c2.12 1.35 4.82 1.92 7.32 1.35l8.87 1.73 3.47-5.78Z" fill="#76B3E1"/>
|
||||
<path opacity=".3" d="M31.42 6.75S21.2-.77 13.3.96l-.58.2a5.48 5.48 0 0 0-2.7 1.73l-.38.58-2.9 5.01 5.02.97c2.12 1.35 4.82 1.92 7.32 1.35l8.87 1.73 3.47-5.78Z" fill="url(#b)"/>
|
||||
<path d="m10.02 6.75-.77.19c-3.27.96-4.24 4.05-2.5 6.75 1.92 2.5 5.97 3.85 9.25 2.89l11.95-4.05S17.73 5.01 10.02 6.75Z" fill="#518AC8"/>
|
||||
<path opacity=".3" d="m10.02 6.75-.77.19c-3.27.96-4.24 4.05-2.5 6.75 1.92 2.5 5.97 3.85 9.25 2.89l11.95-4.05S17.73 5.01 10.02 6.75Z" fill="url(#c)"/>
|
||||
<path d="M25.83 15.42a8.67 8.67 0 0 0-9.25-2.89L4.63 16.39.77 23.13l21.6 3.67 3.85-6.94c.77-1.35.58-2.9-.39-4.44Z" fill="url(#d)"/>
|
||||
<path d="M21.98 22.17a8.67 8.67 0 0 0-9.26-2.9L.77 23.14S11 30.84 18.9 28.92l.58-.2c3.28-.96 4.43-4.05 2.5-6.55Z" fill="url(#e)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="b" x1="5.3" y1=".58" x2="29.3" y2="12.24" gradientUnits="userSpaceOnUse">
|
||||
<stop offset=".1" stop-color="#76B3E1"/>
|
||||
<stop offset=".3" stop-color="#DCF2FD"/>
|
||||
<stop offset="1" stop-color="#76B3E1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="c" x1="18.47" y1="6.28" x2="14.27" y2="20.28" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#76B3E1"/>
|
||||
<stop offset=".5" stop-color="#4377BB"/>
|
||||
<stop offset="1" stop-color="#1F3B77"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="d" x1="3.55" y1="12.38" x2="27.82" y2="28.88" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#315AA9"/>
|
||||
<stop offset=".5" stop-color="#518AC8"/>
|
||||
<stop offset="1" stop-color="#315AA9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="e" x1="14.5" y1="14.36" x2="4.7" y2="50.27" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4377BB"/>
|
||||
<stop offset=".5" stop-color="#1A336B"/>
|
||||
<stop offset="1" stop-color="#1A336B"/>
|
||||
</linearGradient>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h32v29.94H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
15
site/public/logo-icon.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<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"
|
||||
id="lucide-logo"
|
||||
>
|
||||
<path d="M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557" stroke="#2D3748" />
|
||||
<path d="M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21" stroke="#F56565" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 590 B |
9
site/public/lucide-logo-repo.svg
Normal file
@@ -0,0 +1,9 @@
|
||||
<svg width="98" height="32" viewBox="0 0 98 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="98" height="32" rx="5" fill="white"/>
|
||||
<svg height="24" width="82" y="4" x="8" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
|
||||
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -1,9 +0,0 @@
|
||||
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="78" height="32" rx="5" fill="#fff"/>
|
||||
<path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="39" cy="16" r="2" fill="#DDD"/>
|
||||
<path d="M59 5 49 8.6l1.5 13.2 8.5 4.7 8.5-4.7L69 8.6 59 5Z" fill="#DD0031"/>
|
||||
<path d="M59 5v21.5l8.5-4.7L69 8.6 59 5Z" fill="#C3002F"/>
|
||||
<path d="m59 7.4-6.3 14h2.4l1.2-3.1h5.3l1.3 3h2.3L59 7.4Zm1.8 9h-3.6l1.8-4.5 1.8 4.4Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 719 B |