Compare commits
24 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3529cd3f4d | ||
|
|
a4d568f26e | ||
|
|
9e524fd557 | ||
|
|
b5c71c4fc3 | ||
|
|
aa8861a2cd | ||
|
|
a41918a81e | ||
|
|
33be2c2430 | ||
|
|
eb706417e6 | ||
|
|
01e11a61f8 | ||
|
|
b323bbd28e | ||
|
|
514e88bbf9 | ||
|
|
de6ed26152 | ||
|
|
b8cc9ea3c8 | ||
|
|
cc2ac8bfcd | ||
|
|
0e340a2679 | ||
|
|
c15e3914a6 | ||
|
|
ff81fbfd9a | ||
|
|
5317abb867 | ||
|
|
ac80b9e58f | ||
|
|
a25f139953 | ||
|
|
b457c8dea1 | ||
|
|
2e24567f8e | ||
|
|
9b90bc4d51 | ||
|
|
6fd0380e19 |
4
.github/workflows/ci.yml
vendored
@@ -14,8 +14,8 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-angular.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-angular:
|
lucide-angular:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-angular test
|
run: pnpm --filter lucide-angular test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-preact.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-preact:
|
lucide-preact:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-preact test
|
run: pnpm --filter lucide-preact test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-react-native.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-react-native:
|
lucide-react-native:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-react-native test
|
run: pnpm --filter lucide-react-native test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-react.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-react:
|
lucide-react:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-react test
|
run: pnpm --filter lucide-react test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-solid.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-solid:
|
lucide-solid:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-solid test
|
run: pnpm --filter lucide-solid test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-static.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-static:
|
lucide-static:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -42,4 +42,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Build
|
- name: Build
|
||||||
run: pnpm --filter lucide-static build
|
run: pnpm --filter lucide-static build
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-svelte.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-svelte:
|
lucide-svelte:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-svelte test
|
run: pnpm --filter lucide-svelte test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-vue-next.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-vue-next:
|
lucide-vue-next:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-vue-next test
|
run: pnpm --filter lucide-vue-next test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide-vue.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide-vue:
|
lucide-vue:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide-vue test
|
run: pnpm --filter lucide-vue test
|
||||||
|
|
||||||
|
|||||||
5
.github/workflows/lucide.yml
vendored
@@ -12,8 +12,8 @@ jobs:
|
|||||||
lucide:
|
lucide:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -45,4 +45,3 @@ jobs:
|
|||||||
|
|
||||||
- name: Test
|
- name: Test
|
||||||
run: pnpm --filter lucide test
|
run: pnpm --filter lucide test
|
||||||
|
|
||||||
|
|||||||
53
.github/workflows/release.yml
vendored
@@ -3,7 +3,7 @@ name: Release Packages
|
|||||||
on:
|
on:
|
||||||
push:
|
push:
|
||||||
tags:
|
tags:
|
||||||
- "v*"
|
- 'v*'
|
||||||
|
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
inputs:
|
inputs:
|
||||||
@@ -32,8 +32,8 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -86,9 +86,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -141,9 +141,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -196,9 +196,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -251,9 +251,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -306,9 +306,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -361,9 +361,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -416,9 +416,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -471,9 +471,9 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -526,10 +526,10 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: [pre-build, lucide-font]
|
needs: [pre-build, lucide-font]
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/download-artifact@v2
|
- uses: actions/download-artifact@v2
|
||||||
|
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -582,8 +582,8 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: pre-build
|
needs: pre-build
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/setup-node@v3.4.1
|
- uses: actions/setup-node@v3
|
||||||
with:
|
with:
|
||||||
node-version: 16
|
node-version: 16
|
||||||
|
|
||||||
@@ -639,7 +639,7 @@ jobs:
|
|||||||
mkdir lucide-font
|
mkdir lucide-font
|
||||||
pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
|
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
|
uses: actions/upload-artifact@v1
|
||||||
with:
|
with:
|
||||||
name: lucide-font
|
name: lucide-font
|
||||||
@@ -652,7 +652,7 @@ jobs:
|
|||||||
container:
|
container:
|
||||||
image: cirrusci/flutter:latest
|
image: cirrusci/flutter:latest
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/download-artifact@v2
|
- uses: actions/download-artifact@v2
|
||||||
- uses: actions/cache@v2
|
- uses: actions/cache@v2
|
||||||
with:
|
with:
|
||||||
@@ -735,13 +735,14 @@ jobs:
|
|||||||
]
|
]
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- uses: actions/checkout@v2
|
- uses: actions/checkout@v3
|
||||||
- uses: actions/download-artifact@v2
|
- uses: actions/download-artifact@v2
|
||||||
|
|
||||||
- name: Commit package files
|
- name: Commit package files
|
||||||
run: |
|
run: |
|
||||||
mv lucide-package-json/package.json packages/lucide/package.json
|
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-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-vue-package-json/package.json packages/lucide-vue/package.json
|
||||||
mv lucide-preact-package-json/package.json packages/lucide-preact/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
|
mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json
|
||||||
|
|||||||
46
README.md
@@ -17,9 +17,10 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
|
|||||||
|
|
||||||
### Why choose Lucide over Feather Icons
|
### Why choose Lucide over Feather Icons
|
||||||
|
|
||||||
- Lucide already expanded the icon set by 130+ in less than a year, so more icons to work with.
|
- More icons to work with: Lucide already has hundreds of icons more than Feather does.
|
||||||
|
- Official librairies and integrations with popular frameworks and design tools.
|
||||||
- Well maintained code base.
|
- Well maintained code base.
|
||||||
- Active community.
|
- Active community, regularly growing and improving the set.
|
||||||
|
|
||||||
## Table of Contents
|
## Table of Contents
|
||||||
|
|
||||||
@@ -56,9 +57,11 @@ Implementation of the lucide icon library for web applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install lucide
|
npm install lucide
|
||||||
|
```
|
||||||
|
|
||||||
#or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
yarn add lucide
|
yarn add lucide
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -70,9 +73,11 @@ Implementation of the lucide icon library for react applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-react
|
yarn add lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react
|
npm install lucide-react
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -84,9 +89,11 @@ Implementation of the lucide icon library for React Native applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-react-native
|
yarn add lucide-react-native
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react-native
|
npm install lucide-react-native
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -98,9 +105,11 @@ Implementation of the lucide icon library for vue applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-vue
|
yarn add lucide-vue
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue
|
npm install lucide-vue
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -112,9 +121,11 @@ Implementation of the lucide icon library for vue applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-vue-next
|
yarn add lucide-vue-next
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue-next
|
npm install lucide-vue-next
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -124,9 +135,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-angular
|
yarn add lucide-angular
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-angular
|
npm install lucide-angular
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -138,9 +151,11 @@ Implementation of the lucide icon library for preact applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-preact
|
yarn add lucide-preact
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-preact
|
npm install lucide-preact
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -157,9 +172,11 @@ NPM package
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-static
|
yarn add lucide-static
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-static
|
npm install lucide-static
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -197,9 +214,11 @@ Implementation of the lucide icon library for Svelte applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-svelte
|
yarn add lucide-svelte
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-svelte
|
npm install lucide-svelte
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -211,9 +230,11 @@ Implementation of the lucide icon library for solid applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-solid
|
yarn add lucide-solid
|
||||||
|
```
|
||||||
|
|
||||||
#or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-solid
|
npm install lucide-solid
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -245,4 +266,3 @@ Thank you to all the people who contributed to Lucide!
|
|||||||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
|
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
|
||||||
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
|
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|||||||
@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install lucide
|
npm install lucide
|
||||||
|
```
|
||||||
|
|
||||||
#or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
yarn add lucide
|
yarn add lucide
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-react
|
yarn add lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react
|
npm install lucide-react
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-vue
|
yarn add lucide-vue
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue
|
npm install lucide-vue
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-vue-next
|
yarn add lucide-vue-next
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue-next
|
npm install lucide-vue-next
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-svelte
|
yarn add lucide-svelte
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-svelte
|
npm install lucide-svelte
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-angular
|
yarn add lucide-angular
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-angular
|
npm install lucide-angular
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-preact
|
yarn add lucide-preact
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-preact
|
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.
|
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Laravel
|
## Laravel
|
||||||
|
|
||||||
|
|||||||
@@ -6,9 +6,11 @@ Implementation of the lucide icon library for angular applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-angular
|
yarn add lucide-angular
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-angular
|
npm install lucide-angular
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
|
|||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.css']
|
styleUrls: ['./app.component.css']
|
||||||
})
|
})
|
||||||
|
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
const div = document.getElementById('lucide-icon');
|
const div = document.getElementById('lucide-icon');
|
||||||
@@ -51,7 +52,7 @@ 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`.
|
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||||
|
|
||||||
@@ -65,9 +66,7 @@ import { AppComponent } from './app.component';
|
|||||||
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [AppComponent],
|
||||||
AppComponent
|
|
||||||
],
|
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
@@ -76,7 +75,6 @@ import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
|||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
|
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -86,7 +84,7 @@ export class AppModule { }
|
|||||||
<lucide-icon name="edit" 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`.
|
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||||
|
|
||||||
@@ -100,18 +98,11 @@ import { AppComponent } from './app.component';
|
|||||||
import { LucideAngularModule } from 'lucide-angular';
|
import { LucideAngularModule } from 'lucide-angular';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [AppComponent],
|
||||||
AppComponent
|
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
|
||||||
],
|
|
||||||
imports: [
|
|
||||||
BrowserModule,
|
|
||||||
AppRoutingModule,
|
|
||||||
LucideAngularModule.pick({ })
|
|
||||||
],
|
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
|
|
||||||
export class AppModule {}
|
export class AppModule {}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
|
|||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.css']
|
styleUrls: ['./app.component.css']
|
||||||
})
|
})
|
||||||
|
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
ico1 = Airplay;
|
ico1 = Airplay;
|
||||||
ico2 = Circle;
|
ico2 = Circle;
|
||||||
|
|||||||
@@ -10,9 +10,11 @@ Implementation of the lucide icon library for preact applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-preact
|
yarn add lucide-preact
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-preact
|
npm install lucide-preact
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -31,7 +33,7 @@ import { Camera } from 'lucide-preact';
|
|||||||
|
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera color="red" size={48}/>
|
return <Camera color="red" size={48} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -39,11 +41,11 @@ export default App;
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
|
|
||||||
### Custom props / svg attributes
|
### Custom props / svg attributes
|
||||||
|
|
||||||
@@ -52,7 +54,7 @@ You can also pass custom props that will be added in the as attributes. With tha
|
|||||||
```js
|
```js
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera fill="red" stroke-linejoin="bevel"/>
|
return <Camera fill="red" stroke-linejoin="bevel" />;
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -72,7 +74,7 @@ import * as icons from 'lucide-preact';
|
|||||||
const Icon = ({ name, color, size }) => {
|
const Icon = ({ name, color, size }) => {
|
||||||
const LucideIcon = icons[name];
|
const LucideIcon = icons[name];
|
||||||
|
|
||||||
return <LucideIcon color={color} size={size} />
|
return <LucideIcon color={color} size={size} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Icon;
|
export default Icon;
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-react-native
|
yarn add lucide-react-native
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react-native
|
npm install lucide-react-native
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -6,9 +6,11 @@ Implementation of the lucide icon library for react applications
|
|||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn add lucide-react
|
yarn add lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react
|
npm install lucide-react
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -27,7 +29,7 @@ import { Camera } from 'lucide-react';
|
|||||||
|
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera color="red" size={48}/>
|
return <Camera color="red" size={48} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -35,11 +37,11 @@ export default App;
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -48,7 +50,7 @@ You can also pass custom props that will be added in the svg as attributes.
|
|||||||
```js
|
```js
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera fill="red"/>
|
return <Camera fill="red" />;
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -66,7 +68,7 @@ import * as icons from 'lucide-react';
|
|||||||
const Icon = ({ name, color, size }) => {
|
const Icon = ({ name, color, size }) => {
|
||||||
const LucideIcon = icons[name];
|
const LucideIcon = icons[name];
|
||||||
|
|
||||||
return <LucideIcon color={color} size={size} />
|
return <LucideIcon color={color} size={size} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Icon;
|
export default Icon;
|
||||||
|
|||||||
@@ -19,9 +19,11 @@ This package is suitable for very specific use cases for example if you want to
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-static
|
yarn add lucide-static
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-static
|
npm install lucide-static
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -29,13 +31,13 @@ npm install lucide-static
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Svg File -->
|
<!-- 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 -->
|
<!-- Icon Font -->
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "LucideIcons";
|
font-family: 'LucideIcons';
|
||||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
|
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
@@ -52,12 +54,12 @@ To use it in for example html:
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Svg File -->
|
<!-- Svg File -->
|
||||||
<img src="~lucide-static/icons/home.svg">
|
<img src="~lucide-static/icons/home.svg" />
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.home-icon {
|
.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/).
|
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import arrowRightIcon from 'lucide-static/icons/arrow-right'
|
import arrowRightIcon from 'lucide-static/icons/arrow-right';
|
||||||
|
|
||||||
// return string of a svg
|
// return string of a svg
|
||||||
```
|
```
|
||||||
@@ -80,7 +82,7 @@ You may need additional loader for this.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Icon Sprite, not recommended for production! -->
|
<!-- Icon Sprite, not recommended for production! -->
|
||||||
<img src="lucide-static/sprite.svg#home">
|
<img src="lucide-static/sprite.svg#home" />
|
||||||
|
|
||||||
<!-- or -->
|
<!-- or -->
|
||||||
<svg
|
<svg
|
||||||
@@ -133,20 +135,19 @@ and update the svg as follows
|
|||||||
### Icon Font
|
### Icon Font
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@import("~lucide-static/font/Lucide.css")
|
@import ('~lucide-static/font/Lucide.css');
|
||||||
```
|
```
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="icon-home"></div>
|
<div class="icon-home"></div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Node.js
|
### Node.js
|
||||||
|
|
||||||
To use lucide icons in your Nodejs project you can import each icon as:
|
To use lucide icons in your Nodejs project you can import each icon as:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const { messageSquare } = require('lucide-static/lib')
|
const { messageSquare } = require('lucide-static/lib');
|
||||||
```
|
```
|
||||||
|
|
||||||
> Note: Each icon name is in camelCase.
|
> Note: Each icon name is in camelCase.
|
||||||
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
|
|||||||
#### Example in node.js project
|
#### Example in node.js project
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const express = require('express')
|
const express = require('express');
|
||||||
const { messageSquare } = require('lucide-static/lib')
|
const { messageSquare } = require('lucide-static/lib');
|
||||||
const app = express()
|
const app = express();
|
||||||
const port = 3000
|
const port = 3000;
|
||||||
|
|
||||||
app.get('/', (req, res) => {
|
app.get('/', (req, res) => {
|
||||||
res.send(`
|
res.send(`
|
||||||
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
|
|||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`)
|
`);
|
||||||
})
|
});
|
||||||
|
|
||||||
app.listen(port, () => {
|
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
|
```bash
|
||||||
yarn add lucide-svelte
|
yarn add lucide-svelte
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-svelte
|
npm install lucide-svelte
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -22,7 +24,7 @@ Default usage:
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
import { Skull } from 'lucide-svelte'
|
import { Skull } from 'lucide-svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Skull />
|
<Skull />
|
||||||
@@ -32,7 +34,7 @@ You can pass additional props to adjust the icon.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
import { Camera } from 'lucide-svelte'
|
import { Camera } from 'lucide-svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Camera color="#ff3e98" />
|
<Camera color="#ff3e98" />
|
||||||
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
|
|||||||
|
|
||||||
### Available props
|
### Available props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| -------------- | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth` | *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
| `*<SVGProps>` | *String* | -
|
| `*<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)
|
||||||
|
|
||||||
@@ -53,7 +55,7 @@ import { Camera } from 'lucide-svelte'
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
import { Phone } from 'lucide-svelte'
|
import { Phone } from 'lucide-svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Phone fill="#333" />
|
<Phone fill="#333" />
|
||||||
@@ -71,18 +73,18 @@ It is possible to create one generic icon component to load icons.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
import * as icons from "lucide-svelte";
|
import * as icons from 'lucide-svelte';
|
||||||
export let name;
|
export let name;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:component this={icons[name]} {...$$props}/>
|
<svelte:component this="{icons[name]}" {...$$props} />
|
||||||
```
|
```
|
||||||
|
|
||||||
##### Then you can use it like this
|
##### Then you can use it like this
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script>
|
<script>
|
||||||
import LucideIcon from "./LucideIcon";
|
import LucideIcon from './LucideIcon';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LucideIcon name="Menu" />
|
<LucideIcon name="Menu" />
|
||||||
|
|||||||
@@ -35,15 +35,8 @@ You can pass additional props to adjust the icon.
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
// Returns Vue component
|
|
||||||
import { Camera } from 'lucide-vue-next';
|
import { Camera } from 'lucide-vue-next';
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "My Component",
|
|
||||||
components: { Camera }
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -53,8 +46,8 @@ export default {
|
|||||||
| ------------ | -------- | --------
|
| ------------ | -------- | --------
|
||||||
| `size` | *Number* | 24
|
| `size` | *Number* | 24
|
||||||
| `color` | *String* | currentColor
|
| `color` | *String* | currentColor
|
||||||
| `strokeWidth`| *Number* | 2
|
| `stroke-width`| *Number* | 2
|
||||||
| `defaultClass`| *String* | lucide-icon
|
| `default-class`| *String* | lucide-icon
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -76,25 +69,25 @@ It is possible to create one generic icon component to load icons.
|
|||||||
|
|
||||||
``` html
|
``` html
|
||||||
<template>
|
<template>
|
||||||
<component :is="icon" />
|
<component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
|
import { computed } from 'vue';
|
||||||
import * as icons from "lucide-vue-next";
|
import * as icons from "lucide-vue-next";
|
||||||
|
|
||||||
export default {
|
const props = defineProps({
|
||||||
props: {
|
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true
|
||||||
},
|
},
|
||||||
},
|
size: Number,
|
||||||
setup(props) {
|
color: String,
|
||||||
const icon = computed(() => icons[props.name])
|
strokeWidth: Number,
|
||||||
|
defaultClass: String
|
||||||
|
})
|
||||||
|
|
||||||
return { icon }
|
const icon = computed(() => icons[props.name]);
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -107,3 +100,4 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
All other props listed above also work on the `Icon` Component.
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for Vue applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-vue
|
yarn add lucide-vue
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue
|
npm install lucide-vue
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -25,10 +27,7 @@ You can pass additional props to adjust the icon.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<Camera
|
<Camera color="red" :size="32" />
|
||||||
color="red"
|
|
||||||
:size="32"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -36,21 +35,20 @@ You can pass additional props to adjust the icon.
|
|||||||
import { Camera } from 'lucide-vue';
|
import { Camera } from 'lucide-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "My Component",
|
name: 'My Component',
|
||||||
components: { Camera }
|
components: { Camera }
|
||||||
}
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| -------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
| `defaultClass`| *String* | lucide-icon
|
| `defaultClass` | _String_ | lucide-icon |
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -76,20 +74,20 @@ It is possible to create one generic icon component to load icons.
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as icons from "lucide-vue";
|
import * as icons from 'lucide-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
icon() {
|
icon() {
|
||||||
return icons[this.name];
|
return icons[this.name];
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -6,9 +6,13 @@ Implementation of the lucide icon library for web applications.
|
|||||||
|
|
||||||
### Package Managers
|
### Package Managers
|
||||||
|
|
||||||
``` bash
|
```sh
|
||||||
npm install lucide
|
npm install lucide
|
||||||
#or
|
```
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
yarn add lucide
|
yarn add lucide
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -65,8 +69,8 @@ createIcons({
|
|||||||
icons: {
|
icons: {
|
||||||
Menu,
|
Menu,
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
Globe,
|
Globe
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -83,9 +87,9 @@ createIcons({
|
|||||||
attrs: {
|
attrs: {
|
||||||
class: ['my-custom-class', 'icon'],
|
class: ['my-custom-class', 'icon'],
|
||||||
'stroke-width': 1,
|
'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: {
|
icons: {
|
||||||
Menu,
|
Menu,
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
Globe,
|
Globe
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
16
icons/bean-off.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="M9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22a13.96 13.96 0 0 0 9.9-4.1" />
|
||||||
|
<path d="M10.75 5.093A6 6 0 0 1 22 8c0 2.411-.61 4.68-1.683 6.66" />
|
||||||
|
<path d="M5.341 10.62a4 4 0 0 0 6.487 1.208M10.62 5.341a4.015 4.015 0 0 1 2.039 2.04" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 502 B |
14
icons/bean.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.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z" />
|
||||||
|
<path d="M5.341 10.62A4 4 0 1 0 10.62 5.34" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 404 B |
20
icons/candy-off.svg
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<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.5 8.5-1 1a4.95 4.95 0 0 0 7 7l1-1" />
|
||||||
|
<path d="M11.843 6.187A4.947 4.947 0 0 1 16.5 7.5a4.947 4.947 0 0 1 1.313 4.657" />
|
||||||
|
<path d="M14 16.5V14" />
|
||||||
|
<path d="M14 6.5v1.843" />
|
||||||
|
<path d="M10 10v7.5" />
|
||||||
|
<path d="m16 7 1-5 1.367.683A3 3 0 0 0 19.708 3H21v1.292a3 3 0 0 0 .317 1.341L22 7l-5 1" />
|
||||||
|
<path d="m8 17-1 5-1.367-.683A3 3 0 0 0 4.292 21H3v-1.292a3 3 0 0 0-.317-1.341L2 17l5-1" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 657 B |
17
icons/candy.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.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z" />
|
||||||
|
<path d="M14 6.5v10" />
|
||||||
|
<path d="M10 7.5v10" />
|
||||||
|
<path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1" />
|
||||||
|
<path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 505 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 |
23
icons/dna-off.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<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="M15 2c-1.35 1.5-2.092 3-2.5 4.5M9 22c1.35-1.5 2.092-3 2.5-4.5" />
|
||||||
|
<path d="M2 15c3.333-3 6.667-3 10-3m10-3c-1.5 1.35-3 2.092-4.5 2.5" />
|
||||||
|
<path d="m17 6-2.5-2.5" />
|
||||||
|
<path d="m14 8-1.5-1.5" />
|
||||||
|
<path d="m7 18 2.5 2.5" />
|
||||||
|
<path d="m3.5 14.5.5.5" />
|
||||||
|
<path d="m20 9 .5.5" />
|
||||||
|
<path d="m6.5 12.5 1 1" />
|
||||||
|
<path d="m16.5 10.5 1 1" />
|
||||||
|
<path d="m10 16 1.5 1.5" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 630 B |
23
icons/dna.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<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 15c6.667-6 13.333 0 20-6" />
|
||||||
|
<path d="M9 22c1.798-1.998 2.518-3.995 2.807-5.993" />
|
||||||
|
<path d="M15 2c-1.798 1.998-2.518 3.995-2.807 5.993" />
|
||||||
|
<path d="m17 6-2.5-2.5" />
|
||||||
|
<path d="m14 8-1-1" />
|
||||||
|
<path d="m7 18 2.5 2.5" />
|
||||||
|
<path d="m3.5 14.5.5.5" />
|
||||||
|
<path d="m20 9 .5.5" />
|
||||||
|
<path d="m6.5 12.5 1 1" />
|
||||||
|
<path d="m16.5 10.5 1 1" />
|
||||||
|
<path d="m10 16 1.5 1.5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 593 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 |
15
icons/egg-off.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.399 6.399C5.362 8.157 4.65 10.189 4.5 12c-.37 4.43 1.27 9.95 7.5 10 3.256-.026 5.259-1.547 6.375-3.625" />
|
||||||
|
<path d="M19.532 13.875A14.07 14.07 0 0 0 19.5 12c-.36-4.34-3.95-9.96-7.5-10-1.04.012-2.082.502-3.046 1.297" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 484 B |
18
icons/flask-conical-off.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 10 4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-1.272-2.542" />
|
||||||
|
<path d="M10 2v2.343" />
|
||||||
|
<path d="M14 2v6.343" />
|
||||||
|
<path d="M8.5 2h7" />
|
||||||
|
<path d="M7 16h9" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 438 B |
@@ -9,7 +9,7 @@
|
|||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
stroke-linejoin="round"
|
stroke-linejoin="round"
|
||||||
>
|
>
|
||||||
<path d="M10 2v8L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45L14 10V2" />
|
<path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" />
|
||||||
<path d="M8.5 2h7" />
|
<path d="M8.5 2h7" />
|
||||||
<path d="M7 16h10" />
|
<path d="M7 16h10" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 340 B After Width: | Height: | Size: 390 B |
20
icons/hop-off.svg
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<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="M17.5 5.5C19 7 20.5 9 21 11c-1.323.265-2.646.39-4.118.226" />
|
||||||
|
<path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
|
||||||
|
<path d="M17.5 17.5c-2.5 0-4 0-6-1" />
|
||||||
|
<path d="M20 11.5c1 1.5 2 3.5 2 4.5" />
|
||||||
|
<path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
|
||||||
|
<path d="M22 22c-2 0-3.5-.5-5.5-1.5" />
|
||||||
|
<path d="M4.783 4.782C1.073 8.492 1 14.5 5 18c1-1 2-4.5 1.5-6.5 1.5 1 4 1 5.5.5M8.227 2.57C11.578 1.335 15.453 2.089 18 5c-.88.88-3.7 1.761-5.726 1.618" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 725 B |
20
icons/hop.svg
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<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="M17.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1" />
|
||||||
|
<path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
|
||||||
|
<path d="M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1" />
|
||||||
|
<path d="M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5" />
|
||||||
|
<path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
|
||||||
|
<path d="M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5" />
|
||||||
|
<path d="M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z" />
|
||||||
|
<path d="M4.5 4.5 3 3c-.184-.185-.184-.816 0-1" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 775 B |
16
icons/milk-off.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="M8 2h8" />
|
||||||
|
<path d="M9 2v1.343M15 2v2.789a4 4 0 0 0 .672 2.219l.656.984a4 4 0 0 1 .672 2.22v1.131M7.8 7.8l-.128.192A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3" />
|
||||||
|
<path d="M7 15a6.47 6.47 0 0 1 5 0 6.472 6.472 0 0 0 3.435.435" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 506 B |
15
icons/milk.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 2h8" />
|
||||||
|
<path d="M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" />
|
||||||
|
<path d="M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 462 B |
17
icons/nut-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="M12 4V2" />
|
||||||
|
<path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592a7.01 7.01 0 0 0 4.125-2.939" />
|
||||||
|
<path d="M19 10v3.343" />
|
||||||
|
<path d="M12 12c-1.349-.573-1.905-1.005-2.5-2-.546.902-1.048 1.353-2.5 2-1.018-.644-1.46-1.08-2-2-1.028.71-1.69.918-3 1 1.081-1.048 1.757-2.03 2-3 .194-.776.84-1.551 1.79-2.21m11.654 5.997c.887-.457 1.28-.891 1.556-1.787 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4-.74 0-1.461.068-2.15.192" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 767 B |
15
icons/nut.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="M12 4V2" />
|
||||||
|
<path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592A7.003 7.003 0 0 0 19 14v-4" />
|
||||||
|
<path d="M12 4C8 4 4.5 6 4 8c-.243.97-.919 1.952-2 3 1.31-.082 1.972-.29 3-1 .54.92.982 1.356 2 2 1.452-.647 1.954-1.098 2.5-2 .595.995 1.151 1.427 2.5 2 1.31-.621 1.862-1.058 2.5-2 .629.977 1.162 1.423 2.5 2 1.209-.548 1.68-.967 2-2 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 686 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 |
15
icons/vegan.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="M2 2c4.056 3.007 9.232 9.337 10 20 .897-6.818 1.5-9.5 4-14" />
|
||||||
|
<path d="M20.375 6.533A9.953 9.953 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c2.003 0 3.869.589 5.433 1.603" />
|
||||||
|
<path d="M17.104 4c-1.002 1.274-1.146 2.586-1.1 4 1.9-.1 3.003-.201 4.3-1.4 1.406-1.3 1.6-2.3 1.7-4.6-2.7.1-3.623.375-4.9 2Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 546 B |
22
icons/wheat-off.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="m2 22 10-10" />
|
||||||
|
<path d="m16 8-1.17 1.17" />
|
||||||
|
<path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
|
||||||
|
<path d="m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97" />
|
||||||
|
<path d="M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62" />
|
||||||
|
<path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
|
||||||
|
<path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
|
||||||
|
<path d="m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98" />
|
||||||
|
<path d="M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 924 B |
20
icons/wheat.svg
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<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 22 16 8" />
|
||||||
|
<path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
|
||||||
|
<path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
|
||||||
|
<path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
|
||||||
|
<path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
|
||||||
|
<path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
|
||||||
|
<path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
|
||||||
|
<path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 904 B |
17
icons/wine-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="M8 22h8" />
|
||||||
|
<path d="M7 10h3m7 0h-1.343" />
|
||||||
|
<path d="M12 15v7" />
|
||||||
|
<path d="M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198" />
|
||||||
|
<line x1="2" y1="2" x2="22" y2="22" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 483 B |
@@ -17,7 +17,8 @@
|
|||||||
"generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
|
"generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
|
||||||
"optimize": "node ./scripts/optimizeSvgs.mjs",
|
"optimize": "node ./scripts/optimizeSvgs.mjs",
|
||||||
"addtags": "node ./scripts/addMissingKeysToTags.mjs",
|
"addtags": "node ./scripts/addMissingKeysToTags.mjs",
|
||||||
"generate:changelog": "node ./scripts/generateChangelog.mjs"
|
"generate:changelog": "node ./scripts/generateChangelog.mjs",
|
||||||
|
"postinstall": "husky install"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@atomico/rollup-plugin-sizes": "^1.1.4",
|
"@atomico/rollup-plugin-sizes": "^1.1.4",
|
||||||
@@ -39,7 +40,7 @@
|
|||||||
"eslint-config-prettier": "^2.10.0",
|
"eslint-config-prettier": "^2.10.0",
|
||||||
"eslint-plugin-import": "^2.26.0",
|
"eslint-plugin-import": "^2.26.0",
|
||||||
"eslint-plugin-prettier": "^2.7.0",
|
"eslint-plugin-prettier": "^2.7.0",
|
||||||
"husky": "^4.3.8",
|
"husky": "^8.0.0",
|
||||||
"jest": "^28.1.3",
|
"jest": "^28.1.3",
|
||||||
"lint-staged": "^10.5.4",
|
"lint-staged": "^10.5.4",
|
||||||
"minimist": "^1.2.6",
|
"minimist": "^1.2.6",
|
||||||
@@ -62,5 +63,6 @@
|
|||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
|
"icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
|
||||||
}
|
},
|
||||||
|
"packageManager": "pnpm@7.14.0"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for angular applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-angular
|
yarn add lucide-angular
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-angular
|
npm install lucide-angular
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons';
|
|||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.css']
|
styleUrls: ['./app.component.css']
|
||||||
})
|
})
|
||||||
|
|
||||||
export class AppComponent implements OnInit {
|
export class AppComponent implements OnInit {
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
const div = document.getElementById('lucide-icon');
|
const div = document.getElementById('lucide-icon');
|
||||||
@@ -53,7 +54,7 @@ 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`.
|
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||||
|
|
||||||
@@ -67,9 +68,7 @@ import { AppComponent } from './app.component';
|
|||||||
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [AppComponent],
|
||||||
AppComponent
|
|
||||||
],
|
|
||||||
imports: [
|
imports: [
|
||||||
BrowserModule,
|
BrowserModule,
|
||||||
AppRoutingModule,
|
AppRoutingModule,
|
||||||
@@ -87,7 +86,7 @@ export class AppModule { }
|
|||||||
<lucide-icon name="edit" 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`.
|
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||||
|
|
||||||
@@ -101,14 +100,8 @@ import { AppComponent } from './app.component';
|
|||||||
import { LucideAngularModule } from 'lucide-angular';
|
import { LucideAngularModule } from 'lucide-angular';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [AppComponent],
|
||||||
AppComponent
|
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
|
||||||
],
|
|
||||||
imports: [
|
|
||||||
BrowserModule,
|
|
||||||
AppRoutingModule,
|
|
||||||
LucideAngularModule.pick({ })
|
|
||||||
],
|
|
||||||
providers: [],
|
providers: [],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
|
|||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.css']
|
styleUrls: ['./app.component.css']
|
||||||
})
|
})
|
||||||
|
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
ico1 = Airplay;
|
ico1 = Airplay;
|
||||||
ico2 = Circle;
|
ico2 = Circle;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide-angular",
|
"name": "lucide-angular",
|
||||||
"description": "A Lucide icon library package for Angular applications",
|
"description": "A Lucide icon library package for Angular applications",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"author": "SMAH1",
|
"author": "SMAH1",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"homepage": "https://lucide.dev",
|
"homepage": "https://lucide.dev",
|
||||||
@@ -34,34 +34,35 @@
|
|||||||
"version": "pnpm version --git-tag-version=false"
|
"version": "pnpm version --git-tag-version=false"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tslib": "^2.3.1"
|
"tslib": "^2.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "~0.1102.5",
|
"@angular-devkit/build-angular": "~14.2.6",
|
||||||
"@angular/cli": "~11.2.15",
|
"@angular/cli": "~14.2.6",
|
||||||
"@angular/common": "~11.2.14",
|
"@angular/common": "~14.2.7",
|
||||||
"@angular/compiler": "~11.2.14",
|
"@angular/compiler": "~14.2.7",
|
||||||
"@angular/compiler-cli": "~11.2.14",
|
"@angular/compiler-cli": "~14.2.7",
|
||||||
"@angular/core": "~11.2.14",
|
"@angular/core": "~14.2.7",
|
||||||
"@angular/platform-browser": "~11.2.14",
|
"@angular/platform-browser": "~14.2.7",
|
||||||
"@angular/platform-browser-dynamic": "~11.2.14",
|
"@angular/platform-browser-dynamic": "~14.2.7",
|
||||||
"@types/jasmine": "~3.10.2",
|
"@types/jasmine": "~4.3.0",
|
||||||
"@types/node": "^16.11.7",
|
"@types/node": "^18.11.4",
|
||||||
"codelyzer": "^6.0.2",
|
"codelyzer": "^6.0.2",
|
||||||
"jasmine-core": "~3.10.1",
|
"jasmine-core": "~4.4.0",
|
||||||
"jasmine-spec-reporter": "~7.0.0",
|
"jasmine-spec-reporter": "~7.0.0",
|
||||||
"karma": "~6.3.14",
|
"karma": "~6.4.1",
|
||||||
"karma-chrome-launcher": "~3.1.0",
|
"karma-chrome-launcher": "~3.1.1",
|
||||||
"karma-coverage": "~2.0.3",
|
"karma-coverage": "~2.2.0",
|
||||||
"karma-jasmine": "~4.0.1",
|
"karma-jasmine": "~5.1.0",
|
||||||
"karma-jasmine-html-reporter": "^1.7.0",
|
"karma-jasmine-html-reporter": "^2.0.0",
|
||||||
"ng-packagr": "^11.2.4",
|
"ng-packagr": "^14.2.1",
|
||||||
"protractor": "~7.0.0",
|
"protractor": "~7.0.0",
|
||||||
"puppeteer": "^8.0.0",
|
"puppeteer": "^19.1.0",
|
||||||
"rxjs": "6.5.3",
|
"rxjs": "7.5.7",
|
||||||
"ts-node": "~10.4.0",
|
"ts-node": "~10.9.1",
|
||||||
"tslint": "~6.1.0",
|
"tslint": "~6.1.0",
|
||||||
"typescript": "~4.1.5",
|
"typescript": "~4.8.4",
|
||||||
"zone.js": "^0.11.7"
|
"zone.js": "^0.11.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,6 @@
|
|||||||
"serve": "vite preview"
|
"serve": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/core": "^10.0.14",
|
|
||||||
"minimist": "^1.2.6",
|
"minimist": "^1.2.6",
|
||||||
"react": "^17.0.0",
|
"react": "^17.0.0",
|
||||||
"react-dom": "^17.0.0"
|
"react-dom": "^17.0.0"
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
name: lucide_icons
|
name: lucide_icons
|
||||||
description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
|
description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
|
||||||
version: 0.92.0
|
version: 0.93.0
|
||||||
homepage: https://lucide.dev
|
homepage: https://lucide.dev
|
||||||
repository: https://github.com/lucide-icons/lucide
|
repository: https://github.com/lucide-icons/lucide
|
||||||
|
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for preact applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-preact
|
yarn add lucide-preact
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-preact
|
npm install lucide-preact
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -29,7 +31,7 @@ import { Camera } from 'lucide-preact';
|
|||||||
|
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera color="red" size={48}/>
|
return <Camera color="red" size={48} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -37,11 +39,11 @@ export default App;
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
|
|
||||||
### Custom props / svg attributes
|
### Custom props / svg attributes
|
||||||
|
|
||||||
@@ -50,7 +52,7 @@ You can also pass custom props that will be added in the as attributes. With tha
|
|||||||
```js
|
```js
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera fill="red" stroke-linejoin="bevel"/>
|
return <Camera fill="red" stroke-linejoin="bevel" />;
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -70,7 +72,7 @@ import * as icons from 'lucide-preact';
|
|||||||
const Icon = ({ name, color, size }) => {
|
const Icon = ({ name, color, size }) => {
|
||||||
const LucideIcon = icons[name];
|
const LucideIcon = icons[name];
|
||||||
|
|
||||||
return <LucideIcon color={color} size={size} />
|
return <LucideIcon color={color} size={size} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Icon;
|
export default Icon;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide-preact",
|
"name": "lucide-preact",
|
||||||
"description": "A Lucide icon library package for Preact applications",
|
"description": "A Lucide icon library package for Preact applications",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"homepage": "https://lucide.dev",
|
"homepage": "https://lucide.dev",
|
||||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||||
|
|||||||
@@ -6,13 +6,15 @@ Implementation of the lucide icon library for React Native applications.
|
|||||||
|
|
||||||
## Installation
|
## 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
|
```sh
|
||||||
yarn add lucide-react-native
|
yarn add lucide-react-native
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react-native
|
npm install lucide-react-native
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -29,7 +31,7 @@ You can pass additional props to adjust the icon.
|
|||||||
import { Camera } from 'lucide-react-native';
|
import { Camera } from 'lucide-react-native';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera color="red" size={48}/>
|
return <Camera color="red" size={48} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -37,11 +39,11 @@ export default App;
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -49,7 +51,7 @@ You can also pass custom props that will be added in the svg as attributes.
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera fill="red"/>
|
return <Camera fill="red" />;
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -65,7 +67,7 @@ import * as icons from 'lucide-react-native';
|
|||||||
const Icon = ({ name, color, size }) => {
|
const Icon = ({ name, color, size }) => {
|
||||||
const LucideIcon = icons[name];
|
const LucideIcon = icons[name];
|
||||||
|
|
||||||
return <LucideIcon color={color} size={size} />
|
return <LucideIcon color={color} size={size} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Icon;
|
export default Icon;
|
||||||
|
|||||||
@@ -19,7 +19,9 @@
|
|||||||
"typings": "dist/lucide-react-native.d.ts",
|
"typings": "dist/lucide-react-native.d.ts",
|
||||||
"react-native": "dist/esm/lucide-react-native.js",
|
"react-native": "dist/esm/lucide-react-native.js",
|
||||||
"sideEffects": false,
|
"sideEffects": false,
|
||||||
"files": ["dist"],
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
|
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
|
||||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||||
@@ -38,12 +40,12 @@
|
|||||||
"react": "^18.0.0",
|
"react": "^18.0.0",
|
||||||
"react-dom": "^18.0.0",
|
"react-dom": "^18.0.0",
|
||||||
"react-native": "^0.69.0",
|
"react-native": "^0.69.0",
|
||||||
"react-native-svg": "^12.0.0"
|
"react-native-svg": "^13.0.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
|
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
|
||||||
"react-native": ">=0.50.0",
|
"react-native": "*",
|
||||||
"react-native-svg": "^12.0.0"
|
"react-native-svg": "^12.0.0 || ^13.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for react applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-react
|
yarn add lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-react
|
npm install lucide-react
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -27,7 +29,7 @@ You can pass additional props to adjust the icon.
|
|||||||
import { Camera } from 'lucide-react';
|
import { Camera } from 'lucide-react';
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera color="red" size={48}/>
|
return <Camera color="red" size={48} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -35,11 +37,11 @@ export default App;
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -47,7 +49,7 @@ You can also pass custom props that will be added in the svg as attributes.
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera fill="red"/>
|
return <Camera fill="red" />;
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -63,7 +65,7 @@ import * as icons from 'lucide-react';
|
|||||||
const Icon = ({ name, color, size }) => {
|
const Icon = ({ name, color, size }) => {
|
||||||
const LucideIcon = icons[name];
|
const LucideIcon = icons[name];
|
||||||
|
|
||||||
return <LucideIcon color={color} size={size} />
|
return <LucideIcon color={color} size={size} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Icon;
|
export default Icon;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide-react",
|
"name": "lucide-react",
|
||||||
"description": "A Lucide icon library package for React applications",
|
"description": "A Lucide icon library package for React applications",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"homepage": "https://lucide.dev",
|
"homepage": "https://lucide.dev",
|
||||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for solid applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-solid
|
yarn add lucide-solid
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-solid
|
npm install lucide-solid
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -29,7 +31,7 @@ import { Camera } from 'lucide-solid';
|
|||||||
|
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera color="red" size={48}/>
|
return <Camera color="red" size={48} />;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
@@ -37,11 +39,11 @@ export default App;
|
|||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
|
|
||||||
### Custom props / svg attributes
|
### Custom props / svg attributes
|
||||||
|
|
||||||
@@ -50,7 +52,7 @@ You can also pass custom props that will be added in the as attributes. With tha
|
|||||||
```js
|
```js
|
||||||
// Usage
|
// Usage
|
||||||
const App = () => {
|
const App = () => {
|
||||||
return <Camera fill="red" stroke-linejoin="bevel"/>
|
return <Camera fill="red" stroke-linejoin="bevel" />;
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -21,9 +21,11 @@ This package is suitable for very specific use cases for example if you want to
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-static
|
yarn add lucide-static
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-static
|
npm install lucide-static
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -31,13 +33,13 @@ npm install lucide-static
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Svg File -->
|
<!-- 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 -->
|
<!-- Icon Font -->
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "LucideIcons";
|
font-family: 'LucideIcons';
|
||||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
|
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
```
|
```
|
||||||
@@ -54,14 +56,15 @@ To use it in for example html:
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Svg File -->
|
<!-- Svg File -->
|
||||||
<img src="~lucide-static/icons/home.svg">
|
<img src="~lucide-static/icons/home.svg" />
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.home-icon {
|
.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/)
|
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
|
#### 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/).
|
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import arrowRightIcon from 'lucide-static/icons/arrow-right'
|
import arrowRightIcon from 'lucide-static/icons/arrow-right';
|
||||||
|
|
||||||
// return string of a svg
|
// return string of a svg
|
||||||
```
|
```
|
||||||
@@ -81,7 +84,7 @@ You may need additional loader for this.
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<!-- Icon Sprite, not recommended for production! -->
|
<!-- Icon Sprite, not recommended for production! -->
|
||||||
<img src="lucide-static/sprite.svg#home">
|
<img src="lucide-static/sprite.svg#home" />
|
||||||
|
|
||||||
<!-- or -->
|
<!-- or -->
|
||||||
<svg
|
<svg
|
||||||
@@ -96,9 +99,7 @@ You may need additional loader for this.
|
|||||||
<use href="#alert-triangle" />
|
<use href="#alert-triangle" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<svg>
|
<svg>...sprite svg</svg>
|
||||||
...sprite svg
|
|
||||||
</svg>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
If you'd prefer, you can use CSS to hold your base SVG properties
|
If you'd prefer, you can use CSS to hold your base SVG properties
|
||||||
@@ -134,20 +135,19 @@ and update the svg as follows
|
|||||||
### Icon Font
|
### Icon Font
|
||||||
|
|
||||||
```css
|
```css
|
||||||
@import("~lucide-static/font/Lucide.css")
|
@import ('~lucide-static/font/Lucide.css');
|
||||||
```
|
```
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="icon-home"></div>
|
<div class="icon-home"></div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Node.js
|
### Node.js
|
||||||
|
|
||||||
To use lucide icons in your Nodejs project you can import each icon as:
|
To use lucide icons in your Nodejs project you can import each icon as:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const { messageSquare } = require('lucide-static/lib')
|
const { messageSquare } = require('lucide-static/lib');
|
||||||
```
|
```
|
||||||
|
|
||||||
> Note: Each icon name is in camelCase.
|
> Note: Each icon name is in camelCase.
|
||||||
@@ -155,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
|
|||||||
#### Example in node.js project
|
#### Example in node.js project
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const express = require('express')
|
const express = require('express');
|
||||||
const { messageSquare } = require('lucide-static/lib')
|
const { messageSquare } = require('lucide-static/lib');
|
||||||
const app = express()
|
const app = express();
|
||||||
const port = 3000
|
const port = 3000;
|
||||||
|
|
||||||
app.get('/', (req, res) => {
|
app.get('/', (req, res) => {
|
||||||
res.send(`
|
res.send(`
|
||||||
@@ -173,12 +173,12 @@ app.get('/', (req, res) => {
|
|||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`)
|
`);
|
||||||
})
|
});
|
||||||
|
|
||||||
app.listen(port, () => {
|
app.listen(port, () => {
|
||||||
console.log(`Example app listening at http://localhost:${port}`)
|
console.log(`Example app listening at http://localhost:${port}`);
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|||||||
@@ -8,9 +8,11 @@ Implementation of the lucide icon library for svelte applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-svelte
|
yarn add lucide-svelte
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-svelte
|
npm install lucide-svelte
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -42,14 +44,14 @@ import { Camera } from 'lucide-svelte'
|
|||||||
|
|
||||||
### Available props
|
### Available props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| -------------- | -------- | --------
|
| ------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth` | *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
| `*<SVGProps>` | *String* | -
|
| `*<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
|
### Example of custom props
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide-svelte",
|
"name": "lucide-svelte",
|
||||||
"description": "A Lucide icon library package for Svelte applications",
|
"description": "A Lucide icon library package for Svelte applications",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"homepage": "https://lucide.dev",
|
"homepage": "https://lucide.dev",
|
||||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||||
|
|||||||
@@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue 3 applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-vue-next
|
yarn add lucide-vue-next
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue-next
|
npm install lucide-vue-next
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -27,10 +29,7 @@ You can pass additional props to adjust the icon.
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Camera
|
<Camera color="red" :size="32" />
|
||||||
color="red"
|
|
||||||
:size="32"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -38,21 +37,20 @@ You can pass additional props to adjust the icon.
|
|||||||
import { Camera } from 'lucide-vue-next';
|
import { Camera } from 'lucide-vue-next';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "My Component",
|
name: 'My Component',
|
||||||
components: { Camera }
|
components: { Camera }
|
||||||
}
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| -------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
| `defaultClass`| *String* | lucide-icon
|
| `defaultClass` | _String_ | lucide-icon |
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -78,20 +76,20 @@ It is possible to create one generic icon component to load icons.
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as icons from "lucide-vue-next";
|
import * as icons from 'lucide-vue-next';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
icon() {
|
icon() {
|
||||||
return icons[this.name];
|
return icons[this.name];
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide-vue-next",
|
"name": "lucide-vue-next",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"author": "Eric Fennis",
|
"author": "Eric Fennis",
|
||||||
"description": "A Lucide icon library package for Vue 3 applications",
|
"description": "A Lucide icon library package for Vue 3 applications",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
|||||||
@@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue applications.
|
|||||||
|
|
||||||
```sh
|
```sh
|
||||||
yarn add lucide-vue
|
yarn add lucide-vue
|
||||||
|
```
|
||||||
|
|
||||||
# or
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
npm install lucide-vue
|
npm install lucide-vue
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -27,10 +29,7 @@ You can pass additional props to adjust the icon.
|
|||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<Camera
|
<Camera color="red" :size="32" />
|
||||||
color="red"
|
|
||||||
:size="32"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -38,21 +37,20 @@ You can pass additional props to adjust the icon.
|
|||||||
import { Camera } from 'lucide-vue';
|
import { Camera } from 'lucide-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "My Component",
|
name: 'My Component',
|
||||||
components: { Camera }
|
components: { Camera }
|
||||||
}
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| name | type | default
|
| name | type | default |
|
||||||
| ------------ | -------- | --------
|
| -------------- | -------- | ------------ |
|
||||||
| `size` | *Number* | 24
|
| `size` | _Number_ | 24 |
|
||||||
| `color` | *String* | currentColor
|
| `color` | _String_ | currentColor |
|
||||||
| `strokeWidth`| *Number* | 2
|
| `strokeWidth` | _Number_ | 2 |
|
||||||
| `defaultClass`| *String* | lucide-icon
|
| `defaultClass` | _String_ | lucide-icon |
|
||||||
|
|
||||||
### Custom props
|
### Custom props
|
||||||
|
|
||||||
@@ -78,20 +76,20 @@ It is possible to create one generic icon component to load icons.
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as icons from "lucide-vue";
|
import * as icons from 'lucide-vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
icon() {
|
icon() {
|
||||||
return icons[this.name];
|
return icons[this.name];
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
@@ -109,17 +107,21 @@ export default {
|
|||||||
## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
|
## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
|
||||||
|
|
||||||
### Setup
|
### Setup
|
||||||
|
|
||||||
In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
|
In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
buildModules: ['lucide-vue/nuxt']
|
buildModules: ['lucide-vue/nuxt']
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### How to use
|
### How to use
|
||||||
|
|
||||||
Icon components are prefixed with `Icon`. Use icon components without importing them.
|
Icon components are prefixed with `Icon`. Use icon components without importing them.
|
||||||
|
|
||||||
### Example
|
### Example
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<IconCamera color="red" :size="32" />
|
<IconCamera color="red" :size="32" />
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide-vue",
|
"name": "lucide-vue",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"author": "Eric Fennis",
|
"author": "Eric Fennis",
|
||||||
"description": "A Lucide icon library package for Vue 2 applications",
|
"description": "A Lucide icon library package for Vue 2 applications",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
|
|||||||
@@ -6,9 +6,13 @@ Implementation of the lucide icon library for web applications.
|
|||||||
|
|
||||||
### Package Managers
|
### Package Managers
|
||||||
|
|
||||||
``` bash
|
```sh
|
||||||
npm install lucide
|
npm install lucide
|
||||||
#or
|
```
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
yarn add lucide
|
yarn add lucide
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -65,8 +69,8 @@ createIcons({
|
|||||||
icons: {
|
icons: {
|
||||||
Menu,
|
Menu,
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
Globe,
|
Globe
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -83,9 +87,9 @@ createIcons({
|
|||||||
attrs: {
|
attrs: {
|
||||||
class: ['my-custom-class', 'icon'],
|
class: ['my-custom-class', 'icon'],
|
||||||
'stroke-width': 1,
|
'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: {
|
icons: {
|
||||||
Menu,
|
Menu,
|
||||||
ArrowRight,
|
ArrowRight,
|
||||||
Globe,
|
Globe
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "lucide",
|
"name": "lucide",
|
||||||
"description": "A Lucide icon library package for web and javascript applications.",
|
"description": "A Lucide icon library package for web and javascript applications.",
|
||||||
"version": "0.92.0",
|
"version": "0.93.0",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"homepage": "https://lucide.dev",
|
"homepage": "https://lucide.dev",
|
||||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||||
|
|||||||
8464
pnpm-lock.yaml
generated
@@ -16,8 +16,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chakra-ui/react": "1.8.8",
|
"@chakra-ui/react": "1.8.8",
|
||||||
"@emotion/react": "^11",
|
|
||||||
"@emotion/styled": "^11",
|
|
||||||
"@mdx-js/loader": "^1.6.22",
|
"@mdx-js/loader": "^1.6.22",
|
||||||
"@mdx-js/react": "^1.6.22",
|
"@mdx-js/react": "^1.6.22",
|
||||||
"@next/mdx": "^11.0.0",
|
"@next/mdx": "^11.0.0",
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import { Button, Flex, Link, WrapItem, Text, Wrap, Heading } from '@chakra-ui/react';
|
import { Button, Flex, Link, WrapItem, Text, Wrap, Heading } from '@chakra-ui/react';
|
||||||
import download from 'downloadjs';
|
import download from 'downloadjs';
|
||||||
import JSZip from 'jszip';
|
|
||||||
import { Download, Github } from 'lucide-react';
|
import { Download, Github } from 'lucide-react';
|
||||||
import NextLink from 'next/link';
|
import NextLink from 'next/link';
|
||||||
import { IconCustomizerDrawer } from './IconCustomizerDrawer';
|
import { IconCustomizerDrawer } from './IconCustomizerDrawer';
|
||||||
@@ -12,7 +11,6 @@ import PreactLogo from '../../public/framework-logos/preact.svg';
|
|||||||
import AngularLogo from '../../public/framework-logos/angular.svg';
|
import AngularLogo from '../../public/framework-logos/angular.svg';
|
||||||
import FlutterLogo from '../../public/framework-logos/flutter.svg';
|
import FlutterLogo from '../../public/framework-logos/flutter.svg';
|
||||||
import SvelteLogo from '../../public/framework-logos/svelte.svg';
|
import SvelteLogo from '../../public/framework-logos/svelte.svg';
|
||||||
import LaravelLogo from '../../public/framework-logos/laravel.svg';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useCustomizeIconContext } from './CustomizeIconContext';
|
import { useCustomizeIconContext } from './CustomizeIconContext';
|
||||||
import { IconEntity } from '../types';
|
import { IconEntity } from '../types';
|
||||||
@@ -20,6 +18,8 @@ import { IconEntity } from '../types';
|
|||||||
type IconContent = [icon: string, src:string];
|
type IconContent = [icon: string, src:string];
|
||||||
|
|
||||||
async function generateZip(icons: IconContent[]) {
|
async function generateZip(icons: IconContent[]) {
|
||||||
|
const JSZip = (await import('jszip')).default
|
||||||
|
|
||||||
const zip = new JSZip();
|
const zip = new JSZip();
|
||||||
|
|
||||||
const addingZipPromises = icons.map(([name, src]) =>
|
const addingZipPromises = icons.map(([name, src]) =>
|
||||||
@@ -73,6 +73,12 @@ const Header = ({ data }: HeaderProps) => {
|
|||||||
href: '/docs/lucide-react',
|
href: '/docs/lucide-react',
|
||||||
label: 'Lucide documentation for React',
|
label: 'Lucide documentation for React',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'lucide-react-native',
|
||||||
|
Logo: ReactLogo,
|
||||||
|
href: '/docs/lucide-react-native',
|
||||||
|
label: 'Lucide documentation for React Native',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'lucide-vue',
|
name: 'lucide-vue',
|
||||||
Logo: VueLogo,
|
Logo: VueLogo,
|
||||||
@@ -109,12 +115,6 @@ const Header = ({ data }: HeaderProps) => {
|
|||||||
href: '/docs/lucide-flutter',
|
href: '/docs/lucide-flutter',
|
||||||
label: 'Lucide documentation for Flutter',
|
label: 'Lucide documentation for Flutter',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'lucide-laravel',
|
|
||||||
Logo: LaravelLogo,
|
|
||||||
href: 'https://github.com/mallardduck/blade-lucide-icons',
|
|
||||||
label: 'Lucide documentation for Laravel',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -159,6 +159,13 @@ const Header = ({ data }: HeaderProps) => {
|
|||||||
</NextLink>
|
</NextLink>
|
||||||
</WrapItem>
|
</WrapItem>
|
||||||
))}
|
))}
|
||||||
|
<WrapItem>
|
||||||
|
<NextLink href="/packages" passHref>
|
||||||
|
<Link _hover={{ opacity: 0.8 }} marginX="auto">
|
||||||
|
<Text fontSize="md" opacity={0.5}>More options</Text>
|
||||||
|
</Link>
|
||||||
|
</NextLink>
|
||||||
|
</WrapItem>
|
||||||
</Wrap>
|
</Wrap>
|
||||||
<Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
|
<Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
|
||||||
<WrapItem>
|
<WrapItem>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import {useContext, useEffect, useRef} from "react";
|
|||||||
import {IconStyleContext} from "./CustomizeIconContext";
|
import {IconStyleContext} from "./CustomizeIconContext";
|
||||||
import {IconWrapper} from "./IconWrapper";
|
import {IconWrapper} from "./IconWrapper";
|
||||||
import ModifiedTooltip from "./ModifiedTooltip";
|
import ModifiedTooltip from "./ModifiedTooltip";
|
||||||
import { IconData } from "../lib/icons";
|
import { IconEntity } from "../types";
|
||||||
|
|
||||||
type IconDownload = {
|
type IconDownload = {
|
||||||
src: string;
|
src: string;
|
||||||
@@ -16,7 +16,7 @@ type IconDownload = {
|
|||||||
interface IconDetailOverlayProps {
|
interface IconDetailOverlayProps {
|
||||||
open: boolean
|
open: boolean
|
||||||
close: () => void
|
close: () => void
|
||||||
icon?: IconData
|
icon?: IconEntity
|
||||||
}
|
}
|
||||||
|
|
||||||
const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps) => {
|
const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps) => {
|
||||||
@@ -152,7 +152,7 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
|
|||||||
className="icon-large"
|
className="icon-large"
|
||||||
>
|
>
|
||||||
<IconWrapper
|
<IconWrapper
|
||||||
content={icon.content}
|
src={icon.src}
|
||||||
stroke={color}
|
stroke={color}
|
||||||
strokeWidth={strokeWidth}
|
strokeWidth={strokeWidth}
|
||||||
height={size}
|
height={size}
|
||||||
@@ -229,8 +229,8 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
|
|||||||
</Heading>
|
</Heading>
|
||||||
<AvatarGroup size="md">
|
<AvatarGroup size="md">
|
||||||
{ icon.contributors.map((commit, index) => (
|
{ icon.contributors.map((commit, index) => (
|
||||||
<Link href={`https://github.com/${commit.author}`} isExternal key={`${index}_${commit.commit}`}>
|
<Link href={`https://github.com/${commit.author}`} isExternal key={`${index}_${commit.author}`}>
|
||||||
<Tooltip label={commit.author} key={commit.commit}>
|
<Tooltip label={commit.author} key={commit.author}>
|
||||||
<Avatar name={commit.author} src={`https://github.com/${commit.author}.png?size=88`} />
|
<Avatar name={commit.author} src={`https://github.com/${commit.author}.png?size=88`} />
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -2,8 +2,8 @@ import { Grid } from '@chakra-ui/react';
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import { IconEntity } from '../types';
|
|
||||||
import IconListItem from './IconListItem';
|
import IconListItem from './IconListItem';
|
||||||
|
import { IconEntity } from '../types';
|
||||||
|
|
||||||
interface IconListProps {
|
interface IconListProps {
|
||||||
icons: IconEntity[];
|
icons: IconEntity[];
|
||||||
|
|||||||
@@ -1,19 +1,16 @@
|
|||||||
import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
|
import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
|
||||||
import download from 'downloadjs';
|
import download from 'downloadjs';
|
||||||
import { memo } from 'react';
|
import { memo } from 'react';
|
||||||
import { Contributor } from '../lib/fetchAllContributors';
|
|
||||||
import { useCustomizeIconContext } from './CustomizeIconContext';
|
import { useCustomizeIconContext } from './CustomizeIconContext';
|
||||||
import { IconWrapper } from './IconWrapper';
|
import { IconWrapper } from './IconWrapper';
|
||||||
|
|
||||||
interface IconListItemProps {
|
interface IconListItemProps {
|
||||||
name: string;
|
name: string;
|
||||||
content: string;
|
|
||||||
contributors: Contributor[]
|
|
||||||
src: string;
|
|
||||||
onClick?: ButtonProps['onClick']
|
onClick?: ButtonProps['onClick']
|
||||||
|
src: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) => {
|
const IconListItem = ({ name, onClick, src: svg }: IconListItemProps) => {
|
||||||
const toast = useToast();
|
const toast = useToast();
|
||||||
const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();
|
const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();
|
||||||
|
|
||||||
@@ -53,7 +50,7 @@ const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) =
|
|||||||
<Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
|
<Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
|
||||||
<Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
|
<Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
|
||||||
<IconWrapper
|
<IconWrapper
|
||||||
content={content}
|
src={svg}
|
||||||
stroke={color}
|
stroke={color}
|
||||||
strokeWidth={strokeWidth}
|
strokeWidth={strokeWidth}
|
||||||
height={size}
|
height={size}
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import { Box, Text } from '@chakra-ui/react';
|
import { Box, Text } from '@chakra-ui/react';
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import useSearch from '../lib/useSearch';
|
import useSearch from '../lib/useSearch';
|
||||||
import { IconEntity } from '../types';
|
|
||||||
import IconList from './IconList';
|
import IconList from './IconList';
|
||||||
import { SearchInput } from './SearchInput';
|
import { SearchInput } from './SearchInput';
|
||||||
|
import { IconEntity } from '../types';
|
||||||
|
|
||||||
interface IconOverviewProps {
|
interface IconOverviewProps {
|
||||||
data: IconEntity[];
|
data: IconEntity[];
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { forwardRef, SVGProps } from 'react';
|
import { forwardRef, SVGProps } from 'react';
|
||||||
|
|
||||||
interface IconWrapperProps extends SVGProps<SVGSVGElement> {
|
interface IconWrapperProps extends SVGProps<SVGSVGElement> {
|
||||||
content: string;
|
src: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, ref) => {
|
export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, ref) => {
|
||||||
@@ -17,11 +17,12 @@ export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, r
|
|||||||
strokeLinejoin: 'round',
|
strokeLinejoin: 'round',
|
||||||
};
|
};
|
||||||
|
|
||||||
const { content, ...rest } = props;
|
const { src, ...rest } = props;
|
||||||
const attrs = {
|
const attrs = {
|
||||||
...defaultAttrs,
|
...defaultAttrs,
|
||||||
...rest,
|
...rest,
|
||||||
};
|
};
|
||||||
|
const content = src.replace(/<svg[^>]*>|<\/svg>/g, '');
|
||||||
|
|
||||||
return <svg ref={ref} {...attrs} dangerouslySetInnerHTML={{ __html: content }} />;
|
return <svg ref={ref} {...attrs} dangerouslySetInnerHTML={{ __html: content }} />;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -87,7 +87,7 @@ const Package = ({ name, description, icon, shields, source, documentation }: Pa
|
|||||||
<Text mb={3}>{description}</Text>
|
<Text mb={3}>{description}</Text>
|
||||||
<ButtonGroup spacing={2}>
|
<ButtonGroup spacing={2}>
|
||||||
{shields.map(({ alt, src, href }, index) => (
|
{shields.map(({ alt, src, href }, index) => (
|
||||||
<Link href={href} passHref>
|
<Link key={index} href={href} passHref>
|
||||||
<a target="_blank">
|
<a target="_blank">
|
||||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||||
<img {...{ alt, src }} key={index} />
|
<img {...{ alt, src }} key={index} />
|
||||||
|
|||||||
@@ -76,6 +76,10 @@ const docsMenuTree = [
|
|||||||
title: 'Lucide React',
|
title: 'Lucide React',
|
||||||
href: 'lucide-react'
|
href: 'lucide-react'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Lucide React Native',
|
||||||
|
href: 'lucide-react-native'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Lucide Vue',
|
title: 'Lucide Vue',
|
||||||
href: 'lucide-vue'
|
href: 'lucide-vue'
|
||||||
|
|||||||
@@ -1,17 +1,13 @@
|
|||||||
import crypto from 'crypto';
|
import crypto from 'crypto';
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import path from 'path';
|
import path from 'path';
|
||||||
|
import { Contributor } from '../types';
|
||||||
export interface Contributor {
|
|
||||||
author: string
|
|
||||||
commit: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const IGNORE_COMMIT_MESSAGES = ['fork', 'optimize'];
|
const IGNORE_COMMIT_MESSAGES = ['fork', 'optimize'];
|
||||||
|
|
||||||
function getContentHashOfFile(path) {
|
function getContentHashOfFile(path) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const hash = crypto.createHash('md4');
|
const hash = crypto.createHash('sha256');
|
||||||
const stream = fs.createReadStream(path);
|
const stream = fs.createReadStream(path);
|
||||||
stream.on('error', err => reject(err));
|
stream.on('error', err => reject(err));
|
||||||
stream.on('data', chunk => hash.update(chunk));
|
stream.on('data', chunk => hash.update(chunk));
|
||||||
@@ -22,11 +18,12 @@ function getContentHashOfFile(path) {
|
|||||||
const fetchCommitsOfIcon = async (name) =>{
|
const fetchCommitsOfIcon = async (name) =>{
|
||||||
try {
|
try {
|
||||||
const headers = new Headers();
|
const headers = new Headers();
|
||||||
const username = 'ericfennis';
|
const token = process.env.GITHUB_TOKEN;
|
||||||
|
const username = process.env.GITHUB_USERNAME;
|
||||||
const password = process.env.GITHUB_API_KEY;
|
const password = process.env.GITHUB_API_KEY;
|
||||||
headers.set(
|
headers.set(
|
||||||
'Authorization',
|
'Authorization',
|
||||||
`Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
|
token ? `Bearer ${token}` : `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
|
||||||
);
|
);
|
||||||
|
|
||||||
const res = await fetch(
|
const res = await fetch(
|
||||||
@@ -54,9 +51,8 @@ export const filterCommits = (commits) =>
|
|||||||
!IGNORE_COMMIT_MESSAGES.some(ignoreItem =>
|
!IGNORE_COMMIT_MESSAGES.some(ignoreItem =>
|
||||||
commit.message.toLowerCase().includes(ignoreItem),
|
commit.message.toLowerCase().includes(ignoreItem),
|
||||||
))
|
))
|
||||||
.map(({ sha, author }) => ({
|
.map(({ author }) => ({
|
||||||
author: author && author.login ? author.login : null,
|
author: author && author.login ? author.login : null,
|
||||||
commit: sha,
|
|
||||||
}))
|
}))
|
||||||
.filter(({ author }, index, self) => self.findIndex((commit) => commit.author === author) === index);
|
.filter(({ author }, index, self) => self.findIndex((commit) => commit.author === author) === index);
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,8 @@ import fs from "fs";
|
|||||||
import path from "path";
|
import path from "path";
|
||||||
import { parseSync, stringify } from 'svgson';
|
import { parseSync, stringify } from 'svgson';
|
||||||
import tags from '../../../tags.json';
|
import tags from '../../../tags.json';
|
||||||
import { Contributor, getContributors } from "./fetchAllContributors";
|
import { IconEntity } from "../types";
|
||||||
|
import { getContributors } from "./fetchAllContributors";
|
||||||
|
|
||||||
const directory = path.join(process.cwd(), "../icons");
|
const directory = path.join(process.cwd(), "../icons");
|
||||||
|
|
||||||
@@ -28,20 +29,11 @@ export async function getData(name: string) {
|
|||||||
name,
|
name,
|
||||||
tags: tags[name] || [],
|
tags: tags[name] || [],
|
||||||
contributors,
|
contributors,
|
||||||
src: fileContent,
|
src: fileContent
|
||||||
content: svgContent
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IconData {
|
export async function getAllData(): Promise<IconEntity[]> {
|
||||||
name: string
|
|
||||||
tags: string[]
|
|
||||||
contributors: Contributor[]
|
|
||||||
src: string
|
|
||||||
content: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function getAllData(): Promise<IconData[]> {
|
|
||||||
const names = getAllNames();
|
const names = getAllNames();
|
||||||
|
|
||||||
return Promise.all(names.map((name) => getData(name)));
|
return Promise.all(names.map((name) => getData(name)));
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import Layout from '../components/Layout';
|
import Layout from '../components/Layout';
|
||||||
import { getAllData, IconData } from '../lib/icons';
|
import { getAllData } from '../lib/icons';
|
||||||
|
|
||||||
import IconOverview from '../components/IconOverview';
|
import IconOverview from '../components/IconOverview';
|
||||||
import IconDetailOverlay from '../components/IconDetailOverlay';
|
import IconDetailOverlay from '../components/IconDetailOverlay';
|
||||||
@@ -8,9 +8,10 @@ import Header from '../components/Header';
|
|||||||
import MobileMenu from '../components/MobileMenu';
|
import MobileMenu from '../components/MobileMenu';
|
||||||
import { useMemo } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { GetStaticPropsResult, NextPage } from 'next';
|
import { GetStaticPropsResult, NextPage } from 'next';
|
||||||
|
import { IconEntity } from '../types';
|
||||||
|
|
||||||
interface HomePageProps {
|
interface HomePageProps {
|
||||||
data: IconData[]
|
data: IconEntity[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const HomePage: NextPage<HomePageProps> = ({ data }) => {
|
const HomePage: NextPage<HomePageProps> = ({ data }) => {
|
||||||
|
|||||||
@@ -23,14 +23,18 @@ const PackagesPage = ({ packages, thirdPartyPackages }: PackagesPageProps): JSX.
|
|||||||
Packages
|
Packages
|
||||||
</Heading>
|
</Heading>
|
||||||
<Stack spacing={8} align="center">
|
<Stack spacing={8} align="center">
|
||||||
{packages.length ? packages.map(packageItem => <Package {...packageItem} />) : null}
|
{packages.length
|
||||||
|
? packages.map((packageItem) => <Package key={packageItem.name} {...packageItem} />)
|
||||||
|
: null}
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
<Heading as="h1" marginBottom={6} marginTop={12} textAlign="center">
|
<Heading as="h1" marginBottom={6} marginTop={12} textAlign="center">
|
||||||
Third party packages
|
Third party packages
|
||||||
</Heading>
|
</Heading>
|
||||||
<Stack spacing={8} marginBottom={6} align="center">
|
<Stack spacing={8} marginBottom={6} align="center">
|
||||||
{thirdPartyPackages.length ? thirdPartyPackages.map(packageItem => <Package {...packageItem} />) : null}
|
{thirdPartyPackages.length
|
||||||
|
? thirdPartyPackages.map((packageItem) => (<Package key={packageItem.name} {...packageItem} />))
|
||||||
|
: null}
|
||||||
</Stack>
|
</Stack>
|
||||||
</Layout>
|
</Layout>
|
||||||
</HeadingNavigationProvider>
|
</HeadingNavigationProvider>
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
export interface IconEntity {
|
export interface IconEntity {
|
||||||
content: string;
|
|
||||||
contributors: Contributor[];
|
contributors: Contributor[];
|
||||||
name: string;
|
name: string;
|
||||||
src: string;
|
src: string;
|
||||||
@@ -8,5 +7,4 @@ export interface IconEntity {
|
|||||||
|
|
||||||
export interface Contributor {
|
export interface Contributor {
|
||||||
author: string;
|
author: string;
|
||||||
commit: string;
|
|
||||||
}
|
}
|
||||||
|
|||||||
263
tags.json
@@ -446,12 +446,21 @@
|
|||||||
"beaker": [
|
"beaker": [
|
||||||
"cup"
|
"cup"
|
||||||
],
|
],
|
||||||
"beer": [
|
"bean": [
|
||||||
"alcohol",
|
"legume",
|
||||||
"bar",
|
"soy",
|
||||||
"beverage",
|
"food",
|
||||||
"brewery",
|
"seed"
|
||||||
"drink"
|
],
|
||||||
|
"bean-off": [
|
||||||
|
"soy free",
|
||||||
|
"legume",
|
||||||
|
"soy",
|
||||||
|
"food",
|
||||||
|
"seed",
|
||||||
|
"allergy",
|
||||||
|
"intolerance",
|
||||||
|
"diet"
|
||||||
],
|
],
|
||||||
"bed": [
|
"bed": [
|
||||||
"sleep",
|
"sleep",
|
||||||
@@ -468,6 +477,13 @@
|
|||||||
"hotel",
|
"hotel",
|
||||||
"furniture"
|
"furniture"
|
||||||
],
|
],
|
||||||
|
"beer": [
|
||||||
|
"alcohol",
|
||||||
|
"bar",
|
||||||
|
"beverage",
|
||||||
|
"brewery",
|
||||||
|
"drink"
|
||||||
|
],
|
||||||
"bell": [
|
"bell": [
|
||||||
"alarm",
|
"alarm",
|
||||||
"notification",
|
"notification",
|
||||||
@@ -749,6 +765,19 @@
|
|||||||
"webcam",
|
"webcam",
|
||||||
"video"
|
"video"
|
||||||
],
|
],
|
||||||
|
"candy": [
|
||||||
|
"sugar",
|
||||||
|
"food",
|
||||||
|
"sweet"
|
||||||
|
],
|
||||||
|
"candy-off": [
|
||||||
|
"sugar free",
|
||||||
|
"food",
|
||||||
|
"sweet",
|
||||||
|
"allergy",
|
||||||
|
"intolerance",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
"car": [
|
"car": [
|
||||||
"vehicle",
|
"vehicle",
|
||||||
"transport",
|
"transport",
|
||||||
@@ -763,9 +792,20 @@
|
|||||||
"chromecast",
|
"chromecast",
|
||||||
"airplay"
|
"airplay"
|
||||||
],
|
],
|
||||||
|
"cat": [
|
||||||
|
"animal",
|
||||||
|
"pet",
|
||||||
|
"kitten",
|
||||||
|
"feline"
|
||||||
|
],
|
||||||
"check": [
|
"check": [
|
||||||
"done"
|
"done"
|
||||||
],
|
],
|
||||||
|
"check-check": [
|
||||||
|
"done",
|
||||||
|
"received",
|
||||||
|
"double"
|
||||||
|
],
|
||||||
"check-circle": [
|
"check-circle": [
|
||||||
"done"
|
"done"
|
||||||
],
|
],
|
||||||
@@ -845,7 +885,8 @@
|
|||||||
"vertical"
|
"vertical"
|
||||||
],
|
],
|
||||||
"chrome": [
|
"chrome": [
|
||||||
"browser"
|
"browser",
|
||||||
|
"logo"
|
||||||
],
|
],
|
||||||
"cigarette": [
|
"cigarette": [
|
||||||
"smoking"
|
"smoking"
|
||||||
@@ -857,7 +898,8 @@
|
|||||||
"circle": [
|
"circle": [
|
||||||
"off",
|
"off",
|
||||||
"zero",
|
"zero",
|
||||||
"record"
|
"record",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"circle-dot": [
|
"circle-dot": [
|
||||||
"pending",
|
"pending",
|
||||||
@@ -875,7 +917,8 @@
|
|||||||
"zero",
|
"zero",
|
||||||
"Ø",
|
"Ø",
|
||||||
"null",
|
"null",
|
||||||
"nothing"
|
"nothing",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"citrus": [
|
"citrus": [
|
||||||
"lemon",
|
"lemon",
|
||||||
@@ -1239,7 +1282,8 @@
|
|||||||
"square",
|
"square",
|
||||||
"rectangle",
|
"rectangle",
|
||||||
"oblique",
|
"oblique",
|
||||||
"rhombus"
|
"rhombus",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"dice-1": [
|
"dice-1": [
|
||||||
"dice",
|
"dice",
|
||||||
@@ -1301,7 +1345,8 @@
|
|||||||
"difference",
|
"difference",
|
||||||
"plus",
|
"plus",
|
||||||
"minus",
|
"minus",
|
||||||
"plus-minus"
|
"plus-minus",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"disc": [
|
"disc": [
|
||||||
"album",
|
"album",
|
||||||
@@ -1310,13 +1355,39 @@
|
|||||||
"music"
|
"music"
|
||||||
],
|
],
|
||||||
"divide": [
|
"divide": [
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"divide-circle": [
|
"divide-circle": [
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"divide-square": [
|
"divide-square": [
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
|
],
|
||||||
|
"dna": [
|
||||||
|
"gene",
|
||||||
|
"gmo",
|
||||||
|
"helix",
|
||||||
|
"heredity",
|
||||||
|
"chromosome",
|
||||||
|
"nucleic acid"
|
||||||
|
],
|
||||||
|
"dna-off": [
|
||||||
|
"gene",
|
||||||
|
"gmo free",
|
||||||
|
"helix",
|
||||||
|
"heredity",
|
||||||
|
"chromosome",
|
||||||
|
"nucleic acid"
|
||||||
|
],
|
||||||
|
"dog": [
|
||||||
|
"animal",
|
||||||
|
"pet",
|
||||||
|
"puppy",
|
||||||
|
"hound",
|
||||||
|
"canine"
|
||||||
],
|
],
|
||||||
"dollar-sign": [
|
"dollar-sign": [
|
||||||
"currency",
|
"currency",
|
||||||
@@ -1379,11 +1450,13 @@
|
|||||||
"breakfast"
|
"breakfast"
|
||||||
],
|
],
|
||||||
"equal": [
|
"equal": [
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"equal-not": [
|
"equal-not": [
|
||||||
"calculate",
|
"calculate",
|
||||||
"off"
|
"off",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"eraser": [
|
"eraser": [
|
||||||
"pencil",
|
"pencil",
|
||||||
@@ -1782,6 +1855,11 @@
|
|||||||
"beaker",
|
"beaker",
|
||||||
"erlenmeyer"
|
"erlenmeyer"
|
||||||
],
|
],
|
||||||
|
"flask-conical-off": [
|
||||||
|
"beaker",
|
||||||
|
"erlenmeyer",
|
||||||
|
"non toxic"
|
||||||
|
],
|
||||||
"flask-round": [
|
"flask-round": [
|
||||||
"beaker"
|
"beaker"
|
||||||
],
|
],
|
||||||
@@ -1996,7 +2074,8 @@
|
|||||||
"function-square": [
|
"function-square": [
|
||||||
"programming",
|
"programming",
|
||||||
"code",
|
"code",
|
||||||
"automation"
|
"automation",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"joystick": [
|
"joystick": [
|
||||||
"game",
|
"game",
|
||||||
@@ -2229,6 +2308,20 @@
|
|||||||
"house",
|
"house",
|
||||||
"living"
|
"living"
|
||||||
],
|
],
|
||||||
|
"hop": [
|
||||||
|
"beer",
|
||||||
|
"brewery",
|
||||||
|
"drink"
|
||||||
|
],
|
||||||
|
"hop-off": [
|
||||||
|
"beer",
|
||||||
|
"brewery",
|
||||||
|
"drink",
|
||||||
|
"hop free",
|
||||||
|
"allergy",
|
||||||
|
"intolerance",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
"hourglass": [
|
"hourglass": [
|
||||||
"timer",
|
"timer",
|
||||||
"time",
|
"time",
|
||||||
@@ -2272,7 +2365,8 @@
|
|||||||
"infinity": [
|
"infinity": [
|
||||||
"unlimited",
|
"unlimited",
|
||||||
"forever",
|
"forever",
|
||||||
"loop"
|
"loop",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"info": [
|
"info": [
|
||||||
"help"
|
"help"
|
||||||
@@ -2287,6 +2381,7 @@
|
|||||||
],
|
],
|
||||||
"instagram": [
|
"instagram": [
|
||||||
"logo",
|
"logo",
|
||||||
|
"social",
|
||||||
"camera"
|
"camera"
|
||||||
],
|
],
|
||||||
"italic": [
|
"italic": [
|
||||||
@@ -2299,6 +2394,11 @@
|
|||||||
"money",
|
"money",
|
||||||
"payment"
|
"payment"
|
||||||
],
|
],
|
||||||
|
"joystick": [
|
||||||
|
"game",
|
||||||
|
"console",
|
||||||
|
"control stick"
|
||||||
|
],
|
||||||
"key": [
|
"key": [
|
||||||
"password",
|
"password",
|
||||||
"login",
|
"login",
|
||||||
@@ -2451,7 +2551,7 @@
|
|||||||
],
|
],
|
||||||
"linkedin": [
|
"linkedin": [
|
||||||
"logo",
|
"logo",
|
||||||
"social media"
|
"social"
|
||||||
],
|
],
|
||||||
"list": [
|
"list": [
|
||||||
"options"
|
"options"
|
||||||
@@ -2758,6 +2858,24 @@
|
|||||||
"signpost",
|
"signpost",
|
||||||
"version control"
|
"version control"
|
||||||
],
|
],
|
||||||
|
"milk": [
|
||||||
|
"lactose",
|
||||||
|
"bottle",
|
||||||
|
"beverage",
|
||||||
|
"drink",
|
||||||
|
"water",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
|
"milk-off": [
|
||||||
|
"lactose free",
|
||||||
|
"bottle",
|
||||||
|
"beverage",
|
||||||
|
"drink",
|
||||||
|
"water",
|
||||||
|
"allergy",
|
||||||
|
"intolerance",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
"minimize": [
|
"minimize": [
|
||||||
"exit fullscreen",
|
"exit fullscreen",
|
||||||
"close",
|
"close",
|
||||||
@@ -2771,15 +2889,18 @@
|
|||||||
],
|
],
|
||||||
"minus": [
|
"minus": [
|
||||||
"subtract",
|
"subtract",
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"minus-circle": [
|
"minus-circle": [
|
||||||
"subtract",
|
"subtract",
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"minus-square": [
|
"minus-square": [
|
||||||
"subtract",
|
"subtract",
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"monitor": [
|
"monitor": [
|
||||||
"tv",
|
"tv",
|
||||||
@@ -2914,8 +3035,23 @@
|
|||||||
"article",
|
"article",
|
||||||
"headline"
|
"headline"
|
||||||
],
|
],
|
||||||
|
"nut": [
|
||||||
|
"hazelnut",
|
||||||
|
"acorn",
|
||||||
|
"food",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
|
"nut-off": [
|
||||||
|
"hazelnut",
|
||||||
|
"acorn",
|
||||||
|
"food",
|
||||||
|
"allergy",
|
||||||
|
"intolerance",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
"octagon": [
|
"octagon": [
|
||||||
"stop"
|
"stop",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"option": [
|
"option": [
|
||||||
"key",
|
"key",
|
||||||
@@ -3103,15 +3239,18 @@
|
|||||||
],
|
],
|
||||||
"plus": [
|
"plus": [
|
||||||
"add",
|
"add",
|
||||||
"new"
|
"new",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"plus-circle": [
|
"plus-circle": [
|
||||||
"add",
|
"add",
|
||||||
"new"
|
"new",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"plus-square": [
|
"plus-square": [
|
||||||
"add",
|
"add",
|
||||||
"new"
|
"new",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"pocket": [
|
"pocket": [
|
||||||
"logo",
|
"logo",
|
||||||
@@ -3169,13 +3308,15 @@
|
|||||||
"rectangle",
|
"rectangle",
|
||||||
"aspect ratio",
|
"aspect ratio",
|
||||||
"16:9",
|
"16:9",
|
||||||
"horizontal"
|
"horizontal",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"rectangle-vertical": [
|
"rectangle-vertical": [
|
||||||
"rectangle",
|
"rectangle",
|
||||||
"aspect ratio",
|
"aspect ratio",
|
||||||
"9:16",
|
"9:16",
|
||||||
"vertical"
|
"vertical",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"recycle": [
|
"recycle": [
|
||||||
"sustainability",
|
"sustainability",
|
||||||
@@ -3211,7 +3352,8 @@
|
|||||||
],
|
],
|
||||||
"regex": [
|
"regex": [
|
||||||
"search",
|
"search",
|
||||||
"text"
|
"text",
|
||||||
|
"code"
|
||||||
],
|
],
|
||||||
"repeat": [
|
"repeat": [
|
||||||
"loop",
|
"loop",
|
||||||
@@ -3479,7 +3621,8 @@
|
|||||||
],
|
],
|
||||||
"sigma": [
|
"sigma": [
|
||||||
"sum",
|
"sum",
|
||||||
"calculate"
|
"calculate",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"signal": [
|
"signal": [
|
||||||
"connection",
|
"connection",
|
||||||
@@ -3644,7 +3787,8 @@
|
|||||||
"square": [
|
"square": [
|
||||||
"rectangle",
|
"rectangle",
|
||||||
"aspect ratio",
|
"aspect ratio",
|
||||||
"1:1"
|
"1:1",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"star": [
|
"star": [
|
||||||
"bookmark",
|
"bookmark",
|
||||||
@@ -3958,7 +4102,9 @@
|
|||||||
"park",
|
"park",
|
||||||
"nature"
|
"nature"
|
||||||
],
|
],
|
||||||
"trello": [],
|
"trello": [
|
||||||
|
"logo"
|
||||||
|
],
|
||||||
"trending-down": [
|
"trending-down": [
|
||||||
"statistics"
|
"statistics"
|
||||||
],
|
],
|
||||||
@@ -3966,7 +4112,8 @@
|
|||||||
"statistics"
|
"statistics"
|
||||||
],
|
],
|
||||||
"triangle": [
|
"triangle": [
|
||||||
"delta"
|
"delta",
|
||||||
|
"shape"
|
||||||
],
|
],
|
||||||
"trophy": [
|
"trophy": [
|
||||||
"prize",
|
"prize",
|
||||||
@@ -3993,7 +4140,8 @@
|
|||||||
"display"
|
"display"
|
||||||
],
|
],
|
||||||
"twitch": [
|
"twitch": [
|
||||||
"logo"
|
"logo",
|
||||||
|
"social"
|
||||||
],
|
],
|
||||||
"twitter": [
|
"twitter": [
|
||||||
"logo",
|
"logo",
|
||||||
@@ -4105,6 +4253,13 @@
|
|||||||
"dinner",
|
"dinner",
|
||||||
"supper"
|
"supper"
|
||||||
],
|
],
|
||||||
|
"vegan": [
|
||||||
|
"vegetarian",
|
||||||
|
"fruitarian",
|
||||||
|
"herbivorous",
|
||||||
|
"animal rights",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
"venetian-mask": [
|
"venetian-mask": [
|
||||||
"mask",
|
"mask",
|
||||||
"masquerade",
|
"masquerade",
|
||||||
@@ -4197,6 +4352,21 @@
|
|||||||
"interface",
|
"interface",
|
||||||
"callback"
|
"callback"
|
||||||
],
|
],
|
||||||
|
"wheat": [
|
||||||
|
"corn",
|
||||||
|
"cereal",
|
||||||
|
"grain",
|
||||||
|
"gluten"
|
||||||
|
],
|
||||||
|
"wheat-off": [
|
||||||
|
"corn",
|
||||||
|
"cereal",
|
||||||
|
"grain",
|
||||||
|
"gluten free",
|
||||||
|
"allergy",
|
||||||
|
"intolerance",
|
||||||
|
"diet"
|
||||||
|
],
|
||||||
"wifi": [
|
"wifi": [
|
||||||
"connection",
|
"connection",
|
||||||
"signal",
|
"signal",
|
||||||
@@ -4220,6 +4390,18 @@
|
|||||||
"vineyard",
|
"vineyard",
|
||||||
"winery"
|
"winery"
|
||||||
],
|
],
|
||||||
|
"wine-off": [
|
||||||
|
"alcohol",
|
||||||
|
"beverage",
|
||||||
|
"drink",
|
||||||
|
"glass",
|
||||||
|
"alcohol free",
|
||||||
|
"abstinence",
|
||||||
|
"abstaining",
|
||||||
|
"teetotalism",
|
||||||
|
"allergy",
|
||||||
|
"intolerance"
|
||||||
|
],
|
||||||
"wrap-text": [
|
"wrap-text": [
|
||||||
"words",
|
"words",
|
||||||
"lines",
|
"lines",
|
||||||
@@ -4237,7 +4419,8 @@
|
|||||||
"delete",
|
"delete",
|
||||||
"remove",
|
"remove",
|
||||||
"times",
|
"times",
|
||||||
"clear"
|
"clear",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"x-circle": [
|
"x-circle": [
|
||||||
"cancel",
|
"cancel",
|
||||||
@@ -4245,7 +4428,8 @@
|
|||||||
"delete",
|
"delete",
|
||||||
"remove",
|
"remove",
|
||||||
"times",
|
"times",
|
||||||
"clear"
|
"clear",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"x-octagon": [
|
"x-octagon": [
|
||||||
"delete",
|
"delete",
|
||||||
@@ -4253,7 +4437,8 @@
|
|||||||
"alert",
|
"alert",
|
||||||
"warning",
|
"warning",
|
||||||
"times",
|
"times",
|
||||||
"clear"
|
"clear",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"x-square": [
|
"x-square": [
|
||||||
"cancel",
|
"cancel",
|
||||||
@@ -4261,10 +4446,12 @@
|
|||||||
"delete",
|
"delete",
|
||||||
"remove",
|
"remove",
|
||||||
"times",
|
"times",
|
||||||
"clear"
|
"clear",
|
||||||
|
"maths"
|
||||||
],
|
],
|
||||||
"youtube": [
|
"youtube": [
|
||||||
"logo",
|
"logo",
|
||||||
|
"social",
|
||||||
"video",
|
"video",
|
||||||
"play"
|
"play"
|
||||||
],
|
],
|
||||||
|
|||||||