Compare commits

...

71 Commits

Author SHA1 Message Date
Kemie
fc78d27cc3 Add food related icons: beef, dessert, fish, salad, sandwich, soup & takeout (#869) 2023-01-26 09:38:13 +01:00
Eric Fennis
9b0d0edb61 update package.json lucide-react-native 2023-01-18 22:54:18 +01:00
Eric Fennis
6a5f8d3755 Fix aliases lucide-react-native (#919)
* Fix aliases lucide-react-native

* remove replace import

* Revert version change
2023-01-18 22:49:53 +01:00
Lucide Bot
35c96ab61f 📦 Bump lucide package versions to 0.105.0 2023-01-17 07:10:46 +00:00
Eric Fennis
8fd8007c96 Add support for aliases (#899)
* extract workflow

* Add aliases build

* Setup types building for aliases

* Add types generation for aliases

* Finish React Aliases

* Finish aliases for lucide-react

* setup aliases preact

* Fix aliases in preact

* Add aliases preact

* Add aliases lucide-react-native

* Fix solid js build

* update lock file

* Improve solid for solid start

* update import

* update import

* lucide solid fix types generation

* Fix lucide sold

* Fix svelte aliases

* update lockfile

* Fix imports

* Fix solid js issues

* Add aliases to the vue packages

* Fix lucide react native

* Test alpha versions lucide-vue, lucide-vue-next, lucide-svelte
2023-01-17 08:04:34 +01:00
Sean van Zuidam
621cf6b290 Add Eleventy package to docs (#905)
* ADD: 11ty icon

* ADD: eleventy-lucide-icons to 3th party packages

* ADD: eleventy-lucide-icons to readme
2023-01-10 21:05:27 +01:00
Eric Fennis
a5ce1df506 Fix site build 2022-12-21 14:30:36 +01:00
Eric Fennis
c784dd09c7 Remove exports lucide-react 2022-12-05 14:26:07 +01:00
Markus Napp
0f11acdd7f Language improvements for introduction text (#895)
* Language improvements for introduction text

* Updated number of icons
2022-12-04 22:49:57 +01:00
Lucide Bot
2149645895 📦 Bump lucide package versions to 0.104.0 2022-12-04 21:45:15 +00:00
Eric Fennis
fa6ed02297 Implement: Typescript, Esbuild and vitest (#877)
* init modernization

* implement esbuild

* Make first build work

* Fix esbuild for lucide-react

* Add vitest for lucide-react

* add esbuild lucide and lucide-react

* update package lock

* implement preact

* Add typescript and vitest

* adjust workflows

* Fix mocking react-native package

* update lock file

* Add esbuild in svelte

* make svelte test work in vitest

* Refactor lucide svelte

* Transform lucide vue to typescript

* Finish lucide-vue-next typescript

* 0.104.0-beta.0

* remove version in main package.json

* cleanup

* Fix svelte tests snapshots

* clean up

* add rollup lucide-vue-next

* Fix lucide svelte package

* change to workspace link

* revert filter position

* revert preact workflow change

* cleanup

* Fix some types

* add semi
2022-12-04 22:38:56 +01:00
Lucide Bot
4a2c6ed8b0 📦 Bump lucide package versions to 0.103.0 2022-11-30 10:29:46 +00:00
Karsa
f67dfab128 Merge remote-tracking branch 'remotes/upstream/main' into categories 2022-11-30 11:23:55 +01:00
Karsa
c3b9cff578 fixed eslint warnings 2022-11-30 10:25:59 +01:00
Lucide Bot
9ba4f8c359 📦 Bump lucide package versions to 0.102.0 2022-11-21 07:58:29 +00:00
it-is-not
dd5a5b16f6 Add subtitles icon (#890)
* Add more music icons and another mic icon (#746)

* Revert "Add more music icons and another mic icon (#746)" (#750)

This reverts commit 57cba6ae0e.

* add subtitles icon

Co-authored-by: Karsa <contact@karsa.org>
2022-11-21 08:52:17 +01:00
Vlad-Mihai Dumitrache
a1f9a95322 add nuxt.js to files array (#889) 2022-11-21 08:51:40 +01:00
Karsa
7572d2d6c8 Attempts to fix github workflow issues stemming from JSON files within the icons directory 2022-11-16 18:29:47 +01:00
Karsa
58370d63dc Added filtering on SVG extension to outline-svg 2022-11-16 18:21:00 +01:00
Karsa
6552a4cca1 Moved from a single icons.json file to separate JSON files per icon 2022-11-16 18:16:50 +01:00
Karsa
dace5a9f9c Merge remote-tracking branch 'upstream/main' into categories 2022-11-16 18:03:06 +01:00
Karsa
90f32d38a2 Fixes merge conflicts 2022-11-16 18:02:04 +01:00
Lucide Bot
619b7040da 📦 Bump lucide package versions to 0.101.0 2022-11-15 09:39:53 +00:00
Eric Fennis
b75aee4df3 Add Pilcrow Icon (paragraph) (#884)
* add pilcrow icon
* add tags
2022-11-15 10:34:25 +01:00
Ekow Baah-Nyarkoh
0c93e7bcb4 update documentation with correct import for all icons (#875) 2022-11-13 21:59:29 +01:00
Lucide Bot
538dad2d30 📦 Bump lucide package versions to 0.100.0 2022-11-10 21:58:48 +00:00
Karsa
797fa5c431 Update baby.svg (#881) 2022-11-10 22:52:27 +01:00
Wojciech Maj
8ccbb8f2e3 Update lucide-react on marketing site (#848) 2022-11-08 15:43:41 +01:00
Badraxas
b77ce99363 Adds devices icon (#871)
* Adding devices icon

* Update icons/devices.svg

* rename devices into monitor-smartphone

Co-authored-by: Karsa <contact@karsa.org>
2022-11-08 15:33:45 +01:00
Sean van Zuidam
c7f73611ca Add Magento 2 Hyva package to docs (#857)
* ADD: Hyva to 3de party section

* ADD: Hyva to readme

* IMP: description
2022-11-08 08:08:26 +01:00
Eric Fennis
2a1178b8a3 Introduce Docker Image for font building (#870)
* Add dockerfile

* Make the dockerfile work

* try docker container for font building

* remove workflow dep

* add docker compose file

* test docker image

* update build font flow

* update to v3

* cleanup

* add filter options for installs

* test

* revert filter on install

* optimize font building

* Rename workflow

* test and compare workflows

* test workflow

* test

* try with filter

* test old script github actions

* Fix old script

* this works?

* test script

* finialize font script

* remove workspace packages

* add pnpm-lock.yaml in workflows
2022-11-08 08:07:32 +01:00
Louis Bailleau
55ae908018 Update all packages dependencies in project root (#863)
* Update `svgo` and `svgson` version and fix some tests

* Update eslint-related packages and fix all linter errors

* Update all rollup-related packages version

* Update all rollup-related packages (part 2)

* Update the rest of package which need to be updated

* Fix unwanted comment

* Fix unwanted comment (again)
2022-11-07 22:29:19 +01:00
Karsa
04ada85c0f Updated categories with new icons + upgraded scripts to use pnpm and mjs scripts 2022-11-07 11:34:40 +01:00
Karsa
17ccaeea75 Merge branch 'master' into categories 2022-11-07 10:39:01 +01:00
Ekow Baah-Nyarkoh
1cdcfd6403 Publish angular dist folder instead of project folder (#872)
* publish angular dist folder instead of project folder

* publish angular dist folder instead of project folder
2022-11-03 09:17:54 +01:00
Lucide Bot
810cd84876 📦 Bump lucide package versions to 0.98.0 2022-11-02 20:09:33 +00:00
Karsa
ca471899c1 Added dumbbell icon (#862)
Co-authored-by: Karsa <karsa@karsa.org>
2022-11-02 21:03:06 +01:00
Eric Fennis
b40edf1f3c Improve Loading in figma plugin (#866)
* Add skeleton

* improve icon loading
2022-11-02 21:01:34 +01:00
Ekow Baah-Nyarkoh
32c339cabd downgrade puppeteer to make angular build work (#867) 2022-11-02 21:01:10 +01:00
Karsa
3529cd3f4d Adds various food and food intolerance icons (#861)
* Food intolerance + allergy icons

* Fixes bean outline

* Update dna.svg

* Update bean.svg

Co-authored-by: Karsa <karsa@karsa.org>
2022-11-02 16:09:23 +01:00
locness3
a4d568f26e Improve "Why choose Lucide over Feather" section in README.md (#868)
Authored by: @locness3
- Updated the obsolete number of added icons (congratulations to everyone btw, this is impressive).
- Added mention official packages.
- Expanded on "Active community".
2022-11-02 16:01:54 +01:00
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
Karsa
692faadd91 Merged and updated categories from main. 2022-06-16 13:11:42 +02:00
Karsa
89a8274246 Merge branch 'master' into categories 2022-06-16 13:03:05 +02:00
Karsa
26987c6eda Added categories to icons merged from master. 2022-06-14 17:35:07 +02:00
Karsa
bf8db289a3 Merge branch 'master' into categories 2022-06-14 17:21:52 +02:00
Karsa
50f0eaec4b Added social to hash 2022-06-02 18:39:45 +02:00
Karsa
dbe35c4f69 Add social category to hash 2022-06-02 14:49:14 +02:00
Karsa
c3056b9ce6 Added a base category system. 2022-06-02 14:17:17 +02:00
Karsa
b016ea08f8 Merge branch 'master' into categories 2022-06-02 10:18:48 +02:00
Karsa
8e041c3c17 [categories] Added photography to icons 2022-06-02 10:18:08 +02:00
Karsa
e3d2525994 Added some icon categories 2022-06-02 08:45:58 +02:00
Karsa
e846b725f6 manual merge fix 2022-05-30 18:40:58 +02:00
Karsa
b924c0a70b Added git pre commit hook for checking the contents of icons.json 2022-05-30 18:40:10 +02:00
Karsa
0d6e89332e Added git pre commit hook for checking the contents of icons.json 2022-05-30 18:38:47 +02:00
Karsa
6ecf908ded Added migration from tags to icons and vice versa 2022-05-30 17:52:11 +02:00
Karsa
f623ac6362 Merge branch 'master' into categories 2022-05-27 15:34:48 +02:00
Karsa
e3644e1419 Initial draft of new icons.json format. 2022-05-26 19:45:36 +02:00
Karsa
84e09058b2 Merge branch 'master' of https://github.com/lucide-icons/lucide 2022-05-23 13:26:12 +02:00
Karsa
3e4bde1d39 Merge branch 'master' of https://github.com/lucide-icons/lucide 2022-05-16 10:49:24 +02:00
Karsa
164854c636 Merge branch 'master' of github.com:lucide-icons/lucide 2022-05-03 16:51:21 +02:00
Karsa
2d1214fc37 Merge branch 'master' of https://github.com/lucide-icons/lucide 2022-04-25 12:52:35 +02:00
Karsa
d528fb728a Updated icon to comply with design guidelines and more closely match accessibleicon.org 2022-04-22 17:06:25 +02:00
Karsa
53d7b772ef added newline to end of file 2022-04-11 14:09:35 +02:00
Karsa
c73fbb6159 Added accessibility icon as per https://github.com/feathericons/feather/issues/633 2022-04-11 14:08:10 +02:00
1210 changed files with 66044 additions and 6406 deletions

View File

@@ -3,3 +3,4 @@ build
coverage
lib
tests
node_modules

View File

@@ -1,7 +1,7 @@
module.exports = {
env: {
browser: true,
node: true
node: true,
},
extends: ['airbnb-base', 'prettier'],
plugins: ['import', 'prettier'],
@@ -14,12 +14,27 @@ module.exports = {
'error',
{
singleQuote: true,
trailingComma: 'all'
}
]
trailingComma: 'all',
},
],
'import/no-extraneous-dependencies': [
'error',
{ devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
],
'import/extensions': [
'error',
{
pattern: {
mjs: 'always',
json: 'always',
},
},
],
},
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
ecmaVersion: 'latest',
sourceType: 'module',
},
};

4
.githooks/pre-commit Executable file
View File

@@ -0,0 +1,4 @@
#!/bin/sh
pnpm run checkIcons
exit $?

44
.github/actions/build-and-test.yml vendored Normal file
View File

@@ -0,0 +1,44 @@
name: "Build and Test"
description: "Builds and test a package"
inputs:
name:
description: “Name of the package”
required: true
runs:
using: "composite"
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 }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-lucide-preact-pnpm-store-
- name: Install dependencies
run: pnpm install --filter lucide-preact
- name: Build
run: pnpm --filter lucide-preact build
- name: Test
run: pnpm --filter lucide-preact test

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

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-angular/**
push:
paths:
- packages/lucide-angular/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-angular test

55
.github/workflows/lucide-font.yml vendored Normal file
View File

@@ -0,0 +1,55 @@
name: Lucide font checks
on:
pull_request:
paths:
- icons/**
- pnpm-lock.yaml
jobs:
lucide-font:
runs-on: ubuntu-latest
container: ericfennis/lucide-font:latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
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 }}-lucide-font-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-lucide-font-pnpm-store-
- name: Install dependencies
run: pnpm install --filter outline-svg
- name: Outline svg Icons
run: pnpm build:outline-icons
- name: Create directory
run: mkdir lucide-font
- name: Build font
run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
- name: "Upload to Artifacts"
uses: actions/upload-artifact@v1
with:
name: lucide-font
path: lucide-font

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-preact/**
push:
paths:
- packages/lucide-preact/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-preact test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-react-native/**
push:
paths:
- packages/lucide-react-native/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react-native test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-react/**
push:
paths:
- packages/lucide-react/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-react test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-solid/**
push:
paths:
- packages/lucide-solid/**
- pnpm-lock.yaml
jobs:
lucide-solid:
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-solid test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-static/**
push:
paths:
- packages/lucide-static/**
- pnpm-lock.yaml
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 +40,3 @@ jobs:
- name: Build
run: pnpm --filter lucide-static build

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-svelte/**
push:
paths:
- packages/lucide-svelte/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-svelte test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-vue-next/**
push:
paths:
- packages/lucide-vue-next/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-vue-next test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide-vue/**
push:
paths:
- packages/lucide-vue/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide-vue test

View File

@@ -4,16 +4,14 @@ on:
pull_request:
paths:
- packages/lucide/**
push:
paths:
- packages/lucide/**
- pnpm-lock.yaml
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 +43,3 @@ jobs:
- name: Test
run: pnpm --filter lucide test

View File

@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -348,7 +348,7 @@ jobs:
run: pnpm --filter lucide-angular test
- name: Publish
run: pnpm --filter lucide-angular publish dist --no-git-checks --ignore-scripts
run: pnpm --filter lucide-angular publish --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
@@ -416,9 +416,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
@@ -471,9 +471,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
@@ -526,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
@@ -581,8 +581,9 @@ jobs:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
container: ericfennis/lucide-font:latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/setup-node@v3.4.1
with:
node-version: 16
@@ -607,39 +608,19 @@ jobs:
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install FontForge
run: sudo apt-get install zlib1g-dev fontforge
- name: Clone sfnt2woff-zopfli repo
run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
- name: Install and move sfnt2woff-zopfli
run: |
cd sfnt2woff-zopfli
make
sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
- name: Clone woff2
run: git clone --recursive https://github.com/google/woff2.git
- name: Install woff2
run: |
cd woff2
sudo make clean all
sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
- name: Install Font Custom dependency
run: sudo gem install fontcustom
- name: Install dependencies
run: pnpm install
run: pnpm install --filter outline-svg
- name: Build Icon Font
run: |
mkdir lucide-font
pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
- name: Outline svg Icons
run: pnpm build:outline-icons
- name: 'Upload to Artifacts'
- name: Create directory
run: mkdir lucide-font
- name: Build font
run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
- name: "Upload to Artifacts"
uses: actions/upload-artifact@v1
with:
name: lucide-font
@@ -652,7 +633,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:
@@ -735,7 +716,7 @@ jobs:
]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- name: Commit package files

3
.gitignore vendored
View File

@@ -12,6 +12,9 @@ stash
coverage
stats
*.log
outlined
packages/**/src/icons/*.js
packages/**/src/icons/*.ts
packages/**/src/icons/*.tsx
packages/**/src/aliases.ts
packages/**/LICENSE

View File

@@ -17,9 +17,10 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
### Why choose Lucide over Feather Icons
- Lucide already expanded the icon set by 130+ in less than a year, so more icons to work with.
- More icons to work with: Lucide already has hundreds of icons more than Feather does.
- Official librairies and integrations with popular frameworks and design tools.
- Well maintained code base.
- Active community.
- Active community, regularly growing and improving the set.
## Table of Contents
@@ -37,6 +38,8 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
- [Flutter](#flutter)
- [Svelte](#svelte)
- [Solid](#solid)
- [Hyva](#hyva)
- [Eleventy](#eleventy)
- [Contributing](#contributing)
- [Community](#community)
- [License](#license)
@@ -56,9 +59,11 @@ Implementation of the lucide icon library for web applications.
```sh
npm install lucide
```
#or
or
```sh
yarn add lucide
```
@@ -70,9 +75,11 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -84,9 +91,11 @@ Implementation of the lucide icon library for React Native applications.
```sh
yarn add lucide-react-native
```
# or
or
```sh
npm install lucide-react-native
```
@@ -98,9 +107,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -112,9 +123,11 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
@@ -124,9 +137,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
```
@@ -138,9 +153,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -157,9 +174,11 @@ NPM package
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -197,9 +216,11 @@ Implementation of the lucide icon library for Svelte applications.
```sh
yarn add lucide-svelte
```
# or
or
```sh
npm install lucide-svelte
```
@@ -211,14 +232,36 @@ Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
#or
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).
### Hyva
Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.
```sh
composer require siteation/magento2-hyva-icons-lucide
```
For more details, see the [documentation](https://github.com/Siteation/magento2-hyva-icons-lucide/blob/main/README.md).
### Eleventy
Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.
```sh
npm install @grimlink/eleventy-plugin-lucide-icons
```
For more details, see the [documentation](https://github.com/GrimLink/eleventy-plugin-lucide-icons/blob/main/README.md).
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
@@ -245,4 +288,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

@@ -1,20 +0,0 @@
module.exports = {
presets: ['@babel/env'],
// babelrcRoots: ['.', './packages/*'],
env: {
test: {
presets: ['@babel/env'],
plugins: ['@babel/plugin-transform-runtime'],
},
dev: {
plugins: [
[
'transform-inline-environment-variables',
{
include: ['NODE_ENV'],
},
],
],
},
},
};

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Accessibility",
"icon": "accessibility"
}

5
categories/account.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Accounts & access",
"icon": "user"
}

5
categories/animals.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Animals",
"icon": "dog"
}

5
categories/arrows.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Arrows",
"icon": "arrow-left-right"
}

5
categories/brands.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Brands",
"icon": "facebook"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Buildings",
"icon": "building"
}

5
categories/charts.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Charts",
"icon": "pie-chart"
}

5
categories/coding.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Coding",
"icon": "code-2"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Communication",
"icon": "message-circle"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Connectivity",
"icon": "wifi"
}

5
categories/currency.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Currency",
"icon": "dollar-sign"
}

5
categories/cursors.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Cursors",
"icon": "mouse-pointer-2"
}

5
categories/design.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Design",
"icon": "palette"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Development",
"icon": "git-pull-request"
}

5
categories/devices.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Devices",
"icon": "smartphone"
}

5
categories/emoji.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Emoji",
"icon": "smile"
}

5
categories/files.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "File icons",
"icon": "layout"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Food & beverage",
"icon": "coffee"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Furniture",
"icon": "rocking-chair"
}

5
categories/gaming.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Gaming",
"icon": "gamepad-2"
}

5
categories/home.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Home",
"icon": "home"
}

5
categories/layout.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Layout",
"icon": "layout"
}

5
categories/mail.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Mail",
"icon": "mail"
}

5
categories/maps.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Maps",
"icon": "map"
}

5
categories/maths.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Maths",
"icon": "divide"
}

5
categories/medical.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Medical",
"icon": "heart"
}

5
categories/money.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Money",
"icon": "piggy-bank"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Multimedia",
"icon": "play-circle"
}

5
categories/nature.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Nature",
"icon": "sprout"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Navigation",
"icon": "compass"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Notifications",
"icon": "alert-triangle"
}

5
categories/people.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "People",
"icon": "person-standing"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Photography",
"icon": "camera"
}

5
categories/science.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Science",
"icon": "flask-conical"
}

5
categories/seasons.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Seasons",
"icon": "leaf"
}

5
categories/security.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Security",
"icon": "shield"
}

5
categories/shapes.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Shapes",
"icon": "triangle"
}

5
categories/shopping.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Shopping",
"icon": "shopping-bag"
}

5
categories/social.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Social",
"icon": "thumbs-up"
}

5
categories/sports.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Sports",
"icon": "type"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Sustainability",
"icon": "recycle"
}

5
categories/text.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Text formatting",
"icon": "type"
}

5
categories/time.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Time & calendar",
"icon": "calendar"
}

5
categories/tools.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Tools",
"icon": "hammer"
}

View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Transportation",
"icon": "train"
}

5
categories/travel.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Travel",
"icon": "backpack"
}

5
categories/weather.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "../category.schema.json",
"title": "Weather",
"icon": "cloud-sun"
}

34
category.schema.json Normal file
View File

@@ -0,0 +1,34 @@
{
"$id": "https://lucide.dev/category.schema.json",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$vocabulary": {
"https://json-schema.org/draft/2020-12/vocab/core": true,
"https://json-schema.org/draft/2020-12/vocab/applicator": true,
"https://json-schema.org/draft/2020-12/vocab/unevaluated": true,
"https://json-schema.org/draft/2020-12/vocab/validation": true,
"https://json-schema.org/draft/2020-12/vocab/meta-data": true,
"https://json-schema.org/draft/2020-12/vocab/format-annotation": true,
"https://json-schema.org/draft/2020-12/vocab/content": true
},
"title": "Lucide Icons category schema",
"type": "object",
"properties": {
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"icon": {
"$ref": "#/$defs/types/icon-reference"
},
"weight": {
"type": "integer"
}
},
"required": [
"title",
"icon"
],
"description": "A JSON Schema for categories defined by Lucide Icons."
}

View File

@@ -6,16 +6,15 @@ nextPage:
---
# Introduction
Lucide is an open source icon library for displaying icons and symbols in digital and non-digital projects. It consists of 850+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
Lucide contains icons with different variants and states. With that, designers and developers can choose the right icon for themselves. If a desired icon doesn't exist yet, you're free to open a design request. The Lucide community contributors will help to provide new icons.
Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
With more icons, we simply have more icons to work with in our projects. Also with rising of new applications with specific features, lucide has the goal to provide the complete set for your project.
With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
When designing new icons, the community is working with a set of design rules. This is to maintain some standards for the icons: recognizable, consistency in style, and readable on all sizes. The community loves creativity in new icons but recognizable design conventions are important.
When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the responsibility to keep their assets as small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you will only ship the icons you used, helps you to keep the software distribution size to a minimum.
Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).

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,9 +134,9 @@ export class AppComponent {
In `Method 2`: import all icons in `app.module.ts` by:
``` js
```js
import { icons } from 'lucide-angular/icons';
import { icons } from 'lucide-angular';
LucideAngularModule.pick(icons)

View File

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
@@ -25,13 +27,13 @@ Each icon can be imported as a preact component.
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,9 +8,11 @@ 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
```

View File

@@ -4,11 +4,13 @@ Implementation of the lucide icon library for react applications
## Installation
``` bash
```bash
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
@@ -21,13 +23,13 @@ Each icon can be imported as a react component.
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

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for Vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
@@ -23,40 +25,36 @@ Each icon can be imported as a vue component.
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>
@@ -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
}
});
```

33
icon.schema.json Normal file
View File

@@ -0,0 +1,33 @@
{
"$id": "https://lucide.dev/icons.schema.json",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$vocabulary": {
"https://json-schema.org/draft/2020-12/vocab/core": true,
"https://json-schema.org/draft/2020-12/vocab/applicator": true,
"https://json-schema.org/draft/2020-12/vocab/unevaluated": true,
"https://json-schema.org/draft/2020-12/vocab/validation": true,
"https://json-schema.org/draft/2020-12/vocab/meta-data": true,
"https://json-schema.org/draft/2020-12/vocab/format-annotation": true,
"https://json-schema.org/draft/2020-12/vocab/content": true
},
"title": "Lucide Icons icon schema",
"type": "object",
"properties": {
"tags": {
"type": "array",
"items": {
"type": "string"
},
"minItems": 1,
"uniqueItems": true
},
"categories": {
"type": "array",
"items": {
"type": "string"
},
"uniqueItems": true
}
},
"description": "A JSON Schema for icons defined by Lucide Icons."
}

9682
icons.json Normal file

File diff suppressed because it is too large Load Diff

84
icons.schema.json Normal file
View File

@@ -0,0 +1,84 @@
{
"$id": "https://lucide.dev/icons.schema.json",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$vocabulary": {
"https://json-schema.org/draft/2020-12/vocab/core": true,
"https://json-schema.org/draft/2020-12/vocab/applicator": true,
"https://json-schema.org/draft/2020-12/vocab/unevaluated": true,
"https://json-schema.org/draft/2020-12/vocab/validation": true,
"https://json-schema.org/draft/2020-12/vocab/meta-data": true,
"https://json-schema.org/draft/2020-12/vocab/format-annotation": true,
"https://json-schema.org/draft/2020-12/vocab/content": true
},
"title": "Lucide Icons schema",
"type": "object",
"properties": {
"icons": {
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/types/icon"
}
},
"categories": {
"type": "object",
"additionalProperties": {
"$ref": "#/$defs/types/category"
}
}
},
"$defs": {
"types": {
"icon": {
"type": "object",
"properties": {
"tags": {
"type": "array",
"items": {
"type": "string"
},
"minItems": 1,
"uniqueItems": true
},
"categories": {
"type": "array",
"items": {
"$ref": "#/$defs/types/category-reference"
},
"uniqueItems": true
}
}
},
"category": {
"type": "object",
"properties": {
"title": {
"type": "string"
},
"description": {
"type": "string"
},
"icon": {
"$ref": "#/$defs/types/icon-reference"
},
"weight": {
"type": "integer"
}
},
"required": [
"title",
"icon"
]
},
"icon-reference": {
"type": "string",
"format": "uri-reference"
},
"category-reference": {
"type": "string",
"format": "uri-reference"
}
}
},
"description": "A JSON Schema for icons, tags & categories defined by Lucide Icons."
}

13
icons/accessibility.json Normal file
View File

@@ -0,0 +1,13 @@
{
"$schema": "../icon.schema.json",
"tags": [
"disability",
"disabled",
"dda",
"wheelchair"
],
"categories": [
"accessibility",
"medical"
]
}

14
icons/activity.json Normal file
View File

@@ -0,0 +1,14 @@
{
"$schema": "../icon.schema.json",
"tags": [
"pulse",
"health",
"action",
"motion"
],
"categories": [
"medical",
"account",
"social"
]
}

13
icons/air-vent.json Normal file
View File

@@ -0,0 +1,13 @@
{
"$schema": "../icon.schema.json",
"tags": [
"air conditioner",
"ac",
"central air",
"cooling",
"climate-control"
],
"categories": [
"home"
]
}

14
icons/airplay.json Normal file
View File

@@ -0,0 +1,14 @@
{
"$schema": "../icon.schema.json",
"tags": [
"stream",
"cast",
"mirroring"
],
"categories": [
"multimedia",
"connectivity",
"devices",
"brands"
]
}

11
icons/alarm-check.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"done"
],
"categories": [
"devices",
"notifications",
"time"
]
}

View File

@@ -0,0 +1,12 @@
{
"$schema": "../icon.schema.json",
"tags": [
"morning",
"turn-off"
],
"categories": [
"devices",
"notifications",
"time"
]
}

11
icons/alarm-clock.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"morning"
],
"categories": [
"devices",
"notifications",
"time"
]
}

11
icons/alarm-minus.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"remove"
],
"categories": [
"devices",
"notifications",
"time"
]
}

11
icons/alarm-plus.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"add"
],
"categories": [
"devices",
"notifications",
"time"
]
}

11
icons/album.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"photo",
"book"
],
"categories": [
"photography",
"multimedia"
]
}

12
icons/alert-circle.json Normal file
View File

@@ -0,0 +1,12 @@
{
"$schema": "../icon.schema.json",
"tags": [
"warning",
"alert",
"danger"
],
"categories": [
"notifications",
"shapes"
]
}

12
icons/alert-octagon.json Normal file
View File

@@ -0,0 +1,12 @@
{
"$schema": "../icon.schema.json",
"tags": [
"warning",
"alert",
"danger"
],
"categories": [
"notifications",
"shapes"
]
}

12
icons/alert-triangle.json Normal file
View File

@@ -0,0 +1,12 @@
{
"$schema": "../icon.schema.json",
"tags": [
"warning",
"alert",
"danger"
],
"categories": [
"notifications",
"shapes"
]
}

View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"items",
"flex",
"justify"
],
"categories": [
"layout"
]
}

View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"items",
"flex",
"justify"
],
"categories": [
"layout"
]
}

11
icons/align-center.json Normal file
View File

@@ -0,0 +1,11 @@
{
"$schema": "../icon.schema.json",
"tags": [
"text",
"alignment",
"center"
],
"categories": [
"text"
]
}

View File

@@ -0,0 +1,12 @@
{
"$schema": "../icon.schema.json",
"tags": [
"items",
"bottom",
"flex",
"justify"
],
"categories": [
"layout"
]
}

View File

@@ -0,0 +1,12 @@
{
"$schema": "../icon.schema.json",
"tags": [
"items",
"right",
"flex",
"justify"
],
"categories": [
"layout"
]
}

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