mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-11 13:28:19 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
852da97d46 | ||
|
|
ba86ca5ef0 | ||
|
|
f2e325264f | ||
|
|
de366a1cb0 | ||
|
|
5f5cec5b58 | ||
|
|
2ccd5b7422 | ||
|
|
e38137822d | ||
|
|
a9fef9f6b0 | ||
|
|
f646d84559 | ||
|
|
6f6ffa2478 | ||
|
|
76326cb289 | ||
|
|
13a3f565b6 | ||
|
|
b0f2e084d8 | ||
|
|
fc78d27cc3 | ||
|
|
9b0d0edb61 | ||
|
|
6a5f8d3755 | ||
|
|
35c96ab61f | ||
|
|
8fd8007c96 | ||
|
|
621cf6b290 | ||
|
|
a5ce1df506 | ||
|
|
c784dd09c7 | ||
|
|
0f11acdd7f | ||
|
|
2149645895 | ||
|
|
fa6ed02297 | ||
|
|
4a2c6ed8b0 | ||
|
|
f67dfab128 | ||
|
|
c3b9cff578 | ||
|
|
9ba4f8c359 | ||
|
|
dd5a5b16f6 | ||
|
|
a1f9a95322 | ||
|
|
7572d2d6c8 | ||
|
|
58370d63dc | ||
|
|
6552a4cca1 | ||
|
|
dace5a9f9c | ||
|
|
90f32d38a2 | ||
|
|
619b7040da | ||
|
|
b75aee4df3 | ||
|
|
0c93e7bcb4 | ||
|
|
538dad2d30 | ||
|
|
797fa5c431 | ||
|
|
8ccbb8f2e3 | ||
|
|
b77ce99363 | ||
|
|
c7f73611ca | ||
|
|
2a1178b8a3 | ||
|
|
55ae908018 | ||
|
|
04ada85c0f | ||
|
|
17ccaeea75 | ||
|
|
1cdcfd6403 | ||
|
|
810cd84876 | ||
|
|
ca471899c1 | ||
|
|
b40edf1f3c | ||
|
|
32c339cabd | ||
|
|
3529cd3f4d | ||
|
|
a4d568f26e | ||
|
|
9e524fd557 | ||
|
|
b5c71c4fc3 | ||
|
|
aa8861a2cd | ||
|
|
a41918a81e | ||
|
|
33be2c2430 | ||
|
|
eb706417e6 | ||
|
|
01e11a61f8 | ||
|
|
b323bbd28e | ||
|
|
514e88bbf9 | ||
|
|
de6ed26152 | ||
|
|
b8cc9ea3c8 | ||
|
|
cc2ac8bfcd | ||
|
|
0e340a2679 | ||
|
|
c15e3914a6 | ||
|
|
ff81fbfd9a | ||
|
|
5317abb867 | ||
|
|
ac80b9e58f | ||
|
|
a25f139953 | ||
|
|
b457c8dea1 | ||
|
|
2e24567f8e | ||
|
|
9b90bc4d51 | ||
|
|
6fd0380e19 | ||
|
|
692faadd91 | ||
|
|
89a8274246 | ||
|
|
26987c6eda | ||
|
|
bf8db289a3 | ||
|
|
50f0eaec4b | ||
|
|
dbe35c4f69 | ||
|
|
c3056b9ce6 | ||
|
|
b016ea08f8 | ||
|
|
8e041c3c17 | ||
|
|
e3d2525994 | ||
|
|
e846b725f6 | ||
|
|
b924c0a70b | ||
|
|
0d6e89332e | ||
|
|
6ecf908ded | ||
|
|
f623ac6362 | ||
|
|
e3644e1419 | ||
|
|
84e09058b2 | ||
|
|
3e4bde1d39 | ||
|
|
164854c636 | ||
|
|
2d1214fc37 | ||
|
|
d528fb728a | ||
|
|
53d7b772ef | ||
|
|
c73fbb6159 |
@@ -3,3 +3,4 @@ build
|
||||
coverage
|
||||
lib
|
||||
tests
|
||||
node_modules
|
||||
|
||||
+19
-4
@@ -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',
|
||||
},
|
||||
};
|
||||
|
||||
Executable
+4
@@ -0,0 +1,4 @@
|
||||
#!/bin/sh
|
||||
|
||||
pnpm run checkIcons
|
||||
exit $?
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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,37 +608,17 @@ 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: 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
|
||||
@@ -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,13 +716,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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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'],
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
+1556
-17
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Accessibility",
|
||||
"icon": "accessibility"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Accounts & access",
|
||||
"icon": "user"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Animals",
|
||||
"icon": "dog"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Arrows",
|
||||
"icon": "arrow-left-right"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Brands",
|
||||
"icon": "facebook"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Buildings",
|
||||
"icon": "building"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Charts",
|
||||
"icon": "pie-chart"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Coding",
|
||||
"icon": "code-2"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Communication",
|
||||
"icon": "message-circle"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Connectivity",
|
||||
"icon": "wifi"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Currency",
|
||||
"icon": "dollar-sign"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Cursors",
|
||||
"icon": "mouse-pointer-2"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Design",
|
||||
"icon": "palette"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Development",
|
||||
"icon": "git-pull-request"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Devices",
|
||||
"icon": "smartphone"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Emoji",
|
||||
"icon": "smile"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "File icons",
|
||||
"icon": "layout"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Food & beverage",
|
||||
"icon": "coffee"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Furniture",
|
||||
"icon": "rocking-chair"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Gaming",
|
||||
"icon": "gamepad-2"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Home",
|
||||
"icon": "home"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Layout",
|
||||
"icon": "layout"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Mail",
|
||||
"icon": "mail"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Maps",
|
||||
"icon": "map"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Maths",
|
||||
"icon": "divide"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Medical",
|
||||
"icon": "heart"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Money",
|
||||
"icon": "piggy-bank"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Multimedia",
|
||||
"icon": "play-circle"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Nature",
|
||||
"icon": "sprout"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Navigation",
|
||||
"icon": "compass"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Notifications",
|
||||
"icon": "alert-triangle"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "People",
|
||||
"icon": "person-standing"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Photography",
|
||||
"icon": "camera"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Science",
|
||||
"icon": "flask-conical"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Seasons",
|
||||
"icon": "leaf"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Security",
|
||||
"icon": "shield"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Shapes",
|
||||
"icon": "triangle"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Shopping",
|
||||
"icon": "shopping-bag"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Social",
|
||||
"icon": "thumbs-up"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Sports",
|
||||
"icon": "type"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Sustainability",
|
||||
"icon": "recycle"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Text formatting",
|
||||
"icon": "type"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Time & calendar",
|
||||
"icon": "calendar"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Tools",
|
||||
"icon": "hammer"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Transportation",
|
||||
"icon": "train"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Travel",
|
||||
"icon": "backpack"
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"$schema": "../category.schema.json",
|
||||
"title": "Weather",
|
||||
"icon": "cloud-sun"
|
||||
}
|
||||
@@ -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."
|
||||
}
|
||||
+5
-6
@@ -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).
|
||||
|
||||
|
||||
+22
-8
@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
|
||||
|
||||
```bash
|
||||
npm install lucide
|
||||
```
|
||||
|
||||
#or
|
||||
or
|
||||
|
||||
```sh
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-vue
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue
|
||||
```
|
||||
|
||||
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-vue-next
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-vue-next
|
||||
```
|
||||
|
||||
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
|
||||
|
||||
```bash
|
||||
yarn add lucide-angular
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-preact
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
@@ -106,7 +120,7 @@ The lucide figma plugin.
|
||||
|
||||
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
|
||||
|
||||

|
||||

|
||||
|
||||
## Laravel
|
||||
|
||||
|
||||
@@ -4,11 +4,13 @@ Implementation of the lucide icon library for angular applications.
|
||||
|
||||
## Installation
|
||||
|
||||
``` sh
|
||||
```sh
|
||||
yarn add lucide-angular
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
@@ -20,12 +22,12 @@ There are three ways for use this library.
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- app.component.html -->
|
||||
<div id="lucide-icon"></div>
|
||||
```
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.component.ts
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const div = document.getElementById('lucide-icon');
|
||||
@@ -51,11 +52,11 @@ export class AppComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
### Method 2: User __Tag__ with __name__ property
|
||||
### Method 2: User **Tag** with **name** property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@@ -65,32 +66,29 @@ import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
|
||||
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
|
||||
<lucide-icon name="edit" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
### Method 3: User __Tag__ with __img__ property
|
||||
### Method 3: User **Tag** with **img** property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.module.ts
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
@@ -100,28 +98,21 @@ import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
AppRoutingModule,
|
||||
LucideAngularModule.pick({ })
|
||||
],
|
||||
declarations: [AppComponent],
|
||||
imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
|
||||
export class AppModule { }
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
``` xml
|
||||
```xml
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
|
||||
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
``` js
|
||||
```js
|
||||
// app.component.ts
|
||||
import { Component } from '@angular/core';
|
||||
import { Airplay, Circle } from 'lucide-angular';
|
||||
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent {
|
||||
ico1 = Airplay;
|
||||
ico2 = Circle;
|
||||
@@ -144,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)
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -19,23 +19,25 @@ This package is suitable for very specific use cases for example if you want to
|
||||
|
||||
```sh
|
||||
yarn add lucide-static
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-static
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
|
||||
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
|
||||
|
||||
<!-- Icon Font -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "LucideIcons";
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
|
||||
font-family: 'LucideIcons';
|
||||
src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
|
||||
|
||||
To use it in for example html:
|
||||
|
||||
``` html
|
||||
```html
|
||||
<!-- Svg File -->
|
||||
<img src="~lucide-static/icons/home.svg">
|
||||
<img src="~lucide-static/icons/home.svg" />
|
||||
```
|
||||
|
||||
``` css
|
||||
```css
|
||||
.home-icon {
|
||||
background-image: url(~lucide-static/icons/home.svg)
|
||||
background-image: url(~lucide-static/icons/home.svg);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
|
||||
To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
|
||||
|
||||
```js
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right'
|
||||
import arrowRightIcon from 'lucide-static/icons/arrow-right';
|
||||
|
||||
// return string of a svg
|
||||
```
|
||||
@@ -80,7 +82,7 @@ You may need additional loader for this.
|
||||
|
||||
```html
|
||||
<!-- Icon Sprite, not recommended for production! -->
|
||||
<img src="lucide-static/sprite.svg#home">
|
||||
<img src="lucide-static/sprite.svg#home" />
|
||||
|
||||
<!-- or -->
|
||||
<svg
|
||||
@@ -104,13 +106,13 @@ If you'd prefer, you can use CSS to hold your base SVG properties
|
||||
|
||||
```css
|
||||
.lucide-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: currentColor;
|
||||
fill: none;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -133,20 +135,19 @@ and update the svg as follows
|
||||
### Icon Font
|
||||
|
||||
```css
|
||||
@import("~lucide-static/font/Lucide.css")
|
||||
@import ('~lucide-static/font/Lucide.css');
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="icon-home"></div>
|
||||
```
|
||||
|
||||
|
||||
### Node.js
|
||||
|
||||
To use lucide icons in your Nodejs project you can import each icon as:
|
||||
|
||||
```js
|
||||
const { messageSquare } = require('lucide-static/lib')
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
```
|
||||
|
||||
> Note: Each icon name is in camelCase.
|
||||
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
|
||||
#### Example in node.js project
|
||||
|
||||
```js
|
||||
const express = require('express')
|
||||
const { messageSquare } = require('lucide-static/lib')
|
||||
const app = express()
|
||||
const port = 3000
|
||||
const express = require('express');
|
||||
const { messageSquare } = require('lucide-static/lib');
|
||||
const app = express();
|
||||
const port = 3000;
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.send(`
|
||||
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
|
||||
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
})
|
||||
`);
|
||||
});
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Example app listening at http://localhost:${port}`)
|
||||
})
|
||||
console.log(`Example app listening at http://localhost:${port}`);
|
||||
});
|
||||
```
|
||||
|
||||
@@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications.
|
||||
|
||||
```bash
|
||||
yarn add lucide-svelte
|
||||
```
|
||||
|
||||
# or
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-svelte
|
||||
```
|
||||
|
||||
@@ -22,17 +24,17 @@ Default usage:
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Skull } from 'lucide-svelte'
|
||||
import { Skull } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<Skull/>
|
||||
<Skull />
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Camera } from 'lucide-svelte'
|
||||
import { Camera } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<Camera color="#ff3e98" />
|
||||
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
|
||||
|
||||
### Available props
|
||||
|
||||
| name | type | default
|
||||
| -------------- | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth` | *Number* | 2
|
||||
| `*<SVGProps>` | *String* | -
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
| `*<SVGProps>` | _String_ | - |
|
||||
|
||||
\* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
|
||||
|
||||
@@ -53,10 +55,10 @@ import { Camera } from 'lucide-svelte'
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Phone } from 'lucide-svelte'
|
||||
import { Phone } from 'lucide-svelte';
|
||||
</script>
|
||||
|
||||
<Phone fill="#333"/>
|
||||
<Phone fill="#333" />
|
||||
```
|
||||
|
||||
This results a filled phone icon.
|
||||
@@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons.
|
||||
|
||||
#### Icon Component Example
|
||||
|
||||
``` html
|
||||
```html
|
||||
<script>
|
||||
import * as icons from "lucide-svelte";
|
||||
import * as icons from 'lucide-svelte';
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<svelte:component this={icons[name]} {...$$props}/>
|
||||
<svelte:component this="{icons[name]}" {...$$props} />
|
||||
```
|
||||
|
||||
##### Then you can use it like this
|
||||
|
||||
``` html
|
||||
```html
|
||||
<script>
|
||||
import LucideIcon from "./LucideIcon";
|
||||
import LucideIcon from './LucideIcon';
|
||||
</script>
|
||||
|
||||
<LucideIcon name="Menu" />
|
||||
|
||||
@@ -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.
|
||||
|
||||
+33
-35
@@ -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" />
|
||||
|
||||
+14
-10
@@ -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
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@@ -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
File diff suppressed because it is too large
Load Diff
@@ -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."
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"disability",
|
||||
"disabled",
|
||||
"dda",
|
||||
"wheelchair"
|
||||
],
|
||||
"categories": [
|
||||
"accessibility",
|
||||
"medical"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"pulse",
|
||||
"health",
|
||||
"action",
|
||||
"motion"
|
||||
],
|
||||
"categories": [
|
||||
"medical",
|
||||
"account",
|
||||
"social"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"air conditioner",
|
||||
"ac",
|
||||
"central air",
|
||||
"cooling",
|
||||
"climate-control"
|
||||
],
|
||||
"categories": [
|
||||
"home"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"stream",
|
||||
"cast",
|
||||
"mirroring"
|
||||
],
|
||||
"categories": [
|
||||
"multimedia",
|
||||
"connectivity",
|
||||
"devices",
|
||||
"brands"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"done"
|
||||
],
|
||||
"categories": [
|
||||
"devices",
|
||||
"notifications",
|
||||
"time"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"morning",
|
||||
"turn-off"
|
||||
],
|
||||
"categories": [
|
||||
"devices",
|
||||
"notifications",
|
||||
"time"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"morning"
|
||||
],
|
||||
"categories": [
|
||||
"devices",
|
||||
"notifications",
|
||||
"time"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"remove"
|
||||
],
|
||||
"categories": [
|
||||
"devices",
|
||||
"notifications",
|
||||
"time"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"add"
|
||||
],
|
||||
"categories": [
|
||||
"devices",
|
||||
"notifications",
|
||||
"time"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"photo",
|
||||
"book"
|
||||
],
|
||||
"categories": [
|
||||
"photography",
|
||||
"multimedia"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"warning",
|
||||
"alert",
|
||||
"danger",
|
||||
"exclamation mark"
|
||||
],
|
||||
"categories": [
|
||||
"notifications",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"warning",
|
||||
"alert",
|
||||
"danger",
|
||||
"exclamation mark"
|
||||
],
|
||||
"categories": [
|
||||
"notifications",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"warning",
|
||||
"alert",
|
||||
"danger",
|
||||
"exclamation mark"
|
||||
],
|
||||
"categories": [
|
||||
"notifications",
|
||||
"shapes"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"items",
|
||||
"flex",
|
||||
"justify"
|
||||
],
|
||||
"categories": [
|
||||
"layout"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"items",
|
||||
"flex",
|
||||
"justify"
|
||||
],
|
||||
"categories": [
|
||||
"layout"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"text",
|
||||
"alignment",
|
||||
"center"
|
||||
],
|
||||
"categories": [
|
||||
"text"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"items",
|
||||
"bottom",
|
||||
"flex",
|
||||
"justify"
|
||||
],
|
||||
"categories": [
|
||||
"layout"
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user