Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 20:57:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into categories

Browse Source
This commit is contained in:
Karsa
2022-11-07 10:39:01 +01:00
parent 692faadd91 1cdcfd6403
commit 17ccaeea75
442 changed files with 28258 additions and 34743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

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

2
.github/ISSUE_TEMPLATE/bug_report.md vendored
View File

@@ -11,7 +11,7 @@ Before reporting an issue, please search to see if someone has filed a similar i
## Prerequisites
* Version:
* Are you running from source/master:
* Are you running from source/main:
* Are you using a released build:
* Operating system:
* Bits:

2
.github/PULL_REQUEST_TEMPLATE/new-icon.md vendored
View File

@@ -5,7 +5,7 @@ labels: "🎨 <icon"
---
<!-- Thanks for submitting an icon! Please make sure you read the icon design guide
at https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md beforehand,
at https://github.com/lucide-icons/lucide/blob/main/docs/ICON_DESIGN_GUIDE.md beforehand,
and please fill everything below. -->
- **Name of the icon** : <!-- `icon` -->

36
.github/workflows/ci.yml vendored
View File

@@ -14,15 +14,33 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Fetch tags
run: git fetch --all --tags
@@ -32,7 +50,7 @@ jobs:
run: echo "::set-output name=LATEST_TAG::$(git describe --tags `git rev-list --tags --max-count=1`)"
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Check if we can patch
run: .github/workflows/version-up.sh --minor
@@ -44,7 +62,7 @@ jobs:
- name: Create change log
id: change-log
run: |
CHANGE_LOG=$(yarn --silent run generate:changelog --old-tag=${{ steps.latest-tag.outputs.LATEST_TAG }})
CHANGE_LOG=$(pnpm run generate:changelog --old-tag=${{ steps.latest-tag.outputs.LATEST_TAG }})
CHANGE_LOG="${CHANGE_LOG//'%'/'%25'}"
CHANGE_LOG="${CHANGE_LOG//$'\n'/'%0A'}"
CHANGE_LOG="${CHANGE_LOG//$'\r'/'%0D'}"

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

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

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

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

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

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

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

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

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

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

44
.github/workflows/lucide-static.yml vendored Normal file
View File

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

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

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

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

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

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

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

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

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

458
.github/workflows/release.yml vendored
View File

@@ -3,7 +3,7 @@ name: Release Packages
on:
push:
tags:
- "v*"
- 'v*'
workflow_dispatch:
inputs:
@@ -13,7 +13,7 @@ on:
jobs:
pre-build:
if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey"]', github.actor)
if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey", "karsa-mistmere"]', github.actor)
runs-on: ubuntu-latest
outputs:
VERSION: ${{ steps.get_version.outputs.VERSION }}
@@ -32,31 +32,48 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set new version
run: yarn workspace lucide version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide build
run: pnpm --filter lucide build
- name: Test
run: yarn workspace lucide test
run: pnpm --filter lucide test
- name: Publish
run: yarn workspace lucide publish
run: pnpm --filter lucide publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -69,32 +86,49 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: yarn workspace lucide-react version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-react version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-react build
run: pnpm --filter lucide-react build
- name: Test
run: yarn workspace lucide-react test
run: pnpm --filter lucide-react test
- name: Publish
run: yarn workspace lucide-react publish
run: pnpm --filter lucide-react publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -102,37 +136,109 @@ jobs:
name: lucide-react-package-json
path: packages/lucide-react/package.json
lucide-react-native:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: pnpm --filter lucide-react-native version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: pnpm --filter lucide-react-native build
- name: Test
run: pnpm --filter lucide-react-native test
- name: Publish
run: pnpm --filter lucide-react-native publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-react-native-package-json
path: packages/lucide-react-native/package.json
lucide-vue:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set new version
run: yarn workspace lucide-vue version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-vue version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-vue build
run: pnpm --filter lucide-vue build
- name: Test
run: yarn workspace lucide-vue test
run: pnpm --filter lucide-vue test
- name: Publish
run: yarn workspace lucide-vue publish
run: pnpm --filter lucide-vue publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -145,32 +251,49 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set new version
run: yarn workspace lucide-vue-next version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-vue-next version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-vue-next build
run: pnpm --filter lucide-vue-next build
- name: Test
run: yarn workspace lucide-vue-next test
run: pnpm --filter lucide-vue-next test
- name: Publish
run: yarn workspace lucide-vue-next publish
run: pnpm --filter lucide-vue-next publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -183,32 +306,49 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: yarn workspace lucide-angular version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-angular version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-angular build
run: pnpm --filter lucide-angular build
- name: Test
run: yarn workspace lucide-angular test:headless
run: pnpm --filter lucide-angular test
- name: Publish
run: yarn workspace lucide-angular publish dist
run: pnpm --filter lucide-angular publish --no-git-checks --ignore-scripts
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -221,32 +361,49 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: yarn workspace lucide-preact version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-preact version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-preact build
run: pnpm --filter lucide-preact build
- name: Test
run: yarn workspace lucide-preact test
run: pnpm --filter lucide-preact test
- name: Publish
run: yarn workspace lucide-preact publish
run: pnpm --filter lucide-preact publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -254,37 +411,109 @@ jobs:
name: lucide-preact-package-json
path: packages/lucide-preact/package.json
lucide-svelte:
lucide-solid:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: yarn workspace lucide-svelte version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-solid version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-svelte build
run: pnpm --filter lucide-solid build
- name: Test
run: yarn workspace lucide-svelte test
run: pnpm --filter lucide-solid test
- name: Publish
run: yarn workspace lucide-svelte publish
run: pnpm --filter lucide-solid publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-solid-package-json
path: packages/lucide-solid/package.json
lucide-svelte:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set package.json version lucide
run: pnpm --filter lucide-svelte version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: pnpm --filter lucide-svelte build
- name: Test
run: pnpm --filter lucide-svelte test
- name: Publish
run: pnpm --filter lucide-svelte publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -297,33 +526,50 @@ jobs:
runs-on: ubuntu-latest
needs: [pre-build, lucide-font]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: yarn --frozen-lockfile
run: pnpm install
- name: Set Auth Token
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
- name: Set new version
run: yarn workspace lucide-static version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
run: pnpm --filter lucide-static version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Move Font
run: cp -r lucide-font packages/lucide-static/font
- name: Build
run: yarn workspace lucide-static build
run: pnpm --filter lucide-static build
- name: Publish
run: yarn workspace lucide-static publish
run: pnpm --filter lucide-static publish --no-git-checks
- name: Upload package.json
uses: actions/upload-artifact@v2
@@ -336,14 +582,30 @@ jobs:
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- uses: pnpm/action-setup@v2.0.1
name: Install pnpm
id: pnpm-install
with:
version: 7
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
run: |
echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
- uses: actions/cache@v3
name: Setup pnpm cache
with:
path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install FontForge
run: sudo apt-get install zlib1g-dev fontforge
@@ -369,15 +631,15 @@ jobs:
- name: Install Font Custom dependency
run: sudo gem install fontcustom
- name: Install
run: yarn --frozen-lockfile
- name: Install dependencies
run: pnpm install
- name: Build Icon Font
run: |
mkdir lucide-font
yarn build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
- name: "Upload to Artifacts"
- name: 'Upload to Artifacts'
uses: actions/upload-artifact@v1
with:
name: lucide-font
@@ -390,7 +652,7 @@ jobs:
container:
image: cirrusci/flutter:latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- uses: actions/cache@v2
with:
@@ -436,6 +698,10 @@ jobs:
run: flutter test
working-directory: packages/lucide-flutter
- name: Copy License
run: cp ../../LICENSE ./LICENSE
working-directory: packages/lucide-flutter
- name: Update yaml
run: sed -E 's/(version:)[^\n]*/\1 ${{ needs.pre-build.outputs.VERSION }}/;' pubspec.yaml > pubspec && mv pubspec pubspec.yaml
working-directory: packages/lucide-flutter
@@ -458,6 +724,7 @@ jobs:
pre-build,
lucide,
lucide-react,
lucide-react-native,
lucide-vue,
lucide-vue-next,
lucide-angular,
@@ -468,13 +735,14 @@ jobs:
]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- uses: actions/download-artifact@v2
- name: Commit package files
run: |
mv lucide-package-json/package.json packages/lucide/package.json
mv lucide-react-package-json/package.json packages/lucide-react/package.json
mv lucide-react-native-package-json/package.json packages/lucide-react-native/package.json
mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json
@@ -488,7 +756,7 @@ jobs:
git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
commit -m ":package: Bump lucide package versions to ${{ needs.pre-build.outputs.VERSION }}" --no-verify --quiet
git remote set-url --push origin https://lucide-bot:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git
git push origin HEAD:master
git push origin HEAD:main
- name: Zip font and icons
run: |

36
.github/workflows/test-lucide-svelte.yml vendored
View File

@@ -1,36 +0,0 @@
name: Test Lucide Svelte
on:
pull_request:
paths:
- packages/lucide-svelte/**
push:
paths:
- packages/lucide-svelte/**
workflow_dispatch:
inputs:
version:
description: Version
required: true
jobs:
lucide-svelte:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.4.0
with:
node-version: "14"
cache: yarn
- name: Install dependencies
run: yarn --prefer-offline
- name: Build
run: yarn workspace lucide-svelte build
- name: Test
run: yarn workspace lucide-svelte test

36
.github/workflows/test-lucide-vue-next.yml vendored
View File

@@ -1,36 +0,0 @@
name: Test Lucide Vue Next
on:
pull_request:
paths:
- packages/lucide-vue-next/**
push:
paths:
- packages/lucide-vue-next/**
workflow_dispatch:
inputs:
version:
description: Version
required: true
jobs:
lucide-vue-next:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.4.0
with:
node-version: "14"
cache: yarn
- name: Install dependencies
run: yarn --prefer-offline
- name: Build
run: yarn workspace lucide-vue-next build
- name: Test
run: yarn workspace lucide-vue-next test

36
.github/workflows/test-lucide-vue.yml vendored
View File

@@ -1,36 +0,0 @@
name: Test Lucide Vue
on:
pull_request:
paths:
- packages/lucide-vue/**
push:
paths:
- packages/lucide-vue/**
workflow_dispatch:
inputs:
version:
description: Version
required: true
jobs:
lucide-vue:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2.4.0
with:
node-version: "14"
cache: yarn
- name: Install dependencies
run: yarn --prefer-offline
- name: Build
run: yarn workspace lucide-vue build
- name: Test
run: yarn workspace lucide-vue test

2
.gitignore vendored
View File

@@ -1,4 +1,5 @@
.DS_Store
.idea
.next
.obsidian
.now
@@ -13,3 +14,4 @@ stats
*.log
packages/**/src/icons/*.js
packages/**/src/icons/*.ts
packages/**/LICENSE

1
.npmrc Normal file
View File

@@ -0,0 +1 @@
auto-install-peers=true

34
CONTRIBUTING.md
View File

@@ -10,13 +10,13 @@ The following is a set of guidelines for contributing to Lucide. Feel free to pr
Feel free to open a pull-request to contribute to this project.
**Working on your first Pull Request?** You can learn how from this *free* series
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
[How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
Guidelines for pull requests:
- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `main` branch.
- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
### Pull Requests Including Icons
@@ -65,7 +65,7 @@ If you are a designer who wants to contribute to Lucide but you don't know what
## Development
You will need minimum version of [Nodejs 16+](https://nodejs.org)
You will need minimum version of [Nodejs 16.4+](https://nodejs.org)
For packagemanagement you will need [yarn v1](https://yarnpkg.com/getting-started/install).
For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).
@@ -75,13 +75,13 @@ After cloning the project you need to run:
yarn # Install dependencies, including the workspace packages
```
### Packages -> Yarn Workspaces
### Packages -> PNPM Workspaces
To distribute different packages we use yarn workspaces. Before you start make sure you are familiar with this setup. Read guide here: [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces).
To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces).
The configured directory for workspaces is the [packages](./packages) directory, located in the root directory. There you will find all the current packages from lucide.
> Note: One package is not managed by yarn: **lucide-flutter**
> Note: One package is not managed by pnpm: **lucide-flutter**, this package is written in Dart and used pub for publishing.
### Generated Code
@@ -96,11 +96,11 @@ The commands for generating this code you will read in the next chapter.
The build script includes multiple subcommands to: clean the dist directory, generate icon files, generate types files, and build/transpile code for each build format.
```sh
yarn [package-name] build
pnpm [package-name] build
#example:
yarn lucide-react build
pnpm lucide-react build
```
#### Testing
@@ -108,21 +108,21 @@ yarn lucide-react build
Run unit tests with jest for each package to make sure all the package apis still works as expected.
```sh
yarn [package-name] test
pnpm [package-name] test
#example:
yarn lucide-vue test
pnpm lucide-vue test
```
Recommended to run the test watcher when making changes.
```sh
yarn [package-name] test:watch
pnpm [package-name] test:watch
#example:
yarn lucide-preact test:watch
pnpm lucide-preact test:watch
```
### Unit Testing
@@ -131,15 +131,17 @@ When adding new features to for example the icon component for a framework. It i
### Local Testing
To test changes in a local project, you can use `yarn link` or `npm link` to link the package. Before you do this make sure you builded the package first.
To test changes in a local project, you can use `yarn link`, `npm link` or `pnpm link` to link the package. Before you do this make sure you builded the package first.
```sh
# in packages/lucide-react
yarn link
npm run build &&
npm link
# in your local project
yarn link lucide-react
npm link lucide-react
```
## Project Structure
@@ -168,7 +170,7 @@ All the icons of lucide in SVG format. These will be used as source for all the
Includes all the (npm) packages of lucide.
> Note: One package is not managed by yarn: **lucide-flutter**
> Note: One package is not managed by pnpm: **lucide-flutter**, this package is written in Dart and used pub for publishing.
### scripts

2
LICENSE
View File

@@ -1,6 +1,6 @@
ISC License
Copyright (c) 2020, Lucide Contributors
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above

154
README.md
View File

@@ -1,15 +1,15 @@
<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
<p align="center">
<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
<a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
<a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json" alt="figma installs"></a>
<a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
<a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
</p>
# Lucide
![NPM](https://img.shields.io/npm/l/lucide)
[![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide)
[![installs](https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json)](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)
[![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts)
## What is Lucide?
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
It began after growing disaffection with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
@@ -17,29 +17,32 @@ 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
* [Installation](#installation)
* [Package managers](#package-managers)
* [CDN](#cdn)
* [Usage](#usage)
* [Web](#web)
* [React](#react)
* [Vue 2](#vue-2)
* [Vue 3](#vue-3)
* [Angular](#angular)
* [Preact](#preact)
* [Static](#static-svg-sprite-font-icons-)
* [Figma](#figma)
* [Laravel](#laravel)
* [Flutter](#flutter)
* [Contributing](#contributing)
* [Community](#community)
* [License](#license)
- [Usage](#usage)
- [Web](#web)
- [React](#react)
- [React Native](#react-native)
- [Vue 2](#vue-2)
- [Vue 3](#vue-3)
- [Angular](#angular)
- [Preact](#preact)
- [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
- [Figma](#figma)
- [Laravel](#laravel)
- [Flutter](#flutter)
- [Svelte](#svelte)
- [Solid](#solid)
- [Contributing](#contributing)
- [Community](#community)
- [License](#license)
- [Credits](#credits)
- [Sponsors](#sponsors)
## Usage
@@ -54,13 +57,15 @@ Implementation of the lucide icon library for web applications.
```sh
npm install lucide
```
#or
or
```sh
yarn add lucide
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide#lucide).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide#lucide).
### React
@@ -68,13 +73,31 @@ Implementation of the lucide icon library for react applications.
```sh
yarn add lucide-react
```
# or
or
```sh
npm install lucide-react
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react).
### React Native
Implementation of the lucide icon library for React Native applications.
```sh
yarn add lucide-react-native
```
or
```sh
npm install lucide-react-native
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native).
### Vue 2
@@ -82,13 +105,15 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
```
# or
or
```sh
npm install lucide-vue
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue).
### Vue 3
@@ -96,25 +121,29 @@ Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue-next
```
# or
or
```sh
npm install lucide-vue-next
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next).
### Angular
```sh
yarn add lucide-angular
```
# or
or
```sh
npm install lucide-angular
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular#lucide-angular).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular#lucide-angular).
### Preact
@@ -122,13 +151,15 @@ Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
```
# or
or
```sh
npm install lucide-preact
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact#lucide-preact).
### Static (svg sprite, font, icons ..)
@@ -141,9 +172,11 @@ NPM package
```sh
yarn add lucide-static
```
# or
or
```sh
npm install lucide-static
```
@@ -175,11 +208,43 @@ flutter pub add lucide_icons
For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
### Svelte
Implementation of the lucide icon library for Svelte applications.
```sh
yarn add lucide-svelte
```
or
```sh
npm install lucide-svelte
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte#lucide-svelte).
### Solid
Implementation of the lucide icon library for solid applications.
```sh
yarn add lucide-solid
```
or
```sh
npm install lucide-solid
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-solid#lucide-solid).
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/master/README.md)
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/main/README.md)
## Community
@@ -187,7 +252,7 @@ Join the community on our [Discord](https://discord.gg/EH6nSts) server!
## License
Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE).
## Credits
@@ -201,4 +266,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>

2
docs/ILLUSTRATOR_GUIDE.md
View File

@@ -26,6 +26,6 @@ The Illustrator template is created following guidelines from the [Icon Design G
![SVG export options in Illustrator](images/illustrator-svg-options.png?raw=true "Setting Page Size")
After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/main/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).

2
docs/comparison.md
View File

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

2
docs/index.md
View File

@@ -17,7 +17,7 @@ When designing new icons, the community is working with a set of design rules. T
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.
Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [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).
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).
Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).

30
docs/installation.md
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

50
docs/packages/lucide-angular.md
View File

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

32
docs/packages/lucide-preact.md
View File

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

77
docs/packages/lucide-react-native.md Normal file
View File

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

34
docs/packages/lucide-react.md
View File

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

59
docs/packages/lucide-static.md
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}`);
});
```

38
docs/packages/lucide-svelte.md
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,30 +24,30 @@ 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 />
<Camera color="#ff3e98" />
```
### 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" />

44
docs/packages/lucide-vue-next.md
View File

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

70
docs/packages/lucide-vue.md
View File

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

26
docs/packages/lucide.md
View File

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

16
icons/air-vent.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
<path d="M6 8h12" />
<path d="M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12" />
<path d="M6.6 15.6A2 2 0 1 0 10 17v-5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 440 B

18
icons/angry.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M16 16s-1.5-2-4-2-4 2-4 2" />
<path d="M7.5 8 10 9" />
<path d="m14 9 2.5-1" />
<path d="M9 10h0" />
<path d="M15 10h0" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 386 B

16
icons/annoyed.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M8 15h8" />
<path d="M8 9h2" />
<path d="M14 9h2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 312 B

14
icons/apple.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z" />
<path d="M10 2c1 .5 2 2 2 5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 423 B

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

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

After

Width:  |  Height:  |  Size: 369 B

14
icons/axis-3d.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 4v16h16" />
<path d="m4 20 7-7" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

16
icons/baby.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 12h0" />
<path d="M15 12h0" />
<path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" />
<path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 463 B

14
icons/banana.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 13c3.5-2 8-2 10 2a5.5 5.5 0 0 1 8 5" />
<path d="M5.15 17.89c5.52-1.52 8.65-6.89 7-12C11.55 4 11.5 2 13 2c3.22 0 5 5.5 5 8 0 6.5-4.2 12-10.49 12C5.11 22 2 22 2 20c0-1.5 1.14-1.55 3.15-2.11Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 418 B

16
icons/bean-off.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22a13.96 13.96 0 0 0 9.9-4.1" />
<path d="M10.75 5.093A6 6 0 0 1 22 8c0 2.411-.61 4.68-1.683 6.66" />
<path d="M5.341 10.62a4 4 0 0 0 6.487 1.208M10.62 5.341a4.015 4.015 0 0 1 2.039 2.04" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 502 B

14
icons/bean.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z" />
<path d="M5.341 10.62a4 4 0 1 0 5.279-5.28" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 404 B

15
icons/bomb.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="13" r="9" />
<path d="m19.5 9.5 1.8-1.8a2.4 2.4 0 0 0 0-3.4l-1.6-1.6a2.41 2.41 0 0 0-3.4 0l-1.8 1.8" />
<path d="m22 2-1.5 1.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

13
icons/bone.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18.6 9.82c-.52-.21-1.15-.25-1.54.15l-7.07 7.06c-.39.39-.36 1.03-.15 1.54.12.3.16.6.16.93a2.5 2.5 0 0 1-5 0c0-.26-.24-.5-.5-.5a2.5 2.5 0 1 1 .96-4.82c.5.21 1.14.25 1.53-.15l7.07-7.06c.39-.39.36-1.03.15-1.54-.12-.3-.21-.6-.21-.93a2.5 2.5 0 0 1 5 0c.01.26.24.49.5.5a2.5 2.5 0 1 1-.9 4.82Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 510 B

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

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

After

Width:  |  Height:  |  Size: 369 B

24
icons/box-select.svg
View File

@@ -9,16 +9,16 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 2a2 2 0 0 0-2 2" />
<line x1="8" y1="2" x2="10" y2="2" />
<line x1="14" y1="2" x2="16" y2="2" />
<path d="M4 22a2 2 0 0 1-2-2" />
<line x1="22" y1="8" x2="22" y2="10" />
<line x1="22" y1="14" x2="22" y2="16" />
<path d="M22 20a2 2 0 0 1-2 2" />
<line x1="14" y1="22" x2="16" y2="22" />
<line x1="8" y1="22" x2="10" y2="22" />
<path d="M20 2a2 2 0 0 1 2 2" />
<line x1="2" y1="14" x2="2" y2="16" />
<line x1="2" y1="8" x2="2" y2="10" />
<path d="M5 3a2 2 0 0 0-2 2" />
<path d="M19 3a2 2 0 0 1 2 2" />
<path d="M21 19a2 2 0 0 1-2 2" />
<path d="M5 21a2 2 0 0 1-2-2" />
<path d="M9 3h1" />
<path d="M9 21h1" />
<path d="M14 3h1" />
<path d="M14 21h1" />
<path d="M3 9v1" />
<path d="M21 9v1" />
<path d="M3 14v1" />
<path d="M21 14v1" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 680 B

After

Width:  |  Height:  |  Size: 532 B

21
icons/cake.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 21v-8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8" />
<path d="M4 16s.5-1 2-1 2.5 2 4 2 2.5-2 4-2 2.5 2 4 2 2-1 2-1" />
<path d="M2 21h20" />
<path d="M7 8v2" />
<path d="M12 8v2" />
<path d="M17 8v2" />
<path d="M7 4h.01" />
<path d="M12 4h.01" />
<path d="M17 4h.01" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 499 B

18
icons/calendar-clock.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5" />
<path d="M16 2v4" />
<path d="M8 2v4" />
<path d="M3 10h5" />
<path d="M17.5 17.5 16 16.25V14" />
<path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 443 B

17
icons/calendar-heart.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 10V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7" />
<path d="M16 2v4" />
<path d="M8 2v4" />
<path d="M3 10h18" />
<path d="M21.29 14.7a2.43 2.43 0 0 0-2.65-.52c-.3.12-.57.3-.8.53l-.34.34-.35-.34a2.43 2.43 0 0 0-2.65-.53c-.3.12-.56.3-.79.53-.95.94-1 2.53.2 3.74L17.5 22l3.6-3.55c1.2-1.21 1.14-2.8.19-3.74Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 547 B

18
icons/calendar-search.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 12V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h7.5" />
<path d="M16 2v4" />
<path d="M8 2v4" />
<path d="M3 10h18" />
<path d="M18 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6v0Z" />
<path d="m22 22-1.5-1.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 435 B

20
icons/candy-off.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m8.5 8.5-1 1a4.95 4.95 0 0 0 7 7l1-1" />
<path d="M11.843 6.187A4.947 4.947 0 0 1 16.5 7.5a4.947 4.947 0 0 1 1.313 4.657" />
<path d="M14 16.5V14" />
<path d="M14 6.5v1.843" />
<path d="M10 10v7.5" />
<path d="m16 7 1-5 1.367.683A3 3 0 0 0 19.708 3H21v1.292a3 3 0 0 0 .317 1.341L22 7l-5 1" />
<path d="m8 17-1 5-1.367-.683A3 3 0 0 0 4.292 21H3v-1.292a3 3 0 0 0-.317-1.341L2 17l5-1" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 657 B

17
icons/candy.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z" />
<path d="M14 6.5v10" />
<path d="M10 7.5v10" />
<path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1" />
<path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 505 B

18
icons/cat.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M14 5.256A8.148 8.148 0 0 0 12 5a9.04 9.04 0 0 0-2 .227M20.098 10c.572 1.068.902 2.24.902 3.444C21 17.89 16.97 21 12 21s-9-3-9-7.556c0-1.251.288-2.41.792-3.444" />
<path d="M3.75 10S2.11 3.58 3.5 3C4.89 2.42 8 3 9.781 5" />
<path d="M20.172 10.002s1.64-6.42.25-7c-1.39-.58-4.5 0-6.282 2" />
<path d="M8 14v.5" />
<path d="M16 14v.5" />
<path d="M11.25 16.25h1.5L12 17l-.75-.75Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 611 B

14
icons/check-check.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 275 B

16
icons/cherry.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z" />
<path d="M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z" />
<path d="M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12" />
<path d="M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 482 B

14
icons/circle-dot.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<circle cx="12" cy="12" r="1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 279 B

16
icons/circle-ellipsis.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M17 12h.01" />
<path d="M12 12h.01" />
<path d="M7 12h.01" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 321 B

17
icons/citrus.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5.51 18.49a12 12 0 0 0 16.12.78c.49-.41.49-1.15.03-1.6L6.34 2.33a1.08 1.08 0 0 0-1.6.03A12 12 0 0 0 5.5 18.5Z" />
<path d="M8.34 15.66a8 8 0 0 0 10.4.78c.54-.4.54-1.16.06-1.64L9.2 5.2c-.48-.48-1.25-.48-1.64.06a8 8 0 0 0 .78 10.4Z" />
<path d="m14 10-5.5 5.5" />
<path d="M14 10v8" />
<path d="M14 10H6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

4
icons/clipboard-check.svg
View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="m9 13 2 2 4-4" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<path d="m9 14 2 2 4-4" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 383 B

After

Width:  |  Height:  |  Size: 383 B

2
icons/clipboard-copy.svg
View File

@@ -9,9 +9,9 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
<path d="M16 4h2a2 2 0 0 1 2 2v4" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M21 14H11" />
<path d="m15 10-4 4 4 4" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 433 B

16
icons/clipboard-edit.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M10.42 12.61a2.1 2.1 0 1 1 2.97 2.97L7.95 21 4 22l.99-3.95 5.43-5.44Z" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5.5" />
<path d="M4 13.5V6a2 2 0 0 1 2-2h2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 451 B

2
icons/clipboard-list.svg
View File

@@ -9,8 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<path d="M12 11h4" />
<path d="M12 16h4" />
<path d="M8 11h.01" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 452 B

After

Width:  |  Height:  |  Size: 452 B

17
icons/clipboard-signature.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M8 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-.5" />
<path d="M16 4h2a2 2 0 0 1 1.73 1" />
<path d="M18.42 9.61a2.1 2.1 0 1 1 2.97 2.97L16.95 17 13 18l.99-3.95 4.43-4.44Z" />
<path d="M8 18h1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 489 B

17
icons/clipboard-type.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<path d="M9 12v-1h6v1" />
<path d="M11 17h2" />
<path d="M12 11v6" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

2
icons/clipboard-x.svg
View File

@@ -9,8 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<path d="m15 11-6 6" />
<path d="m9 11 6 6" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 405 B

After

Width:  |  Height:  |  Size: 405 B

2
icons/clipboard.svg
View File

@@ -9,6 +9,6 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 354 B

After

Width:  |  Height:  |  Size: 354 B

22
icons/cloud-cog.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<circle cx="12" cy="17" r="3" />
<path d="M12 13v1" />
<path d="M12 20v1" />
<path d="M16 17h-1" />
<path d="M9 17H8" />
<path d="m15 14-.88.88" />
<path d="M9.88 19.12 9 20" />
<path d="m15 20-.88-.88" />
<path d="M9.88 14.88 9 14" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 529 B

2
icons/cloud-drizzle.svg
View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M8 19v1" />
<path d="M8 14v1" />
<path d="M16 19v1" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 422 B

2
icons/cloud-fog.svg
View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M16 17H7" />
<path d="M17 21H9" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 323 B

After

Width:  |  Height:  |  Size: 328 B

8
icons/cloud-hail.svg
View File

@@ -9,11 +9,11 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M16 14v2" />
<path d="M8 14v2" />
<path d="M16 20h0" />
<path d="M8 20h0" />
<path d="M16 20h.01" />
<path d="M8 20h.01" />
<path d="M12 16v2" />
<path d="M12 22h0" />
<path d="M12 22h.01" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 428 B

2
icons/cloud-lightning.svg
View File

@@ -9,6 +9,6 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6 16.326A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 .5 8.973" />
<path d="m13 12-3 5h4l-3 5" />
<path d="M18 17a4.5 4.5 0 0 0-.5-9h-1.8a7.05 7.05 0 0 0-2-3.23A7 7 0 1 0 5.32 16a6.42 6.42 0 0 0 .68.37" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 312 B

16
icons/cloud-moon-rain.svg Normal file
View File

@@ -0,0 +1,16 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M10.083 9A6.002 6.002 0 0 1 16 4a4.243 4.243 0 0 0 6 6c0 2.22-1.206 4.16-3 5.197" />
<path d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24" />
<path d="M11 20v2" />
<path d="M7 19v2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 408 B

4
icons/cloud-moon.svg
View File

@@ -9,6 +9,6 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M13.63 22A3.3 3.3 0 0 0 17 18.79a3.3 3.3 0 0 0-3.38-3.22h-1.34A5.23 5.23 0 0 0 7.25 12 5.13 5.13 0 0 0 2 17c0 2.76 2.35 5 5.25 5h6.38z" />
<path d="M9.95 9a6.13 6.13 0 0 1 5.5-5.18 4.77 4.77 0 0 0 6.67 6.67A6.13 6.13 0 0 1 19.46 15" />
<path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z" />
<path d="M10.083 9A6.002 6.002 0 0 1 16 4a4.243 4.243 0 0 0 6 6c0 2.22-1.206 4.16-3 5.197" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 457 B

After

Width:  |  Height:  |  Size: 362 B

4
icons/cloud-off.svg
View File

@@ -10,6 +10,6 @@
stroke-linejoin="round"
>
<path d="m2 2 20 20" />
<path d="M10 5a7 7 0 0 1 5.7 5h1.8a4.5 4.5 0 0 1 4 6.5" />
<path d="M18.8 18.8c-.4.2-.8.2-1.3.2H9A7 7 0 0 1 5.8 5.8" />
<path d="M5.782 5.782A7 7 0 0 0 9 19h8.5a4.5 4.5 0 0 0 1.307-.193" />
<path d="M21.532 16.5A4.5 4.5 0 0 0 17.5 10h-1.79A7.008 7.008 0 0 0 10 5.07" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 358 B

After

Width:  |  Height:  |  Size: 388 B

2
icons/cloud-rain-wind.svg
View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="m9.2 22 3-7" />
<path d="m9 13-3 7" />
<path d="m17 13-3 7" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 353 B

After

Width:  |  Height:  |  Size: 358 B

2
icons/cloud-rain.svg
View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M16 14v6" />
<path d="M8 14v6" />
<path d="M12 16v6" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 346 B

After

Width:  |  Height:  |  Size: 351 B

14
icons/cloud-snow.svg
View File

@@ -9,11 +9,11 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M8 15h0" />
<path d="M8 19h0" />
<path d="M12 17h0" />
<path d="M12 21h0" />
<path d="M16 15h0" />
<path d="M16 19h0" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M8 15h.01" />
<path d="M8 19h.01" />
<path d="M12 17h.01" />
<path d="M12 21h.01" />
<path d="M16 15h.01" />
<path d="M16 19h.01" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 434 B

20
icons/cloud-sun-rain.svg Normal file
View File

@@ -0,0 +1,20 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 2v2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="M20 12h2" />
<path d="m19.07 4.93-1.41 1.41" />
<path d="M15.947 12.65a4 4 0 0 0-5.925-4.128" />
<path d="M3 20a5 5 0 1 1 8.9-4H13a3 3 0 0 1 2 5.24" />
<path d="M11 20v2" />
<path d="M7 19v2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 483 B

8
icons/cloud-sun.svg
View File

@@ -10,9 +10,9 @@
stroke-linejoin="round"
>
<path d="M12 2v2" />
<path d="m5.22 5.22 1.42 1.42" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="M20 12h2" />
<path d="M15.97 12.5A4 4 0 0 0 9.5 8.88" />
<path d="M13.63 22A3.3 3.3 0 0 0 17 18.79a3.3 3.3 0 0 0-3.38-3.22h-1.34A5.23 5.23 0 0 0 7.25 12 5.13 5.13 0 0 0 2 17c0 2.76 2.35 5 5.25 5h6.38z" />
<path d="m17.36 6.64 1.42-1.42" />
<path d="m19.07 4.93-1.41 1.41" />
<path d="M15.947 12.65a4 4 0 0 0-5.925-4.128" />
<path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 524 B

After

Width:  |  Height:  |  Size: 437 B

2
icons/cloud.svg
View File

@@ -9,5 +9,5 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17.5 19a4.5 4.5 0 1 0 0-9h-1.8A7 7 0 1 0 9 19h8.5z" />
<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 275 B

After

Width:  |  Height:  |  Size: 275 B

4
icons/cloudy.svg
View File

@@ -9,6 +9,6 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17.5 21a4.5 4.5 0 1 0 0-9h-1.8A7 7 0 1 0 9 21h8.5z" />
<path d="M22 10c0-1.5-1.5-3-3.5-3H17c-.7-2.3-2.9-4-5.4-4-2.7 0-5 2-5.5 4.5" />
<path d="M17.5 21H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
<path d="M22 10a3 3 0 0 0-3-3h-2.207a5.502 5.502 0 0 0-10.702.5" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 356 B

After

Width:  |  Height:  |  Size: 345 B

26
icons/cog.svg Normal file
View File

@@ -0,0 +1,26 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
<path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
<path d="M12 2v2" />
<path d="M12 22v-2" />
<path d="m17 20.66-1-1.73" />
<path d="M11 10.27 7 3.34" />
<path d="m20.66 17-1.73-1" />
<path d="m3.34 7 1.73 1" />
<path d="M14 12h8" />
<path d="M2 12h2" />
<path d="m20.66 7-1.73 1" />
<path d="m3.34 17 1.73-1" />
<path d="m17 3.34-1 1.73" />
<path d="m11 13.73-4 6.93" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 658 B

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

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

After

Width:  |  Height:  |  Size: 351 B

14
icons/curly-braces.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" />
<path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 380 B

15
icons/diff.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 3v14" />
<path d="M5 10h14" />
<path d="M5 21h14" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

23
icons/dna-off.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M15 2c-1.35 1.5-2.092 3-2.5 4.5M9 22c1.35-1.5 2.092-3 2.5-4.5" />
<path d="M2 15c3.333-3 6.667-3 10-3m10-3c-1.5 1.35-3 2.092-4.5 2.5" />
<path d="m17 6-2.5-2.5" />
<path d="m14 8-1.5-1.5" />
<path d="m7 18 2.5 2.5" />
<path d="m3.5 14.5.5.5" />
<path d="m20 9 .5.5" />
<path d="m6.5 12.5 1 1" />
<path d="m16.5 10.5 1 1" />
<path d="m10 16 1.5 1.5" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 630 B

23
icons/dna.svg Normal file
View File

@@ -0,0 +1,23 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 15c6.667-6 13.333 0 20-6" />
<path d="M9 22c1.798-1.998 2.518-3.995 2.807-5.993" />
<path d="M15 2c-1.798 1.998-2.518 3.995-2.807 5.993" />
<path d="m17 6-2.5-2.5" />
<path d="m14 8-1-1" />
<path d="m7 18 2.5 2.5" />
<path d="m3.5 14.5.5.5" />
<path d="m20 9 .5.5" />
<path d="m6.5 12.5 1 1" />
<path d="m16.5 10.5 1 1" />
<path d="m10 16 1.5 1.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 593 B

18
icons/dog.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 770 B

2
icons/download-cloud.svg
View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 16.2A4.5 4.5 0 0 0 17.5 8h-1.8A7 7 0 1 0 4 14.9" />
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
<path d="M12 12v9" />
<path d="m8 17 4 4 4-4" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 328 B

After

Width:  |  Height:  |  Size: 333 B

19
icons/dumbbell.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6.5 6.5 11 11" />
<path d="m21 21-1-1" />
<path d="m3 3 1 1" />
<path d="m18 22 4-4" />
<path d="m2 6 4-4" />
<path d="m3 10 7-7" />
<path d="m14 21 7-7" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

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

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

After

Width:  |  Height:  |  Size: 501 B

14
icons/ear.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 337 B

14
icons/egg-fried.svg Normal file
View File

@@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11.5" cy="12.5" r="3.5" />
<path d="M3 8c0-3.5 2.5-6 6.5-6 5 0 4.83 3 7.5 5s5 2 5 6c0 4.5-2.5 6.5-7 6.5-2.5 0-2.5 2.5-6 2.5s-7-2-7-5.5c0-3 1.5-3 1.5-5C3.5 10 3 9 3 8Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 395 B

15
icons/egg-off.svg Normal file
View File

@@ -0,0 +1,15 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M6.399 6.399C5.362 8.157 4.65 10.189 4.5 12c-.37 4.43 1.27 9.95 7.5 10 3.256-.026 5.259-1.547 6.375-3.625" />
<path d="M19.532 13.875A14.07 14.07 0 0 0 19.5 12c-.36-4.34-3.95-9.96-7.5-10-1.04.012-2.082.502-3.046 1.297" />
<line x1="2" y1="2" x2="22" y2="22" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 484 B

14
icons/fan.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 431 B

18
icons/file-archive.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 22V4c0-.5.2-1 .6-1.4C5 2.2 5.5 2 6 2h8.5L20 7.5V20c0 .5-.2 1-.6 1.4-.4.4-.9.6-1.4.6h-2" />
<polyline points="14 2 14 8 20 8" />
<circle cx="10" cy="20" r="2" />
<path d="M10 7V6" />
<path d="M10 12v-1" />
<path d="M10 18v-2" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 460 B

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