Compare commits

...

54 Commits

Author SHA1 Message Date
Eric Fennis
9e524fd557 Add icon check-check (#809)
* add icon check check

* Update icons/check-check.svg

Co-authored-by: Karsa <contact@karsa.org>

Co-authored-by: Karsa <contact@karsa.org>
2022-11-01 17:30:41 +01:00
Wojciech Maj
b5c71c4fc3 Dedupe dependencies (#854) 2022-11-01 17:28:24 +01:00
Sean van Zuidam
aa8861a2cd Add show more link for packages on Homepage (#858)
* DEL: laravel from homepage packages

* ADD: more options link

This makes it more clear there are more options than just the ones shown on the homepage
2022-11-01 17:25:14 +01:00
Wojciech Maj
a41918a81e Don't hardcode GitHub username in fetchCommitsOfIcon, allow usage of GITHUB_TOKEN instead (#844)
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-10-27 08:22:53 +02:00
Wojciech Maj
33be2c2430 Split commands in documentation to make it possible to use Copy to clipboard icon (#853)
GitHub adds Copy to clipboard button to all code snippets. By splitting npm and yarn specific snippets into two separate snippets we make it possible to copy the command dev is interested in in one click instead of manually selecting it and copying with Ctrl+C.
2022-10-27 08:19:45 +02:00
Wojciech Maj
eb706417e6 Reduce __NEXT_DATA__ size by removing content and author.commit properties from IconEntity (#846)
Reduces __NEXT_DATA__ size on main page by 127610 bytes by calculating `content` from `src` property and removing `commit` data altogether.

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-10-27 08:17:25 +02:00
Wojciech Maj
01e11a61f8 Update GitHub Actions actions/checkout to v3 (#851)
Fixed dependency warning:

```
Node.js 12 actions are deprecated. For more information see: https://github.blog/changelog/2022-09-22-github-actions-all-actions-will-begin-running-on-node16-instead-of-node12/. Please update the following actions to use Node.js 16: actions/checkout
```
2022-10-27 08:15:43 +02:00
Kemie
b323bbd28e Add Cat & Dog (#825)
* Added cat & dog

* optimized svgs, tags

* updated cat & dog

refined icons to better meet design guidelines (2px gap)

* Update dog.svg

fixed ears

* Update tags.json

tags for dog

Co-authored-by: Karsa <contact@karsa.org>

* Update tags.json

tags for cat

Co-authored-by: Karsa <contact@karsa.org>

* reoptimized dog & cat svgs

* reoptimized svgs

* svg code formatting

* unmerge paths

* Update icons/cat.svg

* Update icons/dog.svg

Co-authored-by: Karsa <contact@karsa.org>
2022-10-27 08:13:26 +02:00
Wojciech Maj
514e88bbf9 Remove direct dependency on @emotion/core, @emotion/react, @emotion/styled (#849) 2022-10-27 08:11:57 +02:00
Sean van Zuidam
de6ed26152 ADD: missing key to loops (#856) 2022-10-27 08:11:05 +02:00
Wojciech Maj
b8cc9ea3c8 Update husky, automatically install husky on pnpm i (#847)
Fixes #836

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-10-26 08:50:19 +02:00
Wojciech Maj
cc2ac8bfcd Lazy load JSZip on Download all button click (#850) 2022-10-26 08:46:19 +02:00
Wojciech Maj
0e340a2679 Add lucide-react-native package to Header and main menu items (#845)
Fixes #841
2022-10-26 08:41:05 +02:00
Wojciech Maj
c15e3914a6 Fix version not bumped in lucide-react-native package.json (#840)
Fixes #839

…i think.
2022-10-26 08:36:57 +02:00
Wojciech Maj
ff81fbfd9a Don't use md4 in crypto.createHash (#843)
Fixes #842

Please review carefully - I don't fully understand how this hash is used and whether there are any implications of changing it.
2022-10-26 08:36:17 +02:00
Wojciech Maj
5317abb867 Add packageManager to package.json to allow usage with Corepack (#838) 2022-10-26 08:33:51 +02:00
Wojciech Maj
ac80b9e58f Update react-native-svg to ^13.0.0, allow react-native-svg ^13.0.0 as peerDependency (#837) 2022-10-26 08:33:17 +02:00
Eric Fennis
a25f139953 add spline icon (#811) 2022-10-24 18:54:16 +02:00
Ekow Baah-Nyarkoh
b457c8dea1 Make lucid-angular compatible with angular 14 (#835)
* make lucid angular compatible with angular 14

* update pnpm-lock file
2022-10-24 18:39:44 +02:00
Christian Friedow
2e24567f8e Docs: fix and extend the generic vue3 icon component example (#832)
* docs: fix and extend the vue3 icon component example

* docs: refactor the usage example to utilize script setup

* fix: correct dashcase in property names
2022-10-23 18:30:39 +02:00
ANTARCTUS
9b90bc4d51 Better tags 1 (#827)
* Update tags.json

Add "logo" tag to the trello logo

* Update tags.json

Add "maths" tag

* Update tags.json

Add tag "logo" to  chrome

* Update tags.json

Add the tag "shape" to "octogon", "triangle", "square" and "circle"

* Update tags.json

Add tag "shape" to diamond

* Update tags.json

Add tag "maths" to function

* Update tags.json

* Update tags.json

Add "maths" to "circle slashed"

* Update tags.json

Remove the comma after the tag logo from trello
2022-10-23 18:29:43 +02:00
Lucide Bot
6fd0380e19 📦 Bump lucide package versions to 0.93.0 2022-10-23 12:19:23 +00:00
Eric Fennis
603ee05674 Add heading icons (#810) 2022-10-23 14:12:17 +02:00
Eric Fennis
be15f5e54b Update README.md 2022-10-20 08:23:27 +02:00
Eric Fennis
ea409105ce Remove post-install lucide-angular (#808)
* remove postinstall

* final fixes
2022-10-20 08:08:42 +02:00
Eric Fennis
969254d986 Update readme and update repo logo (#828)
* Add ids to logos

* try this

* fix viewBox svg images

* update svgs

* Update README.md

* update readme

* fix badges

* small fix

* fix image url
2022-10-19 22:34:35 +02:00
Lucide Bot
200cc17ef6 📦 Bump lucide package versions to 0.92.0 2022-10-19 11:04:51 +00:00
Luke Murray
893119b064 change direction of arrow in sort ascending (#819)
fixes https://github.com/lucide-icons/lucide/issues/805
2022-10-19 12:58:44 +02:00
Alen Šiljak
3e10988978 fixing the link title for Vue 2 (#821) 2022-10-19 12:46:38 +02:00
Alen Šiljak
53a764fc5b main branch name (#824) 2022-10-19 12:44:56 +02:00
Eric Fennis
4cc195092f Add framework svg logos 2022-10-19 09:19:15 +02:00
priority
b7ef305b9f docs: fix click button download zip accidentally (#816) 2022-10-19 07:52:18 +02:00
Alen Šiljak
52896efc94 Adding Svelte to the readme (#820)
* Adding Svelte to the readme

* adding solid section

Co-authored-by: Alen Šiljak <dev@alensiljak.eu.org>
2022-10-18 22:48:25 +02:00
Luke Murray
2c0448a19a Update CONTRIBUTING.md minimum node version (#818)
The build process uses import assertions which were added in Node 16.4. Updating the docs to reflect that since this bit me while contributing.

Example of import assertion

aa524c65a0/scripts/render/processSvg.mjs (L5)

[documentation for when import assertions were added in node](https://nodejs.org/api/esm.html#import-assertions)
2022-10-18 21:56:23 +02:00
Patrick Barrett
aa524c65a0 Fix signal-zero (#812)
Currently the icons `signal-zero` and `signal-low` are exactly the same.

![signal-low](https://github.com/lucide-icons/lucide/blob/main/icons/signal-low.svg)
![signal-zero](https://github.com/lucide-icons/lucide/blob/main/icons/signal-zero.svg)

Previously called out here https://github.com/lucide-icons/lucide/pull/428#issuecomment-1099289022 and confirmed by @ericfennis, the author of the original PR.

I've just manually edited `signal-zero` to remove the second bar.
2022-10-17 09:29:51 +02:00
Lauren Golembiewski
609ca31815 Update GitHub pull request guide link (#807)
Replace existing, broken link with new link found on egghead.
2022-10-16 18:20:20 +02:00
Lucide Bot
8fc34bfe1b 📦 Bump lucide package versions to 0.91.0 2022-10-03 14:45:59 +00:00
Karsa
48fa902b1c Added ear and ear-off (#804)
* Added ear and ear-off

* Fixes incorrect commit

Co-authored-by: Karsa <karsa@karsa.org>
2022-10-03 16:37:05 +02:00
Eric Fennis
cdd57e6610 Add Solid package (#797)
* init solid package

* add testing

* Fix tests solid

* add workflow

* update types build

* Fix typings file

* switch to camelCase props

* revert camelcased props

* Fix tests

* Fixing dynamic reactive props in lucide icons

* release beta

* strokeWidth fix

* bump beta version

* improve docs

* update beta release

* update vitest config

* Add automatic release for solid package
2022-10-03 16:36:33 +02:00
Lucide Bot
1f5119785b 📦 Bump lucide package versions to 0.90.0 2022-09-20 06:18:24 +00:00
Oliver Schmidt
90a3f6e1dd Add book-open-check icon #789 (#790)
* Add book-open-check icon

* Added tags for book-open-check

* Update icons/book-open-check.svg

Co-authored-by: Karsa <contact@karsa.org>

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Karsa <contact@karsa.org>
2022-09-20 08:12:10 +02:00
Lucide Bot
4ae4eae53d 📦 Bump lucide package versions to 0.89.0 2022-09-15 09:26:27 +00:00
Eric Fennis
e99228c65d Add plug icons (#786)
>
>
Co-authored-by: Karsa <karsa@karsa.org>
2022-09-15 11:18:55 +02:00
Eric Fennis
34249ff42c Fix site build (#796)
* Some fixes site

* A lot of fixes in the site

* move file
2022-09-13 09:03:13 +02:00
andreas
f9d37968d6 Fix typo in lucide-vuew (#795) 2022-09-12 21:26:35 +02:00
Chad Fernandez
864b71822b Fixed a small typo in the docs. (#787) 2022-08-25 11:44:40 +02:00
Lucide Bot
bc3bd1267a 📦 Bump lucide package versions to 0.88.0 2022-08-18 16:29:35 +00:00
Karsa
5d22d8e456 Added sailboat (#665)
* Added accessibility icon as per https://github.com/feathericons/feather/issues/633

* added newline to end of file

* Updated icon to comply with design guidelines and more closely match accessibleicon.org

* Added sailboat

* Updates icon based on @ericfennis' suggestion. Adds harbour and port tags.

* Update icons/sailboat.svg

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Update icons/sailboat.svg

Merge extra paths into a single triangle.

Co-authored-by: Karsa <karsa@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2022-08-18 18:20:10 +02:00
Lucide Bot
db98602331 📦 Bump lucide package versions to 0.87.0 2022-08-18 10:25:46 +00:00
it-is-not
4eca473cd4 Add arrow-up-down icon (#785)
* add arrow-up-down icon

* add more tags

* Update tags.json

Co-authored-by: Karsa <contact@karsa.org>

* Update icons/arrow-up-down.svg

Co-authored-by: Karsa <contact@karsa.org>

* add tags to arrow-left-right

Co-authored-by: Karsa <contact@karsa.org>
2022-08-18 12:18:23 +02:00
Eric Fennis
e6eedee22d Add version command to package.jsons 2022-08-10 19:12:21 +02:00
Lucide Bot
a8174a34b5 📦 Bump lucide package versions to 0.86.0 2022-08-10 13:38:57 +00:00
Karsa
3196af66ce Adds remaning hotel icons. (#756)
Co-authored-by: Karsa <karsa@karsa.org>
2022-08-10 15:32:26 +02:00
Eric Fennis
dd593e3dc3 Add no --no-git-checks for release workflow 2022-08-10 15:31:25 +02:00
159 changed files with 6529 additions and 6217 deletions

View File

@@ -17,5 +17,9 @@ module.exports = {
trailingComma: 'all'
}
]
}
},
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
},
};

View File

@@ -14,8 +14,8 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16

View File

@@ -12,8 +12,8 @@ jobs:
lucide-angular:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-angular test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-preact:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-preact test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-react-native:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react-native test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-react:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react test

47
.github/workflows/lucide-solid.yml vendored Normal file
View File

@@ -0,0 +1,47 @@
name: Lucide Solid Checks
on:
pull_request:
paths:
- packages/lucide-solid/**
push:
paths:
- packages/lucide-solid/**
jobs:
lucide-solid:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm --filter lucide-solid build
- name: Test
run: pnpm --filter lucide-solid test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-static:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -42,4 +42,3 @@ jobs:
- name: Build
run: pnpm --filter lucide-static build

View File

@@ -12,8 +12,8 @@ jobs:
lucide-svelte:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-svelte test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-vue-next:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-vue-next test

View File

@@ -12,8 +12,8 @@ jobs:
lucide-vue:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-vue test

View File

@@ -12,8 +12,8 @@ jobs:
lucide:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -45,4 +45,3 @@ jobs:
- name: Test
run: pnpm --filter lucide test

View File

@@ -3,7 +3,7 @@ name: Release Packages
on:
push:
tags:
- "v*"
- 'v*'
workflow_dispatch:
inputs:
@@ -32,8 +32,8 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -73,7 +73,7 @@ jobs:
run: pnpm --filter lucide test
- name: Publish
run: pnpm --filter lucide publish
run: pnpm --filter lucide publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -86,9 +86,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -128,7 +128,7 @@ jobs:
run: pnpm --filter lucide-react test
- name: Publish
run: pnpm --filter lucide-react publish
run: pnpm --filter lucide-react publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -141,9 +141,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -183,7 +183,7 @@ jobs:
run: pnpm --filter lucide-react-native test
- name: Publish
run: pnpm --filter lucide-react-native publish
run: pnpm --filter lucide-react-native publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -196,9 +196,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -238,7 +238,7 @@ jobs:
run: pnpm --filter lucide-vue test
- name: Publish
run: pnpm --filter lucide-vue publish
run: pnpm --filter lucide-vue publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -251,9 +251,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -293,7 +293,7 @@ jobs:
run: pnpm --filter lucide-vue-next test
- name: Publish
run: pnpm --filter lucide-vue-next publish
run: pnpm --filter lucide-vue-next publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -306,9 +306,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -345,10 +345,10 @@ jobs:
run: pnpm --filter lucide-angular build
- name: Test
run: pnpm --filter lucide-angular test:headless
run: pnpm --filter lucide-angular test
- name: Publish
run: pnpm --filter lucide-angular publish dist
run: pnpm --filter lucide-angular publish dist --no-git-checks --ignore-scripts
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -361,9 +361,9 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -403,7 +403,7 @@ jobs:
run: pnpm --filter lucide-preact test
- name: Publish
run: pnpm --filter lucide-preact publish
run: pnpm --filter lucide-preact publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -411,14 +411,69 @@ jobs:
name: lucide-preact-package-json
path: packages/lucide-preact/package.json
lucide-solid:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: pnpm --filter lucide-solid version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: pnpm --filter lucide-solid build
- name: Test
run: pnpm --filter lucide-solid test
- name: Publish
run: pnpm --filter lucide-solid publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-solid-package-json
path: packages/lucide-solid/package.json
lucide-svelte:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -458,7 +513,7 @@ jobs:
run: pnpm --filter lucide-svelte test
- name: Publish
run: pnpm --filter lucide-svelte publish
run: pnpm --filter lucide-svelte publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -471,10 +526,10 @@ jobs:
runs-on: ubuntu-latest
needs: [pre-build, lucide-font]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -514,7 +569,7 @@ jobs:
run: pnpm --filter lucide-static build
- name: Publish
run: pnpm --filter lucide-static publish
run: pnpm --filter lucide-static publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -527,8 +582,8 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v3.4.1
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
@@ -584,7 +639,7 @@ jobs:
mkdir lucide-font
pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
- name: "Upload to Artifacts"
- name: 'Upload to Artifacts'
uses: actions/upload-artifact@v1
with:
name: lucide-font
@@ -597,7 +652,7 @@ jobs:
container:
image: cirrusci/flutter:latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- uses: actions/cache@v2
with:
@@ -680,13 +735,14 @@ jobs:
]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- name: Commit package files
run: |
mv lucide-package-json/package.json packages/lucide/package.json
mv lucide-react-package-json/package.json packages/lucide-react/package.json
mv lucide-react-native-package-json/package.json packages/lucide-react-native/package.json
mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json

View File

@@ -10,13 +10,13 @@ The following is a set of guidelines for contributing to Lucide. Feel free to pr
Feel free to open a pull-request to contribute to this project.
**Working on your first Pull Request?** You can learn how from this *free* series
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
[How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
Guidelines for pull requests:
- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves wont make apparent.
- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `main` branch.
- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
### Pull Requests Including Icons
@@ -65,7 +65,7 @@ If you are a designer who wants to contribute to Lucide but you don't know what
## Development
You will need minimum version of [Nodejs 16+](https://nodejs.org)
You will need minimum version of [Nodejs 16.4+](https://nodejs.org)
For packagemanagement you will need [yarn v1](https://yarnpkg.com/getting-started/install).
For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).

122
README.md
View File

@@ -1,15 +1,15 @@
<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
<p align="center">
<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
<a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
<a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json" alt="figma installs"></a>
<a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
<a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
</p>
# Lucide
![NPM](https://img.shields.io/npm/l/lucide)
[![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide)
[![installs](https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json)](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)
[![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts)
## What is Lucide?
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
It began after growing disaffection with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
@@ -23,24 +23,25 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
## Table of Contents
* [Installation](#installation)
* [Package managers](#package-managers)
* [CDN](#cdn)
* [Usage](#usage)
* [Web](#web)
* [React](#react)
* [React Native](#react-native)
* [Vue 2](#vue-2)
* [Vue 3](#vue-3)
* [Angular](#angular)
* [Preact](#preact)
* [Static](#static-svg-sprite-font-icons-)
* [Figma](#figma)
* [Laravel](#laravel)
* [Flutter](#flutter)
* [Contributing](#contributing)
* [Community](#community)
* [License](#license)
- [Usage](#usage)
- [Web](#web)
- [React](#react)
- [React Native](#react-native)
- [Vue 2](#vue-2)
- [Vue 3](#vue-3)
- [Angular](#angular)
- [Preact](#preact)
- [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
- [Figma](#figma)
- [Laravel](#laravel)
- [Flutter](#flutter)
- [Svelte](#svelte)
- [Solid](#solid)
- [Contributing](#contributing)
- [Community](#community)
- [License](#license)
- [Credits](#credits)
- [Sponsors](#sponsors)
## Usage
@@ -55,9 +56,11 @@ Implementation of the lucide icon library for web applications.
```sh
npm install lucide
```
#or
or
```sh
yarn add lucide
```
@@ -69,9 +72,11 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -83,13 +88,15 @@ Implementation of the lucide icon library for React Native applications.
```sh
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react-native#lucide-react-native).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native).
### Vue 2
@@ -97,9 +104,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -111,9 +120,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
@@ -123,9 +134,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -137,9 +150,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -156,9 +171,11 @@ NPM package
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -190,6 +207,38 @@ flutter pub add lucide_icons
For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
### Svelte
Implementation of the lucide icon library for Svelte applications.
```sh
yarn add lucide-svelte
```
or
```sh
npm install lucide-svelte
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte#lucide-svelte).
### Solid
Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
or
```sh
npm install lucide-solid
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-solid#lucide-solid).
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
@@ -216,4 +265,3 @@ Thank you to all the people who contributed to Lucide!
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
</a>

View File

@@ -8,7 +8,7 @@ title: Comparison
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned adn not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned and not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers.

View File

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
```bash
npm install lucide
```
#or
or
```sh
yarn add lucide
```
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
```bash
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
```bash
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
```bash
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -106,7 +120,7 @@ The lucide figma plugin.
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')
## Laravel

View File

@@ -4,11 +4,13 @@ Implementation of the lucide icon library for angular applications.
## Installation
``` sh
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -20,12 +22,12 @@ There are three ways for use this library.
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
``` html
```html
<!-- app.component.html -->
<div id="lucide-icon"></div>
```
``` js
```js
// app.component.ts
import { Component, OnInit } from '@angular/core';
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
@@ -51,11 +52,11 @@ export class AppComponent implements OnInit {
}
```
### Method 2: User __Tag__ with __name__ property
### Method 2: User **Tag** with **name** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -65,32 +66,29 @@ import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
```
``` html
```html
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>
```
### Method 3: User __Tag__ with __img__ property
### Method 3: User **Tag** with **img** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -100,28 +98,21 @@ import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
```
``` xml
```xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
``` js
```js
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular';
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;
@@ -144,7 +134,7 @@ export class AppComponent {
In `Method 2`: import all icons in `app.module.ts` by:
``` js
```js
import { icons } from 'lucide-angular/icons';

View File

@@ -10,28 +10,30 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a preact component.
### Example
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-preact';
// Returns PreactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -39,20 +41,20 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props / svg attributes
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
``` js
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -62,17 +64,17 @@ const App = () => {
It is possible to create one generic icon component to load icons.
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
``` js
```js
import * as icons from 'lucide-preact';
const Icon = ({name, color, size}) => {
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -8,15 +8,17 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install
```bash
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a react component.
### Example

View File

@@ -4,30 +4,32 @@ Implementation of the lucide icon library for react applications
## Installation
``` bash
```bash
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a react component.
### Example
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-react';
// Returns ReactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -35,20 +37,20 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` js
```js
// Usage
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -56,17 +58,17 @@ const App = () => {
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
``` js
```js
import * as icons from 'lucide-react';
const Icon = ({name, color, size}) => {
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -19,23 +19,25 @@ This package is suitable for very specific use cases for example if you want to
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
### CDN
``` html
```html
<!-- Svg File -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
<!-- Icon Font -->
<style>
@font-face {
font-family: "LucideIcons";
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
font-family: 'LucideIcons';
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
}
</style>
```
@@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
To use it in for example html:
``` html
```html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
<img src="~lucide-static/icons/home.svg" />
```
``` css
```css
.home-icon {
background-image: url(~lucide-static/icons/home.svg)
background-image: url(~lucide-static/icons/home.svg);
}
```
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
```js
import arrowRightIcon from 'lucide-static/icons/arrow-right'
import arrowRightIcon from 'lucide-static/icons/arrow-right';
// return string of a svg
```
@@ -80,7 +82,7 @@ You may need additional loader for this.
```html
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home">
<img src="lucide-static/sprite.svg#home" />
<!-- or -->
<svg
@@ -104,13 +106,13 @@ If you'd prefer, you can use CSS to hold your base SVG properties
```css
.lucide-icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
```
@@ -133,20 +135,19 @@ and update the svg as follows
### Icon Font
```css
@import("~lucide-static/font/Lucide.css")
@import ('~lucide-static/font/Lucide.css');
```
```html
<div class="icon-home"></div>
```
### Node.js
To use lucide icons in your Nodejs project you can import each icon as:
```js
const { messageSquare } = require('lucide-static/lib')
const { messageSquare } = require('lucide-static/lib');
```
> Note: Each icon name is in camelCase.
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
#### Example in node.js project
```js
const express = require('express')
const { messageSquare } = require('lucide-static/lib')
const app = express()
const port = 3000
const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send(`
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
</body>
</html>
`)
})
`);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
console.log(`Example app listening at http://localhost:${port}`);
});
```

View File

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications.
```bash
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -22,17 +24,17 @@ Default usage:
```html
<script>
import { Skull } from 'lucide-svelte'
import { Skull } from 'lucide-svelte';
</script>
<Skull/>
<Skull />
```
You can pass additional props to adjust the icon.
```html
<script>
import { Camera } from 'lucide-svelte'
import { Camera } from 'lucide-svelte';
</script>
<Camera color="#ff3e98" />
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
### Available props
| name | type | default
| -------------- | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth` | *Number* | 2
| `*<SVGProps>` | *String* | -
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `*<SVGProps>` | _String_ | - |
\* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
@@ -53,10 +55,10 @@ import { Camera } from 'lucide-svelte'
```html
<script>
import { Phone } from 'lucide-svelte'
import { Phone } from 'lucide-svelte';
</script>
<Phone fill="#333"/>
<Phone fill="#333" />
```
This results a filled phone icon.
@@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` html
```html
<script>
import * as icons from "lucide-svelte";
import * as icons from 'lucide-svelte';
export let name;
</script>
<svelte:component this={icons[name]} {...$$props}/>
<svelte:component this="{icons[name]}" {...$$props} />
```
##### Then you can use it like this
``` html
```html
<script>
import LucideIcon from "./LucideIcon";
import LucideIcon from './LucideIcon';
</script>
<LucideIcon name="Menu" />

View File

@@ -2,7 +2,7 @@
Implementation of the lucide icon library for Vue 3 applications.
> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](lucide-vue)
> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue](lucide-vue)
## Installation
@@ -20,7 +20,7 @@ npm install lucide-vue-next
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a vue component.
### Example
@@ -35,15 +35,8 @@ You can pass additional props to adjust the icon.
/>
</template>
<script>
// Returns Vue component
<script setup>
import { Camera } from 'lucide-vue-next';
export default {
name: "My Component",
components: { Camera }
}
</script>
```
@@ -53,8 +46,8 @@ export default {
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| `stroke-width`| *Number* | 2
| `default-class`| *String* | lucide-icon
### Custom props
@@ -76,25 +69,25 @@ It is possible to create one generic icon component to load icons.
``` html
<template>
<component :is="icon" />
<component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
</template>
<script>
<script setup>
import { computed } from 'vue';
import * as icons from "lucide-vue-next";
export default {
props: {
name: {
type: String,
required: true,
},
const props = defineProps({
name: {
type: String,
required: true
},
setup(props) {
const icon = computed(() => icons[props.name])
size: Number,
color: String,
strokeWidth: Number,
defaultClass: String
})
return { icon }
}
};
const icon = computed(() => icons[props.name]);
</script>
```
@@ -107,3 +100,4 @@ export default {
</div>
</template>
```
All other props listed above also work on the `Icon` Component.

View File

@@ -8,55 +8,53 @@ Implementation of the lucide icon library for Vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` html
```html
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
// Returns Vue component
import { Camera } from 'lucide-vue';
export default {
name: "My Component",
components: { Camera }
}
// Returns Vue component
import { Camera } from 'lucide-vue';
export default {
name: 'My Component',
components: { Camera }
};
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| name | type | default |
| -------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `defaultClass` | _String_ | lucide-icon |
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` html
```html
<template>
<Camera fill="red" />
</template>
@@ -70,33 +68,33 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` html
```html
<template>
<component :is="icon" />
</template>
<script>
import * as icons from "lucide-vue";
import * as icons from 'lucide-vue';
export default {
props: {
name: {
type: String,
required: true,
export default {
props: {
name: {
type: String,
required: true
}
},
},
computed: {
icon() {
return icons[this.name];
},
},
};
computed: {
icon() {
return icons[this.name];
}
}
};
</script>
```
##### Then you can use it like this
``` html
```html
<template>
<div id="app">
<Icon name="Airplay" />

View File

@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
### Package Managers
``` bash
```sh
npm install lucide
#or
```
or
```sh
yarn add lucide
```
### CDN
``` html
```html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
@@ -44,7 +48,7 @@ Here is a complete example with unpkg
### With ESModules
To reduce bundle size, lucide is built to be fully treeshakable.
To reduce bundle size, lucide is built to be fully tree-shakable.
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
```html
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
import { createIcons, icons } from 'lucide';
// Caution, this will import all the icons and bundle them.
createIcons({icons});
createIcons({ icons });
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
@@ -65,8 +69,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```
@@ -83,9 +87,9 @@ createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
stroke: '#333'
},
nameAttr: 'icon-name', // attribute for the icon name.
nameAttr: 'icon-name' // attribute for the icon name.
});
```
@@ -98,8 +102,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```

16
icons/arrow-up-down.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="11 17 7 21 3 17"/>
<line x1="7" y1="21" x2="7" y2="9"/>
<polyline points="21 7 17 3 13 7"/>
<line x1="17" y1="15" x2="17" y2="3"/>
</svg>

After

Width:  |  Height:  |  Size: 365 B

15
icons/book-open-check.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4Z" />
<path d="m16 12 2 2 4-4" />
<path d="M22 6V3h-6c-2.2 0-4 1.8-4 4v14c0-1.7 1.3-3 3-3h7v-2.3" />
</svg>

After

Width:  |  Height:  |  Size: 369 B

18
icons/cat.svg Normal file
View 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
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 6 7 17l-5-5" />
<path d="m22 10-7.5 7.5L13 16" />
</svg>

After

Width:  |  Height:  |  Size: 275 B

16
icons/concierge-bell.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 18a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2H2v-2Z" />
<path d="M20 16a8 8 0 1 0-16 0" />
<path d="M12 4v4" />
<path d="M10 4h4" />
</svg>

After

Width:  |  Height:  |  Size: 351 B

18
icons/dog.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5"/>
<path d="M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/>
<path d="M8 14v.5"/>
<path d="M16 14v.5"/>
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
<path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444c0-1.061-.162-2.2-.493-3.309m-9.243-6.082A8.801 8.801 0 0 1 12 5c.78 0 1.5.108 2.161.306"/>
</svg>

After

Width:  |  Height:  |  Size: 764 B

17
icons/ear-off.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 18.5a3.5 3.5 0 1 0 7 0c0-1.57.92-2.52 2.04-3.46" />
<path d="M6 8.5c0-.75.13-1.47.36-2.14" />
<path d="M8.8 3.15A6.5 6.5 0 0 1 19 8.5c0 1.63-.44 2.81-1.09 3.76" />
<path d="M12.5 6A2.5 2.5 0 0 1 15 8.5M10 13a2 2 0 0 0 1.82-1.18" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>

After

Width:  |  Height:  |  Size: 501 B

14
icons/ear.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0" />
<path d="M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4" />
</svg>

After

Width:  |  Height:  |  Size: 337 B

14
icons/fan.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.827 16.379a6.082 6.082 0 0 1-8.618-7.002l5.412 1.45a6.082 6.082 0 0 1 7.002-8.618l-1.45 5.412a6.082 6.082 0 0 1 8.618 7.002l-5.412-1.45a6.082 6.082 0 0 1-7.002 8.618l1.45-5.412Z" />
<path d="M12 12v.01" />
</svg>

After

Width:  |  Height:  |  Size: 431 B

16
icons/heading-1.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 12h8" />
<path d="M4 18V6" />
<path d="M12 18V6" />
<path d="m17 12 3-2v8" />
</svg>

After

Width:  |  Height:  |  Size: 306 B

16
icons/heading-2.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 12h8" />
<path d="M4 18V6" />
<path d="M12 18V6" />
<path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" />
</svg>

After

Width:  |  Height:  |  Size: 331 B

17
icons/heading-3.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 12h8" />
<path d="M4 18V6" />
<path d="M12 18V6" />
<path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2" />
<path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" />
</svg>

After

Width:  |  Height:  |  Size: 393 B

17
icons/heading-4.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 12h8" />
<path d="M4 18V6" />
<path d="M12 18V6" />
<path d="M17 10v4h4" />
<path d="M21 10v8" />
</svg>

After

Width:  |  Height:  |  Size: 328 B

17
icons/heading-5.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 12h8" />
<path d="M4 18V6" />
<path d="M12 18V6" />
<path d="M17 13v-3h4" />
<path d="M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17" />
</svg>

After

Width:  |  Height:  |  Size: 385 B

17
icons/heading-6.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 12h8" />
<path d="M4 18V6" />
<path d="M12 18V6" />
<circle cx="19" cy="16" r="2" />
<path d="M20 10c-2 2-3 3.5-3 6" />
</svg>

After

Width:  |  Height:  |  Size: 350 B

15
icons/heading.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 12h12" />
<path d="M6 20V4" />
<path d="M18 20V4" />
</svg>

After

Width:  |  Height:  |  Size: 279 B

17
icons/microwave.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="4" width="20" height="15" rx="2" />
<rect x="6" y="8" width="8" height="7" rx="1" />
<path d="M18 8v7" />
<path d="M6 19v2" />
<path d="M18 19v2" />
</svg>

After

Width:  |  Height:  |  Size: 382 B

17
icons/plug-2.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 2v6" />
<path d="M15 2v6" />
<path d="M12 17v5" />
<path d="M5 8h14" />
<path d="M6 11V8h12v3a6 6 0 1 1-12 0v0Z" />
</svg>

After

Width:  |  Height:  |  Size: 346 B

16
icons/plug.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 22v-5" />
<path d="M9 7V2" />
<path d="M15 7V2" />
<path d="M6 13V8h12v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4Z" />
</svg>

After

Width:  |  Height:  |  Size: 338 B

15
icons/refrigerator.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 6a4 4 0 0 1 4-4h6a4 4 0 0 1 4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6Z" />
<path d="M5 10h14" />
<path d="M15 7v6" />
</svg>

After

Width:  |  Height:  |  Size: 341 B

15
icons/sailboat.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M22 18H2a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4Z"/>
<path d="M21 14 10 2 3 14h18Z"/>
<path d="M10 2v16"/>
</svg>

After

Width:  |  Height:  |  Size: 321 B

22
icons/shower-head.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m4 4 2.5 2.5" />
<path d="M13.5 6.5a4.95 4.95 0 0 0-7 7" />
<path d="M15 5 5 15" />
<path d="M14 17v.01" />
<path d="M10 16v.01" />
<path d="M13 13v.01" />
<path d="M16 10v.01" />
<path d="M11 20v.01" />
<path d="M17 14v.01" />
<path d="M20 11v.01" />
</svg>

After

Width:  |  Height:  |  Size: 489 B

View File

@@ -10,5 +10,4 @@
stroke-linejoin="round"
>
<path d="M2 20h.01" />
<path d="M7 20v-4" />
</svg>

Before

Width:  |  Height:  |  Size: 257 B

After

Width:  |  Height:  |  Size: 233 B

View File

@@ -9,9 +9,9 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M11 5h4" />
<path d="M11 9h7" />
<path d="M11 13h10" />
<path d="m3 17 3 3 3-3" />
<path d="M6 18V4" />
<path d="M11 11H15" />
<path d="M11 15H18" />
<path d="M11 19H21" />
<path d="M9 7L6 4L3 7" />
<path d="M6 6L6 20" />
</svg>

Before

Width:  |  Height:  |  Size: 331 B

After

Width:  |  Height:  |  Size: 336 B

15
icons/spline.svg Normal file
View 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

View File

@@ -17,7 +17,8 @@
"generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
"optimize": "node ./scripts/optimizeSvgs.mjs",
"addtags": "node ./scripts/addMissingKeysToTags.mjs",
"generate:changelog": "node ./scripts/generateChangelog.mjs"
"generate:changelog": "node ./scripts/generateChangelog.mjs",
"postinstall": "husky install"
},
"devDependencies": {
"@atomico/rollup-plugin-sizes": "^1.1.4",
@@ -39,7 +40,7 @@
"eslint-config-prettier": "^2.10.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^2.7.0",
"husky": "^4.3.8",
"husky": "^8.0.0",
"jest": "^28.1.3",
"lint-staged": "^10.5.4",
"minimist": "^1.2.6",
@@ -62,5 +63,6 @@
},
"lint-staged": {
"icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
}
},
"packageManager": "pnpm@7.14.0"
}

View File

@@ -6,11 +6,13 @@ Implementation of the lucide icon library for angular applications.
## Installation
``` sh
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
@@ -22,12 +24,12 @@ There are three ways for use this library.
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
``` html
```html
<!-- app.component.html -->
<div id="lucide-icon"></div>
```
``` js
```js
// app.component.ts
import { Component, OnInit } from '@angular/core';
@@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
@@ -53,11 +54,11 @@ export class AppComponent implements OnInit {
}
```
### Method 2: User __Tag__ with __name__ property
### Method 2: User **Tag** with **name** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -67,31 +68,29 @@ import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
```
``` html
```html
<!-- app.component.html -->
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
<lucide-icon name="edit" class="myicon"></lucide-icon>
```
### Method 3: User __Tag__ with __img__ property
### Method 3: User **Tag** with **img** property
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
```js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@@ -101,27 +100,21 @@ import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
```
``` xml
```xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
``` js
```js
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular';
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;
@@ -144,7 +136,7 @@ export class AppComponent {
In `Method 2`: import all icons in `app.module.ts` by:
``` js
```js
...
import { icons } from 'lucide-angular/icons';
....

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-angular",
"description": "A Lucide icon library package for Angular applications",
"version": "0.84.0",
"version": "0.93.0",
"author": "SMAH1",
"license": "ISC",
"homepage": "https://lucide.dev",
@@ -26,42 +26,43 @@
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtention=.ts --exportFileName=index.ts",
"build:ng": "ng build --prod",
"build:ng": "ng build --configuration production",
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
"test:watch": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
"version": "pnpm version --git-tag-version=false"
},
"dependencies": {
"tslib": "^2.3.1"
"tslib": "^2.4.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1102.5",
"@angular/cli": "~11.2.15",
"@angular/common": "~11.2.14",
"@angular/compiler": "~11.2.14",
"@angular/compiler-cli": "~11.2.14",
"@angular/core": "~11.2.14",
"@angular/platform-browser": "~11.2.14",
"@angular/platform-browser-dynamic": "~11.2.14",
"@types/jasmine": "~3.10.2",
"@types/node": "^16.11.7",
"@angular-devkit/build-angular": "~14.2.6",
"@angular/cli": "~14.2.6",
"@angular/common": "~14.2.7",
"@angular/compiler": "~14.2.7",
"@angular/compiler-cli": "~14.2.7",
"@angular/core": "~14.2.7",
"@angular/platform-browser": "~14.2.7",
"@angular/platform-browser-dynamic": "~14.2.7",
"@types/jasmine": "~4.3.0",
"@types/node": "^18.11.4",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.10.1",
"jasmine-core": "~4.4.0",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.14",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.7.0",
"ng-packagr": "^11.2.4",
"karma": "~6.4.1",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"ng-packagr": "^14.2.1",
"protractor": "~7.0.0",
"puppeteer": "^8.0.0",
"rxjs": "6.5.3",
"ts-node": "~10.4.0",
"puppeteer": "^19.1.0",
"rxjs": "7.5.7",
"ts-node": "~10.9.1",
"tslint": "~6.1.0",
"typescript": "~4.1.5",
"zone.js": "^0.11.7"
"typescript": "~4.8.4",
"zone.js": "^0.11.8"
}
}

View File

@@ -5,6 +5,7 @@
"declarationMap": false
},
"angularCompilerOptions": {
"enableIvy": false
"enableIvy": true,
"compilationMode": "partial"
}
}

View File

@@ -13,7 +13,6 @@
"serve": "vite preview"
},
"dependencies": {
"@emotion/core": "^10.0.14",
"minimist": "^1.2.6",
"react": "^17.0.0",
"react-dom": "^17.0.0"

View File

@@ -1,6 +1,6 @@
name: lucide_icons
description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
version: 0.84.0
version: 0.93.0
homepage: https://lucide.dev
repository: https://github.com/lucide-icons/lucide

View File

@@ -8,28 +8,30 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a preact component.
### Example
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-preact';
// Returns PreactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,20 +39,20 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props / svg attributes
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
``` js
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
@@ -60,17 +62,17 @@ const App = () => {
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
``` js
```js
import * as icons from 'lucide-preact';
const Icon = ({name, color, size}) => {
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-preact",
"description": "A Lucide icon library package for Preact applications",
"version": "0.84.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -17,17 +17,20 @@
"module": "dist/esm/lucide-preact.js",
"unpkg": "dist/umd/lucide-preact.min.js",
"typings": "dist/lucide-preact.d.ts",
"files": ["dist"],
"files": [
"dist"
],
"sideEffects": false,
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
"build:es": "babel src -d dist/esm",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.js",
"test": "jest"
"test": "jest",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/preact": "^2.0.1",

View File

@@ -21,6 +21,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
ref?: string | ((component: any) => any) | RefObject<any>;
color?: string
size?: string | number
strokeWidth?: string | number
}
// Generated icons

View File

@@ -6,30 +6,32 @@ Implementation of the lucide icon library for React Native applications.
## Installation
First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0.0` installed. Then, install the package:
```sh
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```
## How to use
It's built with ES modules so it's completely threeshakable.
It's built with ES modules so it's completely tree-shakable.
Each icon can be imported as a react component.
### Example
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-react-native';
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -37,19 +39,19 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` js
```js
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -59,13 +61,13 @@ It is possible to create a generic icon component to load icons.
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
``` js
```js
import * as icons from 'lucide-react-native';
const Icon = ({name, color, size}) => {
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -19,7 +19,9 @@
"typings": "dist/lucide-react-native.d.ts",
"react-native": "dist/esm/lucide-react-native.js",
"sideEffects": false,
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
"copy:license": "cp ../../LICENSE ./LICENSE",
@@ -27,7 +29,8 @@
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.js",
"test": "jest"
"test": "jest",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/react": "^11.2.6",
@@ -37,12 +40,12 @@
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-native": "^0.69.0",
"react-native-svg": "^12.0.0"
"react-native-svg": "^13.0.0"
},
"peerDependencies": {
"prop-types": "^15.7.2",
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
"react-native": ">=0.50.0",
"react-native-svg": "^12.0.0"
"react-native": "*",
"react-native-svg": "^12.0.0 || ^13.0.0"
}
}

View File

@@ -8,26 +8,28 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
## How to use
It's built with ES modules so it's completely threeshakable.
It's built with ES modules so it's completely tree-shakable.
Each icon can be imported as a react component.
### Example
You can pass additional props to adjust the icon.
``` js
```js
import { Camera } from 'lucide-react';
const App = () => {
return <Camera color="red" size={48}/>
return <Camera color="red" size={48} />;
};
export default App;
@@ -35,19 +37,19 @@ export default App;
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` js
```js
const App = () => {
return <Camera fill="red"/>
return <Camera fill="red" />;
};
```
@@ -57,13 +59,13 @@ It is possible to create a generic icon component to load icons.
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
``` js
```js
import * as icons from 'lucide-react';
const Icon = ({name, color, size}) => {
const Icon = ({ name, color, size }) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
return <LucideIcon color={color} size={size} />;
};
export default Icon;

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-react",
"description": "A Lucide icon library package for React applications",
"version": "0.84.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -18,7 +18,9 @@
"unpkg": "dist/umd/lucide-react.min.js",
"typings": "dist/lucide-react.d.ts",
"sideEffects": false,
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
@@ -27,7 +29,8 @@
"build:es": "babel src -d dist/esm",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.js",
"test": "jest"
"test": "jest",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/react": "^11.2.6",

View File

@@ -0,0 +1,80 @@
# Lucide Solid
Implementation of the lucide icon library for solid applications.
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
## Installation
```sh
yarn add lucide-solid
```
or
```sh
npm install lucide-solid
```
## How to use
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a solid component.
### Example
You can pass additional props to adjust the icon.
```js
import { Camera } from 'lucide-solid';
// Returns SolidComponent
// Usage
const App = () => {
return <Camera color="red" size={48} />;
};
export default App;
```
### Props
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
### Custom props / svg attributes
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
```js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel" />;
};
```
### One generic icon component
It is possible to create one generic icon component to load icons.
> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
#### Icon Component Example
```tsx
import * as icons from 'lucide-solid';
import type { LucideProps } from 'lucide-solid';
import { splitProps } from 'solid-js';
import { Dynamic } from 'solid-js/web';
const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
const [local, others] = splitProps(props, ["name"]);
return <Dynamic component={icons[local.name]} {...others} />
};
export default Icon;
```

View File

@@ -0,0 +1,6 @@
const mainConfig = require('../../babel.config');
module.exports = {
presets: ['solid'],
env: mainConfig.env,
};

View File

@@ -0,0 +1,51 @@
{
"name": "lucide-solid",
"description": "A Lucide icon library package for Solid applications",
"version": "0.88.0-beta.3",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
"repository": {
"type": "git",
"url": "https://github.com/lucide-icons/lucide.git",
"directory": "packages/lucide-solid"
},
"author": "Eric Fennis",
"amdName": "lucide-solid",
"main": "dist/cjs/lucide-solid.js",
"main:umd": "dist/umd/lucide-solid.js",
"module": "dist/esm/lucide-solid.js",
"unpkg": "dist/umd/lucide-solid.min.js",
"typings": "dist/lucide-solid.d.ts",
"files": [
"dist"
],
"sideEffects": false,
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
"build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
"build:es": "babel src -d dist/esm",
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.js",
"test:jest": "jest",
"test": "vitest",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"babel-preset-solid": "^1.5.4",
"jest": "^26.6.3",
"jsdom": "^20.0.0",
"solid-js": "^1.4.7",
"solid-testing-library": "^0.3.0",
"solid-jest": "^0.2.0",
"vite": "^2.6.4",
"vite-plugin-solid": "^2.3.0",
"vitest": "^0.23.2"
},
"peerDependencies": {
"solid-js": "^1.4.7"
}
}

View File

@@ -0,0 +1,47 @@
import plugins from '../../rollup.plugins';
import pkg from './package.json';
const packageName = 'LucideSolid';
const outputFileName = 'lucide-solid';
const outputDir = 'dist';
const inputs = [`src/lucide-solid.js`];
const bundles = [
{
format: 'umd',
inputs,
outputDir,
minify: true,
},
{
format: 'umd',
inputs,
outputDir,
},
{
format: 'cjs',
inputs,
outputDir,
},
];
const configs = bundles
.map(({ inputs, outputDir, format, minify }) =>
inputs.map(input => ({
input,
plugins: plugins(pkg, minify),
external: ['solid-js', 'solid-js/h'],
output: {
name: packageName,
file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
format,
sourcemap: true,
globals: {
'solid-js': 'solid-js',
'solid-js/h': 'solid-js/h',
},
},
})),
)
.flat();
export default configs;

View File

@@ -0,0 +1,47 @@
import path from 'path';
import {
writeFile,
readSvgDirectory,
resetFile,
toPascalCase,
appendFile,
getCurrentDirPath
} from '../../../scripts/helpers.mjs';
const currentDir = getCurrentDirPath(import.meta.url)
const srcDirectory = path.join(currentDir, '../dist');
// Declare type definitions
const typeDefinitions = `\
/// <reference types="solid-js" />
import { JSX } from 'solid-js'
interface LucideProps extends Partial<JSX.IntrinsicElements & JSX.SvgSVGAttributes<SVGSVGElement>> {
key?: string | number;
ref?: string | ((component: any) => any);
color?: string
size?: string | number
strokeWidth?: string | number
class?: string
}
// Generated icons
`;
const ICONS_DIR = path.resolve(currentDir, '../../../icons');
const TYPES_FILE = 'lucide-solid.d.ts';
resetFile(TYPES_FILE, srcDirectory);
writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
const svgFiles = readSvgDirectory(ICONS_DIR);
svgFiles.forEach(svgFile => {
const iconName = path.basename(svgFile, '.svg');
const componentName = toPascalCase(iconName);
const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`;
appendFile(exportTypeString, TYPES_FILE, srcDirectory);
});
console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');

View File

@@ -0,0 +1,7 @@
export default ({ componentName, children }) => `
import createSolidComponent from '../createSolidComponent';
const ${componentName} = createSolidComponent('${componentName}', ${JSON.stringify(children)});
export default ${componentName};
`;

View File

@@ -0,0 +1,47 @@
import h from 'solid-js/h';
import { splitProps } from 'solid-js';
import defaultAttributes from './defaultAttributes';
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
export default (iconName, iconNode) => {
const Component = props => {
const [localProps, rest] = splitProps(props, [
'color',
'size',
'strokeWidth',
'children',
'class',
]);
const svgProps = {
...defaultAttributes,
width: () => (localProps.size != null ? localProps.size : defaultAttributes.width),
height: () => (localProps.size != null ? localProps.size : defaultAttributes.height),
stroke: () => (localProps.color != null ? localProps.color : defaultAttributes.stroke),
'stroke-width': () =>
localProps.strokeWidth != null ? localProps.strokeWidth : defaultAttributes['stroke-width'],
class: () =>
`lucide lucide-${toKebabCase(iconName)} ${
localProps.class != null ? localProps.class : ''
}`,
};
return h(
'svg',
[svgProps, rest],
[...iconNode.map(([tag, attrs]) => h(tag, attrs)), localProps.children],
);
};
Component.displayName = `${iconName}`;
return Component;
};

View File

@@ -0,0 +1,11 @@
export default {
xmlns: 'http://www.w3.org/2000/svg',
width: 24,
height: 24,
viewBox: '0 0 24 24',
fill: 'none',
stroke: 'currentColor',
'stroke-width': 2,
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
};

View File

@@ -0,0 +1 @@
Folder for generated icons

View File

@@ -0,0 +1 @@
export * from './icons';

View File

@@ -0,0 +1,5 @@
// Vitest Snapshot v1
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid \\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\" key=\\"maln0c\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\" key=\\"1uch6j\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\" key=\\"1xojw2\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\" key=\\"nvcl17\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\" key=\\"jcv93v\\"></line></svg>"`;
exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid \\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\" key=\\"maln0c\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\" key=\\"1uch6j\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\" key=\\"1xojw2\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\" key=\\"nvcl17\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\" key=\\"jcv93v\\"></line></svg>"`;

View File

@@ -0,0 +1,30 @@
import { describe, it, expect } from 'vitest';
import { render } from 'solid-testing-library'
import { Grid } from '../src/icons'
describe('Using lucide icon components', () => {
it('should render an component', () => {
const { container } = render(() => <Grid/> );
expect( container.innerHTML ).toMatchSnapshot();
});
it('should adjust the size, stroke color and stroke width', async () => {
const testId = 'grid-icon';
const { container, getByTestId } = render( () =>
<Grid
data-testid={testId}
size={48}
stroke="red"
strokeWidth={4}
/>,
);
const { attributes } = await getByTestId(testId) as unknown as{ attributes: Record<string, { value: string }>};
expect(attributes.stroke.value).toBe('red');
expect(attributes.width.value).toBe('48');
expect(attributes.height.value).toBe('48');
expect(attributes['stroke-width'].value).toBe('4');
expect( container.innerHTML ).toMatchSnapshot();
});
})

View File

@@ -0,0 +1 @@
import '@testing-library/jest-dom';

View File

@@ -0,0 +1,15 @@
{
"compilerOptions": {
"strict": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client"],
"noEmit": true,
"isolatedModules": true
}
}

View File

@@ -0,0 +1,19 @@
import { defineConfig } from 'vitest/config'
import solidPlugin from 'vite-plugin-solid';
export default defineConfig({
plugins: [solidPlugin()],
test: {
globals: true,
environment: 'jsdom',
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './tests/setupVitest.js',
threads: false,
isolate: false,
},
resolve: {
conditions: ['development', 'browser'],
},
});

View File

@@ -21,23 +21,25 @@ This package is suitable for very specific use cases for example if you want to
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
### CDN
``` html
```html
<!-- Svg File -->
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
<!-- Icon Font -->
<style>
@font-face {
font-family: "LucideIcons";
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
font-family: 'LucideIcons';
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
}
</style>
```
@@ -52,16 +54,17 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
To use it in for example html:
``` html
```html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
<img src="~lucide-static/icons/home.svg" />
```
``` css
```css
.home-icon {
background-image: url(~lucide-static/icons/home.svg)
background-image: url(~lucide-static/icons/home.svg);
}
```
Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
#### Svg file Inline
@@ -70,7 +73,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
```js
import arrowRightIcon from 'lucide-static/icons/arrow-right'
import arrowRightIcon from 'lucide-static/icons/arrow-right';
// return string of a svg
```
@@ -81,7 +84,7 @@ You may need additional loader for this.
```html
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home">
<img src="lucide-static/sprite.svg#home" />
<!-- or -->
<svg
@@ -96,22 +99,20 @@ You may need additional loader for this.
<use href="#alert-triangle" />
</svg>
<svg>
...sprite svg
</svg>
<svg>...sprite svg</svg>
```
If you'd prefer, you can use CSS to hold your base SVG properties
```css
.lucide-icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
```
@@ -134,20 +135,19 @@ and update the svg as follows
### Icon Font
```css
@import("~lucide-static/font/Lucide.css")
@import ('~lucide-static/font/Lucide.css');
```
```html
<div class="icon-home"></div>
```
### Node.js
To use lucide icons in your Nodejs project you can import each icon as:
```js
const { messageSquare } = require('lucide-static/lib')
const { messageSquare } = require('lucide-static/lib');
```
> Note: Each icon name is in camelCase.
@@ -155,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
#### Example in node.js project
```js
const express = require('express')
const { messageSquare } = require('lucide-static/lib')
const app = express()
const port = 3000
const express = require('express');
const { messageSquare } = require('lucide-static/lib');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send(`
@@ -173,12 +173,12 @@ app.get('/', (req, res) => {
</body>
</html>
`)
})
`);
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
console.log(`Example app listening at http://localhost:${port}`);
});
```
## Contributing

View File

@@ -16,7 +16,8 @@
"copy:license": "cp ../../LICENSE ./LICENSE",
"build": "pnpm clean && pnpm copy:license && pnpm copy:icons && pnpm copy:tags && pnpm build:lib",
"build:lib": "node ./scripts/buildLib.mjs",
"clean": "rm -rf lib && rm -rf build && rm -rf icons && rm -f sprite.svg && rm -f tags.json"
"clean": "rm -rf lib && rm -rf build && rm -rf icons && rm -f sprite.svg && rm -f tags.json",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"prettier": "^2.3.2",

View File

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for svelte applications.
```sh
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -42,14 +44,14 @@ import { Camera } from 'lucide-svelte'
### Available props
| name | type | default
| -------------- | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth` | *Number* | 2
| `*<SVGProps>` | *String* | -
| name | type | default |
| ------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `*<SVGProps>` | _String_ | - |
* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
- All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
### Example of custom props
@@ -71,7 +73,7 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` svelte
```svelte
<script>
import * as icons from "lucide-svelte";
export let name;
@@ -82,7 +84,7 @@ It is possible to create one generic icon component to load icons.
##### Then you can use it like this
``` svelte
```svelte
<script>
import LucideIcon from "./LucideIcon";
</script>

View File

@@ -1,7 +1,7 @@
{
"name": "lucide-svelte",
"description": "A Lucide icon library package for Svelte applications",
"version": "0.84.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,7 +19,9 @@
"unpkg": "dist/umd/lucide-svelte.min.js",
"typings": "dist/lucide-svelte.d.ts",
"sideEffects": false,
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles && pnpm build:types",
"copy:license": "cp ../../LICENSE ./LICENSE",
@@ -29,7 +31,8 @@
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.js",
"test": "jest",
"test:watch": "jest --watch"
"test:watch": "jest --watch",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.2",

View File

@@ -4,33 +4,32 @@ Implementation of the lucide icon library for Vue 3 applications.
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
> :warning: This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue)
> :warning: This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue)
## Installation
```sh
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` vue
```vue
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -38,27 +37,26 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-vue-next';
export default {
name: "My Component",
name: 'My Component',
components: { Camera }
}
};
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| name | type | default |
| -------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `defaultClass` | _String_ | lucide-icon |
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` vue
```vue
<template>
<Camera fill="red" />
</template>
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` vue
```vue
<template>
<component :is="icon" />
</template>
<script>
import * as icons from "lucide-vue-next";
import * as icons from 'lucide-vue-next';
export default {
props: {
name: {
type: String,
required: true,
},
required: true
}
},
computed: {
icon() {
return icons[this.name];
},
},
}
}
};
</script>
```
##### Then you can use it like this
``` vue
```vue
<template>
<div id="app">
<Icon name="Airplay" />

View File

@@ -1,6 +1,6 @@
{
"name": "lucide-vue-next",
"version": "0.84.0",
"version": "0.93.0",
"author": "Eric Fennis",
"description": "A Lucide icon library package for Vue 3 applications",
"license": "ISC",
@@ -19,7 +19,10 @@
"unpkg": "dist/umd/lucide-vue-next.min.js",
"typings": "dist/lucide-vue-next.d.ts",
"sideEffects": false,
"files": ["dist", "nuxt.js"],
"files": [
"dist",
"nuxt.js"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
@@ -29,7 +32,8 @@
"build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.js",
"test": "jest",
"test:watch": "jest --watchAll"
"test:watch": "jest --watchAll",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/vue": "^6.4.2",

View File

@@ -10,27 +10,26 @@ Implementation of the lucide icon library for Vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
## How to use
It's build with ESmodules so it's completely threeshakable.
It's build with ESmodules so it's completely tree-shakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` vue
```vue
<template>
<Camera
color="red"
:size="32"
/>
<Camera color="red" :size="32" />
</template>
<script>
@@ -38,27 +37,26 @@ You can pass additional props to adjust the icon.
import { Camera } from 'lucide-vue';
export default {
name: "My Component",
name: 'My Component',
components: { Camera }
}
};
</script>
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
| `defaultClass`| *String* | lucide-icon
| name | type | default |
| -------------- | -------- | ------------ |
| `size` | _Number_ | 24 |
| `color` | _String_ | currentColor |
| `strokeWidth` | _Number_ | 2 |
| `defaultClass` | _String_ | lucide-icon |
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` vue
```vue
<template>
<Camera fill="red" />
</template>
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
#### Icon Component Example
``` vue
```vue
<template>
<component :is="icon" />
</template>
<script>
import * as icons from "lucide-vue";
import * as icons from 'lucide-vue';
export default {
props: {
name: {
type: String,
required: true,
},
required: true
}
},
computed: {
icon() {
return icons[this.name];
},
},
}
}
};
</script>
```
##### Then you can use it like this
``` vue
```vue
<template>
<div id="app">
<Icon name="Airplay" />
@@ -109,17 +107,21 @@ export default {
## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
### Setup
In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
```js
export default {
buildModules: ['lucide-vue/nuxt']
}
};
```
### How to use
Icon components are prefixed with `Icon`. Use icon components without importing them.
### Example
```html
<IconCamera color="red" :size="32" />
```

View File

@@ -1,6 +1,6 @@
{
"name": "lucide-vue",
"version": "0.84.0",
"version": "0.93.0",
"author": "Eric Fennis",
"description": "A Lucide icon library package for Vue 2 applications",
"license": "ISC",
@@ -18,7 +18,9 @@
"module": "dist/esm/lucide-vue.js",
"unpkg": "dist/umd/lucide-vue.min.js",
"sideEffects": false,
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
@@ -27,7 +29,8 @@
"build:es": "babel src -d dist/esm",
"build:bundles": "rollup -c ./rollup.config.js",
"test": "jest",
"test:watch": "jest --watchAll"
"test:watch": "jest --watchAll",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.2",

View File

@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
### Package Managers
``` bash
```sh
npm install lucide
#or
```
or
```sh
yarn add lucide
```
### CDN
``` html
```html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
@@ -44,7 +48,7 @@ Here is a complete example with unpkg
### With ESModules
To reduce bundle size, lucide is built to be fully treeshakable.
To reduce bundle size, lucide is built to be fully tree-shakable.
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
```html
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
import { createIcons, icons } from 'lucide';
// Caution, this will import all the icons and bundle them.
createIcons({icons});
createIcons({ icons });
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
@@ -65,8 +69,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```
@@ -83,9 +87,9 @@ createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
stroke: '#333'
},
nameAttr: 'icon-name', // attribute for the icon name.
nameAttr: 'icon-name' // attribute for the icon name.
});
```
@@ -98,8 +102,8 @@ createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
Globe
}
});
```

View File

@@ -1,7 +1,7 @@
{
"name": "lucide",
"description": "A Lucide icon library package for web and javascript applications.",
"version": "0.84.0",
"version": "0.93.0",
"license": "ISC",
"homepage": "https://lucide.dev",
"bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -18,7 +18,9 @@
"unpkg": "dist/umd/lucide.min.js",
"typings": "dist/lucide.d.ts",
"sideEffects": false,
"files": ["dist"],
"files": [
"dist"
],
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:bundles && pnpm build:types",
"copy:license": "cp ../../LICENSE ./LICENSE",

9599
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,21 +1,14 @@
/* eslint-disable no-undef */
/* eslint-disable */
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'import', 'prettier'],
plugins: ['@typescript-eslint', 'import'],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@next/next/recommended',
'prettier',
],
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true,
trailingComma: 'all',
},
],
parserOptions: {
tsconfigRootDir: __dirname,
},
};

View File

@@ -1,3 +1,4 @@
/* eslint-disable */
module.exports = {
testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
setupFilesAfterEnv: ['<rootDir>/setupTests.js'],

View File

@@ -1,15 +1,11 @@
/* eslint-disable no-undef */
/* eslint-disable */
module.exports = {
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
issuer: {
and: [/\.(js|ts)x?$/],
},
use: ['@svgr/webpack'],
use: ["@svgr/webpack"]
});
return config;
},
}
};

View File

@@ -10,16 +10,16 @@
"export": "next export -o build",
"deploy": "pnpm build && pnpm export",
"lint": "eslint .",
"test": "jest"
"lint:fix": "eslint --fix .",
"test": "jest",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@chakra-ui/react": "1.8.8",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@mdx-js/loader": "^1.6.22",
"@mdx-js/react": "^1.6.22",
"@next/mdx": "^11.0.0",
"@svgr/webpack": "^6.2.1",
"@svgr/webpack": "^6.3.1",
"downloadjs": "^1.4.7",
"framer-motion": "^4",
"fuse.js": "^6.5.3",
@@ -37,23 +37,24 @@
"react-svg-loader": "^3.0.3"
},
"devDependencies": {
"@next/eslint-plugin-next": "^11.1.0",
"@testing-library/dom": "^7.24.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/react-hooks": "^3.4.2",
"react-test-renderer": "17.0.2",
"@next/eslint-plugin-next": "^12.2.5",
"@testing-library/dom": "^7.31.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.2.7",
"@testing-library/react-hooks": "^8.0.1",
"@types/jest": "^28.1.7",
"@types/node": "^14.0.11",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^4.29.1",
"@typescript-eslint/parser": "^4.29.1",
"@typescript-eslint/eslint-plugin": "^5.34.0",
"@typescript-eslint/parser": "^5.34.0",
"babel-jest": "^26.5.2",
"babel-loader": "^8.1.0",
"cheerio": "^1.0.0-rc.3",
"eslint": "^7.32.0",
"eslint": "^8.22.0",
"eslint-config-prettier": "^8.5.0",
"jest": "^26.5.2",
"prettier": "^2.3.2",
"react-test-renderer": "17.0.2",
"typescript": "^4.3.5"
}
}

View File

@@ -1,4 +1,4 @@
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="24" height="24" viewBox="-2 -2 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h20v20H0V0Z" fill="#F7DF1E"/>
<path d="M13.43 15.62c.41.67.92 1.14 1.87 1.14.76 0 1.27-.38 1.27-.92 0-.63-.5-.89-1.36-1.24l-.48-.22c-1.37-.57-2.25-1.3-2.25-2.82 0-1.4 1.08-2.48 2.73-2.48 1.2 0 2.06.41 2.7 1.5l-1.47.94c-.34-.57-.7-.79-1.23-.79-.54 0-.9.35-.9.8 0 .57.36.79 1.18 1.14l.45.19c1.62.7 2.5 1.4 2.5 2.95 0 1.68-1.33 2.63-3.1 2.63-1.75 0-2.9-.85-3.44-1.93l1.53-.9Zm-6.64.16c.29.54.58.98 1.21.98s1.02-.25 1.02-1.17V9.17h1.87v6.42c0 1.97-1.14 2.85-2.8 2.85a2.9 2.9 0 0 1-2.82-1.74l1.52-.92Z" fill="#000"/>
</svg>

Before

Width:  |  Height:  |  Size: 632 B

After

Width:  |  Height:  |  Size: 634 B

View File

@@ -0,0 +1,6 @@
<svg width="35" height="32" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5 12.3a2 2 0 1 0 0-4.1 2 2 0 0 0 0 4Z" fill="#20232a"/>
<path d="M11.5 14.4c6 0 11-1.8 11-4.2 0-2.3-5-4.2-11-4.2s-11 2-11 4.2c0 2.4 5 4.2 11 4.2Z" stroke="#20232a"/>
<path d="M7.9 12.3c3 5.3 7 8.6 9.1 7.5 2-1.2 1.2-6.4-1.9-11.7C12.1 3 8.1-.5 6 .7 4 2 4.8 7.1 7.9 12.3Z" stroke="#20232a"/>
<path d="M7.9 8.1c-3 5.3-4 10.5-1.9 11.7 2 1.1 6.1-2.2 9.1-7.5 3-5.2 4-10.4 1.9-11.6C15-.5 10.9 3 7.9 8.1Z" stroke="#20232a"/>
</svg>

After

Width:  |  Height:  |  Size: 540 B

View File

@@ -0,0 +1,35 @@
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#a)">
<path d="M31.42 6.75S21.2-.77 13.3.96l-.58.2a5.48 5.48 0 0 0-2.7 1.73l-.38.58-2.9 5.01 5.02.97c2.12 1.35 4.82 1.92 7.32 1.35l8.87 1.73 3.47-5.78Z" fill="#76B3E1"/>
<path opacity=".3" d="M31.42 6.75S21.2-.77 13.3.96l-.58.2a5.48 5.48 0 0 0-2.7 1.73l-.38.58-2.9 5.01 5.02.97c2.12 1.35 4.82 1.92 7.32 1.35l8.87 1.73 3.47-5.78Z" fill="url(#b)"/>
<path d="m10.02 6.75-.77.19c-3.27.96-4.24 4.05-2.5 6.75 1.92 2.5 5.97 3.85 9.25 2.89l11.95-4.05S17.73 5.01 10.02 6.75Z" fill="#518AC8"/>
<path opacity=".3" d="m10.02 6.75-.77.19c-3.27.96-4.24 4.05-2.5 6.75 1.92 2.5 5.97 3.85 9.25 2.89l11.95-4.05S17.73 5.01 10.02 6.75Z" fill="url(#c)"/>
<path d="M25.83 15.42a8.67 8.67 0 0 0-9.25-2.89L4.63 16.39.77 23.13l21.6 3.67 3.85-6.94c.77-1.35.58-2.9-.39-4.44Z" fill="url(#d)"/>
<path d="M21.98 22.17a8.67 8.67 0 0 0-9.26-2.9L.77 23.14S11 30.84 18.9 28.92l.58-.2c3.28-.96 4.43-4.05 2.5-6.55Z" fill="url(#e)"/>
</g>
<defs>
<linearGradient id="b" x1="5.3" y1=".58" x2="29.3" y2="12.24" gradientUnits="userSpaceOnUse">
<stop offset=".1" stop-color="#76B3E1"/>
<stop offset=".3" stop-color="#DCF2FD"/>
<stop offset="1" stop-color="#76B3E1"/>
</linearGradient>
<linearGradient id="c" x1="18.47" y1="6.28" x2="14.27" y2="20.28" gradientUnits="userSpaceOnUse">
<stop stop-color="#76B3E1"/>
<stop offset=".5" stop-color="#4377BB"/>
<stop offset="1" stop-color="#1F3B77"/>
</linearGradient>
<linearGradient id="d" x1="3.55" y1="12.38" x2="27.82" y2="28.88" gradientUnits="userSpaceOnUse">
<stop stop-color="#315AA9"/>
<stop offset=".5" stop-color="#518AC8"/>
<stop offset="1" stop-color="#315AA9"/>
</linearGradient>
<linearGradient id="e" x1="14.5" y1="14.36" x2="4.7" y2="50.27" gradientUnits="userSpaceOnUse">
<stop stop-color="#4377BB"/>
<stop offset=".5" stop-color="#1A336B"/>
<stop offset="1" stop-color="#1A336B"/>
</linearGradient>
<clipPath id="a">
<path fill="#fff" d="M0 0h32v29.94H0z"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

15
site/public/logo-icon.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="lucide-logo"
>
<path d="M14 12C14 9.79086 12.2091 8 10 8C7.79086 8 6 9.79086 6 12C6 16.4183 9.58172 20 14 20C18.4183 20 22 16.4183 22 12C22 8.446 20.455 5.25285 18 3.05557" stroke="#2D3748" />
<path d="M10 12C10 14.2091 11.7909 16 14 16C16.2091 16 18 14.2091 18 12C18 7.58172 14.4183 4 10 4C5.58172 4 2 7.58172 2 12C2 15.5841 3.57127 18.8012 6.06253 21" stroke="#F56565" />
</svg>

After

Width:  |  Height:  |  Size: 590 B

View File

@@ -0,0 +1,9 @@
<svg width="98" height="32" viewBox="0 0 98 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="98" height="32" rx="5" fill="white"/>
<svg height="24" width="82" y="4" x="8" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28.52 5.4h2.14v10.84h5.28V18h-7.42V5.4zm15.24 3.16h2.06V18h-1.58l-.26-1.14h-.08a5.26 5.26 0 01-1.26.94c-.507.267-1.12.4-1.84.4-1 0-1.8-.28-2.4-.84-.6-.56-.9-1.4-.9-2.52V8.56h2.06v6.06c0 .733.166 1.247.5 1.54.346.293.76.44 1.24.44.52 0 .98-.107 1.38-.32.4-.227.76-.52 1.08-.88V8.56zm9.297 8.08c.427 0 .8-.047 1.12-.14.334-.107.633-.227.9-.36l.42 1.48a4.7 4.7 0 01-1.16.42 6.55 6.55 0 01-1.5.16c-.693 0-1.347-.1-1.96-.3a4.782 4.782 0 01-1.58-.92 4.593 4.593 0 01-1.06-1.54c-.253-.613-.38-1.327-.38-2.14 0-.747.12-1.42.36-2.02.24-.613.58-1.133 1.02-1.56.44-.427.967-.753 1.58-.98a5.786 5.786 0 012.02-.34c.413 0 .827.033 1.24.1.427.067.894.22 1.4.46l-.46 1.5a3.995 3.995 0 00-1.96-.52c-.92 0-1.666.287-2.24.86-.573.573-.86 1.387-.86 2.44 0 .64.087 1.18.26 1.62.187.427.427.773.72 1.04.294.267.62.46.98.58.373.107.753.16 1.14.16zM57.211 18V8.56h2.06V18h-2.06zm1.04-11.78c-.36 0-.646-.107-.86-.32a1.18 1.18 0 01-.32-.84c0-.333.107-.607.32-.82.214-.227.5-.34.86-.34.347 0 .627.113.84.34.227.213.34.487.34.82 0 .347-.113.627-.34.84-.213.213-.493.32-.84.32zM68.33 3.78h2.06V18h-1.62l-.24-1.04h-.08c-.347.4-.734.707-1.16.92-.427.213-.98.32-1.66.32-.534 0-1.047-.1-1.54-.3a3.997 3.997 0 01-1.3-.94c-.374-.413-.674-.927-.9-1.54-.227-.613-.34-1.32-.34-2.12 0-.747.093-1.42.28-2.02.2-.6.48-1.113.84-1.54a3.71 3.71 0 011.36-.98c.533-.24 1.14-.36 1.82-.36.466 0 .92.073 1.36.22.44.147.813.353 1.12.62V3.78zm0 7.12c-.56-.64-1.234-.96-2.02-.96-.347 0-.68.06-1 .18-.32.12-.607.313-.86.58a2.834 2.834 0 00-.6 1.02c-.147.413-.22.92-.22 1.52s.066 1.113.2 1.54c.146.427.333.78.56 1.06.226.28.486.487.78.62.306.12.62.18.94.18.48 0 .9-.107 1.26-.32a2.93 2.93 0 00.96-.9V10.9zm12.858 2.74h-6.62v.08c0 .96.28 1.687.84 2.18.56.493 1.3.74 2.22.74.507 0 .96-.04 1.36-.12a6.47 6.47 0 001.24-.42l.4 1.5a6.51 6.51 0 01-1.38.42c-.533.12-1.12.18-1.76.18-.68 0-1.327-.093-1.94-.28a4.449 4.449 0 01-1.62-.88 4.253 4.253 0 01-1.08-1.52c-.267-.613-.4-1.347-.4-2.2 0-.733.107-1.4.32-2a4.56 4.56 0 01.94-1.56c.413-.44.907-.773 1.48-1a5.077 5.077 0 011.94-.36c.613 0 1.167.1 1.66.3.507.2.933.487 1.28.86.36.36.633.807.82 1.34.2.52.3 1.1.3 1.74v1zm-2.12-1.44c0-.32-.04-.62-.12-.9-.08-.28-.2-.52-.36-.72a1.605 1.605 0 00-.64-.5c-.253-.133-.56-.2-.92-.2-.667 0-1.213.213-1.64.64-.413.427-.667 1-.76 1.72l4.44-.04z" fill="#2D3748"/>
<path d="M14 12a4 4 0 00-8 0 8 8 0 1016 0 11.97 11.97 0 00-4-8.944" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 12a4 4 0 008 0 8 8 0 10-16 0c0 3.584 1.571 6.801 4.063 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 2.8 KiB

View File

@@ -1,9 +0,0 @@
<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="78" height="32" rx="5" fill="#fff"/>
<path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="39" cy="16" r="2" fill="#DDD"/>
<path d="M59 5 49 8.6l1.5 13.2 8.5 4.7 8.5-4.7L69 8.6 59 5Z" fill="#DD0031"/>
<path d="M59 5v21.5l8.5-4.7L69 8.6 59 5Z" fill="#C3002F"/>
<path d="m59 7.4-6.3 14h2.4l1.2-3.1h5.3l1.3 3h2.3L59 7.4Zm1.8 9h-3.6l1.8-4.5 1.8 4.4Z" fill="#fff"/>
</svg>

Before

Width:  |  Height:  |  Size: 719 B

Some files were not shown because too many files have changed in this diff Show More