Compare commits

..

23 Commits

Author SHA1 Message Date
Eric Fennis
d349be0fee 0.1.0-alpha.0 2020-08-19 21:58:57 +02:00
Eric Fennis
c7a8ea09d9 Merge branch 'master' of github.com:featherity/featherity into feature/new-package 2020-08-19 21:36:37 +02:00
Eric Fennis
6fb9593f28 remove vscode setting files 2020-08-19 21:34:29 +02:00
Eric Fennis
2f16a80e6d reset packages directory 2020-08-19 20:45:49 +02:00
Eric Fennis
4bdee5a5a2 add indentation 2020-08-19 20:11:21 +02:00
Eric Fennis
41b9d7637d Bring back old libraries 2020-08-19 20:03:38 +02:00
Eric Fennis
d6b50f942a remove lint disabler 2020-08-19 20:01:34 +02:00
Eric Fennis
3a44f64098 fix lint error 2020-08-19 20:01:08 +02:00
Eric Fennis
6a0f52daab Refactor scripts 2020-08-19 19:57:21 +02:00
Eric Fennis
e38ad92be1 Setup rollup and build progress 2020-08-18 21:31:10 +02:00
Eric Fennis
70b178215b Move packeges 2020-08-14 23:20:19 +02:00
Eric Fennis
bdc4f81aa5 rename import 2020-07-18 13:18:00 +02:00
Eric Fennis
018a3af0bd Eslint fixes 2020-07-18 13:13:57 +02:00
Eric Fennis
c9551388d0 Add eslint config 2020-07-18 12:54:53 +02:00
Eric Fennis
4365dddf57 Improve optimize script 2020-07-18 12:53:05 +02:00
Eric Fennis
ea8bec9320 Factoring 2020-07-18 12:39:08 +02:00
Eric Fennis
e08eff7dee rename variable 2020-07-18 12:22:43 +02:00
Eric Fennis
4ac9e0bc37 remove log 2020-07-18 01:26:14 +02:00
Eric Fennis
446fd3f852 update package.json 2020-07-18 01:24:49 +02:00
Eric Fennis
e732f4dd6d Refactor names 2020-07-18 01:14:30 +02:00
Eric Fennis
771cf1d66e Add introduction readme 2020-07-18 01:01:56 +02:00
Eric Fennis
eee84b0edf Add build scripts for dist 2020-07-18 00:52:09 +02:00
Eric Fennis
de6906e242 New setup for new NPM package 2020-07-17 23:07:51 +02:00
1329 changed files with 17126 additions and 55256 deletions

View File

@@ -2,4 +2,3 @@ dist
build
coverage
lib
tests

View File

@@ -1,21 +0,0 @@
module.exports = {
env: {
browser: true,
node: true
},
extends: ['airbnb-base', 'prettier'],
plugins: ['import', 'prettier'],
rules: {
'no-console': 'off',
'no-param-reassign': 'off',
'no-shadow': 'off',
'no-use-before-define': 'off',
'prettier/prettier': [
'error',
{
singleQuote: true,
trailingComma: 'all'
}
]
}
};

21
.eslintrc.json Normal file
View File

@@ -0,0 +1,21 @@
{
"env": {
"browser": true,
"node": true
},
"extends": ["airbnb-base", "prettier"],
"plugins": ["import", "prettier"],
"rules": {
"no-console": "off",
"no-param-reassign": "off",
"no-shadow": "off",
"no-use-before-define": "off",
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "all"
}
]
}
}

View File

@@ -1,7 +1,7 @@
---
name: Bug report
about: Create a report to help us improve
labels: "🐛 bug"
labels: bug
---
<!--
@@ -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/main:
* Are you running from source/master:
* Are you using a released build:
* Operating system:
* Bits:

View File

@@ -1,18 +1,15 @@
---
name: Icon request
about: Suggest an new icon for this project
labels: "🙌 icon request"
labels: "icon request"
---
<!--
Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.
A note about brand logos and related material : We follow the decision from Feather Icons (https://github.com/feathericons/feather/issues/763) to deprecate icons relating to brands.
You will find some in the set, but we won't add any new ones. https://simpleicons.org has 24x24 SVG icons for this purpose.
-->
## Icon Request
* Icon name:
* Use case:
* _Screenshots_ of similar icons:
* Screenshots of similar icons:

View File

@@ -1,15 +0,0 @@
---
name: New icon
about: Add a new icon to the library
labels: "🎨 <icon"
---
<!-- Thanks for submitting an icon! Please make sure you read the icon design guide
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` -->
- **Tags (alternative names for this icon)** (add them in tags.json) :
- **What is the purpose of this icon?** : <!-- Shows that one can click it to... / Is used to denote or label... -->
- **100% scale preview** : <!-- upload an image -->
- **Have you considered alternative possibilities** for its naming or design? :

View File

@@ -1,68 +0,0 @@
name: Continuous integration icons
on:
push:
branches:
- main
paths:
- icons/**
jobs:
create-release:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Fetch tags
run: git fetch --all --tags
- name: Get latest tag
id: latest-tag
run: echo "::set-output name=LATEST_TAG::$(git describe --tags `git rev-list --tags --max-count=1`)"
- name: Install dependencies
run: yarn --frozen-lockfile
- name: Check if we can patch
run: .github/workflows/version-up.sh --minor
- name: Create new version
id: new-version
run: echo "::set-output name=NEW_VERSION::$(.github/workflows/version-up.sh --minor)"
- 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="${CHANGE_LOG//'%'/'%25'}"
CHANGE_LOG="${CHANGE_LOG//$'\n'/'%0A'}"
CHANGE_LOG="${CHANGE_LOG//$'\r'/'%0D'}"
echo $CHANGE_LOG
echo "::set-output name=CHANGE_LOG::$CHANGE_LOG"
env:
GITHUB_API_KEY: ${{ secrets.GITHUB_TOKEN }}
- name: Check output
run: |
echo '${{ steps.new-version.outputs.NEW_VERSION }}'
echo '${{ steps.change-log.outputs.CHANGE_LOG }}'
- name: Release
uses: softprops/action-gh-release@v1
env:
GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
with:
tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
body: ${{ steps.change-log.outputs.CHANGE_LOG }}

View File

@@ -1,18 +0,0 @@
name: Close stale issues and PR
on:
schedule:
- cron: "45 1 * * *"
jobs:
stale:
runs-on: ubuntu-latest
steps:
- uses: actions/stale@v3
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-pr-message: This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.
close-pr-message: This PR was closed because it has been stalled for 5 days with no activity.
close-pr-label: 🧶 stale
days-before-stale: 30
days-before-close: 5
days-before-pr-close: -1

View File

@@ -1,545 +0,0 @@
name: Release Packages
on:
push:
tags:
- "v*"
workflow_dispatch:
inputs:
version:
description: Version
required: true
jobs:
pre-build:
if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey"]', github.actor)
runs-on: ubuntu-latest
outputs:
VERSION: ${{ steps.get_version.outputs.VERSION }}
steps:
- name: Get the version
id: get_version
run: |
echo $VERSION_REF
echo ::set-output name=VERSION::${VERSION_REF/refs\/tags\/\v}
env:
VERSION_REF: ${{ github.event.inputs.version || github.ref }}
lucide:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide build
- name: Test
run: yarn workspace lucide test
- name: Publish
run: yarn workspace lucide publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-package-json
path: packages/lucide/package.json
lucide-react:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide-react build
- name: Test
run: yarn workspace lucide-react test
- name: Publish
run: yarn workspace lucide-react publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
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@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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-native version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
- name: Build
run: yarn workspace lucide-react-native build
- name: Test
run: yarn workspace lucide-react-native test
- name: Publish
run: yarn workspace lucide-react-native publish
- 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
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide-vue build
- name: Test
run: yarn workspace lucide-vue test
- name: Publish
run: yarn workspace lucide-vue publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-vue-package-json
path: packages/lucide-vue/package.json
lucide-vue-next:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide-vue-next build
- name: Test
run: yarn workspace lucide-vue-next test
- name: Publish
run: yarn workspace lucide-vue-next publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-vue-next-package-json
path: packages/lucide-vue-next/package.json
lucide-angular:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide-angular build
- name: Test
run: yarn workspace lucide-angular test:headless
- name: Publish
run: yarn workspace lucide-angular publish dist
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-angular-package-json
path: packages/lucide-angular/package.json
lucide-preact:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide-preact build
- name: Test
run: yarn workspace lucide-preact test
- name: Publish
run: yarn workspace lucide-preact publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-preact-package-json
path: packages/lucide-preact/package.json
lucide-svelte:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Build
run: yarn workspace lucide-svelte build
- name: Test
run: yarn workspace lucide-svelte test
- name: Publish
run: yarn workspace lucide-svelte publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-svelte-package-json
path: packages/lucide-svelte/package.json
lucide-static:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: [pre-build, lucide-font]
steps:
- uses: actions/checkout@v2
- uses: actions/download-artifact@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install dependencies
run: yarn --frozen-lockfile
- 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
- name: Move Font
run: cp -r lucide-font packages/lucide-static/font
- name: Build
run: yarn workspace lucide-static build
- name: Publish
run: yarn workspace lucide-static publish
- name: Upload package.json
uses: actions/upload-artifact@v2
with:
name: lucide-static-package-json
path: packages/lucide-static/package.json
lucide-font:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: pre-build
steps:
- uses: actions/checkout@v2
- name: Setup node
uses: actions/setup-node@v3
with:
node-version: 16
cache: 'yarn'
cache-dependency-path: 'yarn.lock'
- name: Install FontForge
run: sudo apt-get install zlib1g-dev fontforge
- name: Clone sfnt2woff-zopfli repo
run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
- name: Install and move sfnt2woff-zopfli
run: |
cd sfnt2woff-zopfli
make
sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
- name: Clone woff2
run: git clone --recursive https://github.com/google/woff2.git
- name: Install woff2
run: |
cd woff2
sudo make clean all
sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
- name: Install Font Custom dependency
run: sudo gem install fontcustom
- name: Install
run: yarn --frozen-lockfile
- 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
- name: "Upload to Artifacts"
uses: actions/upload-artifact@v1
with:
name: lucide-font
path: lucide-font
lucide-flutter:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs: [pre-build, lucide-font]
container:
image: cirrusci/flutter:latest
steps:
- uses: actions/checkout@v2
- uses: actions/download-artifact@v2
- uses: actions/cache@v2
with:
path: ~/.pub-cache
key: ${{ runner.os }}-pub-${{ hashFiles('~/.pub-cache') }}
restore-keys: |
${{ runner.os }}-pub-
- name: Setup credentials
run: |
mkdir -p ~/.pub-cache
cat <<EOF > ~/.pub-cache/credentials.json
{
"accessToken": "${{ secrets.GOOGLE_OAUTH_ACCESS_TOKEN }}",
"refreshToken": "${{ secrets.GOOGLE_OAUTH_REFRESH_TOKEN }}",
"idToken": "${{ secrets.GOOGLE_OAUTH_ID_TOKEN }}",
"tokenEndpoint":"https://accounts.google.com/o/oauth2/token",
"scopes": [ "openid", "https://www.googleapis.com/auth/userinfo.email" ],
"expiration": 1629835569218
}
EOF
- name: Get packages
run: flutter pub get
working-directory: packages/lucide-flutter
- name: List lucide-font folder
run: ls lucide-font
- name: Copy assets from lucide-font directory
run: |
mkdir packages/lucide-flutter/assets
cp lucide-font/lucide.ttf packages/lucide-flutter/assets/lucide.ttf
cp lucide-font/lucide-preview.html packages/lucide-flutter/assets/lucide-preview.html
- name: Generate exports file
run: |
dart tool/generate_fonts.dart assets/lucide-preview.html
flutter format .
working-directory: packages/lucide-flutter
- name: Test
run: flutter test
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
- name: Flutter publish
run: flutter pub publish -f
working-directory: packages/lucide-flutter
- name: Upload pubspec.yaml
uses: actions/upload-artifact@v2
with:
name: lucide-flutter-pubspec-yaml
path: packages/lucide-flutter/pubspec.yaml
post-release:
if: github.repository == 'lucide-icons/lucide'
runs-on: ubuntu-latest
needs:
[
pre-build,
lucide,
lucide-react,
lucide-react-native,
lucide-vue,
lucide-vue-next,
lucide-angular,
lucide-svelte,
lucide-preact,
lucide-flutter,
lucide-font,
]
steps:
- uses: actions/checkout@v2
- 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-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
mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
mv lucide-flutter-pubspec-yaml/pubspec.yaml packages/lucide-flutter/pubspec.yaml
- name: Commit package.jsons
run: |
git add packages/*/package.json packages/lucide-flutter/pubspec.yaml
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:main
- name: Zip font and icons
run: |
zip -r lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip lucide-font
zip -r lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip icons
- name: Release zip and fonts
uses: softprops/action-gh-release@v1
env:
GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
with:
tag_name: v${{ needs.pre-build.outputs.VERSION }}
files: |
lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip
lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip

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

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

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

View File

@@ -1,284 +0,0 @@
#!/usr/bin/env bash
## Copyright (C) 2017, Oleksandr Kucherenko
## Last revisit: 2017-09-29
## get highest version tag for all branches
function highest_tag(){
local TAG=$(git describe --tags `git rev-list --tags --max-count=1`)
echo "$TAG"
}
## extract current branch name
function current_branch(){
## expected: heads/{branch_name}
## expected: {branch_name}
local BRANCH=$(git rev-parse --abbrev-ref HEAD | cut -d"/" -f2)
echo "$BRANCH"
}
## get latest/head commit hash number
function head_hash(){
local COMMIT_HASH=$(git rev-parse --verify HEAD)
echo "$COMMIT_HASH"
}
## extract tag commit hash code, tag name provided by argument
function tag_hash(){
local TAG_HASH=$(git log -1 --format=format:"%H" $1 2>/dev/null | tail -n1)
echo "$TAG_HASH"
}
## get latest revision number
function latest_revision(){
local REV=$(git rev-list --count HEAD 2>/dev/null)
echo "$REV"
}
## parse last found tag, extract it PARTS
function parse_last(){
local position=$(($1-1))
# two parts found only
local SUBS=( ${PARTS[$position]//-/ } )
#echo ${SUBS[@]}, size: ${#SUBS}
# found NUMBER
PARTS[$position]=${SUBS[0]}
#echo ${PARTS[@]}
# found SUFFIX
if [[ ${#SUBS} -ge 1 ]]; then
PARTS[4]=${SUBS[1],,} #lowercase
#echo ${PARTS[@]}, ${SUBS[@]}
fi
}
## increment REVISION part, don't touch STAGE
function increment_revision(){
PARTS[3]=$(( PARTS[3] + 1 ))
IS_DIRTY=1
}
## increment PATCH part, reset all other lower PARTS, don't touch STAGE
function increment_patch(){
PARTS[2]=$(( PARTS[2] + 1 ))
PARTS[3]=0
IS_DIRTY=1
}
## increment MINOR part, reset all other lower PARTS, don't touch STAGE
function increment_minor(){
PARTS[1]=$(( PARTS[1] + 1 ))
PARTS[2]=0
PARTS[3]=0
IS_DIRTY=1
}
## increment MAJOR part, reset all other lower PARTS, don't touch STAGE
function incremet_major(){
PARTS[0]="v$(( PARTS[0] + 1 ))"
PARTS[1]=0
PARTS[2]=0
PARTS[3]=0
IS_DIRTY=1
}
## increment the number only of last found PART: REVISION --> PATCH --> MINOR. don't touch STAGE
function increment_last_found(){
if [[ "${#PARTS[3]}" == 0 || "${PARTS[3]}" == "0" ]]; then
if [[ "${#PARTS[2]}" == 0 || "${PARTS[2]}" == "0" ]]; then
increment_minor
else
increment_patch
fi
else
increment_revision
fi
# stage part is not EMPTY
if [[ "${#PARTS[4]}" != 0 ]]; then
IS_SHIFT=1
fi
}
## compose version from PARTS
function compose(){
MAJOR="${PARTS[0]}"
MINOR=".${PARTS[1]}"
PATCH=".${PARTS[2]}"
REVISION=".${PARTS[3]}"
SUFFIX="-${PARTS[4]}"
if [[ "${#PATCH}" == 1 ]]; then # if empty {PATCH}
PATCH=""
fi
if [[ "${#REVISION}" == 1 ]]; then # if empty {REVISION}
REVISION=""
fi
if [[ "${PARTS[3]}" == "0" ]]; then # if revision is ZERO
REVISION=""
fi
# shrink patch and revision
if [[ -z "${REVISION// }" ]]; then
if [[ "${PARTS[2]}" == "0" ]]; then
PATCH=".0"
fi
else # revision is not EMPTY
if [[ "${#PATCH}" == 0 ]]; then
PATCH=".0"
fi
fi
# remove suffix if we don't have a alpha/beta/rc
if [[ "${#SUFFIX}" == 1 ]]; then
SUFFIX=""
fi
echo "${MAJOR}${MINOR}${PATCH}${REVISION}${SUFFIX}" #full format
}
# initial version used for repository without tags
INIT_VERSION=0.0.0.0-alpha
# do GIT data extracting
TAG=$(highest_tag)
REVISION=$(latest_revision)
BRANCH=$(current_branch)
TAG_HASH=$(tag_hash $TAG)
HEAD_HASH=$(head_hash)
# if tag and branch commit hashes are different, than print info about that
#echo $HEAD_HASH vs $TAG_HASH
if [[ "$@" == "" ]]; then
if [[ "$TAG_HASH" == "$HEAD_HASH" ]]; then
echo "Tag $TAG and HEAD are aligned. We will stay on the TAG version."
echo ""
NO_ARGS_VALUE='--stay'
else
PATTERN="^[0-9]+.[0-9]+(.[0-9]+)*(-(alpha|beta|rc))*$"
if [[ "$BRANCH" =~ $PATTERN ]]; then
echo "Detected version branch '$BRANCH'. We will auto-increment the last version PART."
echo ""
NO_ARGS_VALUE='--default'
else
echo "Detected branch name '$BRANCH' than does not match version pattern. We will increase MINOR."
echo ""
NO_ARGS_VALUE='--minor'
fi
fi
fi
#
# {MAJOR}.{MINOR}[.{PATCH}[.{REVISION}][-(.*)]
#
# Suffix: alpha, beta, rc
# No Suffix --> {NEW_VERSION}-alpha
# alpha --> beta
# beta --> rc
# rc --> {VERSION}
#
PARTS=( ${TAG//./ } )
parse_last ${#PARTS[@]} # array size as argument
#echo ${PARTS[@]}
# if no parameters than emulate --default parameter
if [[ "$@" == "" ]]; then
set -- $NO_ARGS_VALUE
fi
# parse input parameters
for i in "$@"
do
key="$i"
case $key in
-a|--alpha) # switched to ALPHA
PARTS[4]="alpha"
IS_SHIFT=1
;;
-b|--beta) # switched to BETA
PARTS[4]="beta"
IS_SHIFT=1
;;
-c|--release-candidate) # switched to RC
PARTS[4]="rc"
IS_SHIFT=1
;;
-r|--release) # switched to RELEASE
PARTS[4]=""
IS_SHIFT=1
;;
-p|--patch) # increment of PATCH
increment_patch
;;
-e|--revision) # increment of REVISION
increment_revision
;;
-g|--git-revision) # use git revision number as a revision part§
PARTS[3]=$(( REVISION ))
IS_DIRTY=1
;;
-i|--minor) # increment of MINOR by default
increment_minor
;;
--default) # stay on the same stage, but increment only last found PART of version code
increment_last_found
;;
-m|--major) # increment of MAJOR
incremet_major
;;
-s|--stay) # extract version info
IS_DIRTY=1
NO_APPLY_MSG=1
;;
-t|--tag-only) # extract version info
TAG_ONLY=1
;;
--apply)
DO_APPLY=1
;;
-h|--help)
help
;;
esac
shift
done
# detected shift, but no increment
if [[ "$IS_SHIFT" == "1" ]]; then
# temporary disable stage shift
stage=${PARTS[4]}
PARTS[4]=''
# detect first run on repository, INIT_VERSION was used
if [[ "$(compose)" == "0.0" ]]; then
increment_minor
fi
PARTS[4]=$stage
fi
# no increment applied yet and no shift of state, do minor increase
if [[ "$IS_DIRTY$IS_SHIFT" == "" ]]; then
increment_minor
fi
compose
# is proposed tag in conflict with any other TAG
PROPOSED_HASH=$(tag_hash $(compose))
if [[ "${#PROPOSED_HASH}" -gt 0 && "$NO_APPLY_MSG" == "" ]]; then
echo -e "\033[31mERROR:\033[0m "
echo -e "\033[31mERROR:\033[0m Found conflict with existing tag \033[32m$(compose)\033[0m / $PROPOSED_HASH"
echo -e "\033[31mERROR:\033[0m Only manual resolving is possible now."
echo -e "\033[31mERROR:\033[0m "
echo -e "\033[31mERROR:\033[0m To Resolve try to add --revision or --patch modifier."
echo -e "\033[31mERROR:\033[0m "
echo ""
exit 1
fi

8
.gitignore vendored
View File

@@ -1,16 +1,10 @@
.DS_Store
.idea
.next
.obsidian
.now
.idea
node_modules
dist
build
lib
sandbox
stash
coverage
stats
*.log
packages/**/src/icons/*.js
packages/**/src/icons/*.ts

View File

@@ -1,16 +0,0 @@
.github
packages
stats
node_modules
tests
scripts
site
src
build
babel.config.js
categories.json
jest.config.js
netlify.toml
rollup.config.js
rollup.plugins.js
tags.json

View File

@@ -1,9 +1,8 @@
# Contribution Guidelines
:+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
The following is a set of guidelines for contributing to Lucide. Feel free to propose changes to this document in a pull request.
The following is a set of guidelines for contributing to Featherity. Feel free to propose changes to this document in a pull request.
## Pull Requests
@@ -13,184 +12,13 @@ Feel free to open a pull-request to contribute to this project.
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
Guidelines for pull requests:
- __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves wont make apparent.
- __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
- __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
### Pull Requests Including Icons
#### Guidelines
Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md).
### Templates
Here you can find templates and instructions on how to implement the guidelines with different programs.
#### Adobe Illustrator
`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`.
`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`.
#### Inkscape
`Template`: None
`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
#### Figma
`Template`: None
`Instructions`: You can find the [Figma Guide](/docs/FIGMA_GUIDE.md) and how to set up Figma under `/docs/FIGMA_GUIDE.md`.
#### Submitting Multiple Icons
If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.
So don't submit multiple icons in one PR that have noting to do with each other.
So for example don't create one PR with icons: `arrow-up`, `bicycle`, `arrow-down`.
Seperate them by two PRs; 'pr-01' `arrow`, `arrow-down` and 'pr-02' `bicycle`.
## Icon Requests
Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a :+1:.
If the icon has not already been requested, [create an issue](https://github.com/lucide-icons/lucide/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
### Icon Requests from Feather
If you are a designer who wants to contribute to Lucide but you don't know what icons to work on, then have a look at the Requests from Feather. All open, unfinished and valid requests can be found in [Feather Icon Requests](https://github.com/lucide-icons/lucide/issues/119).
## Development
You will need minimum version of [Nodejs 16+](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).
After cloning the project you need to run:
```sh
yarn # Install dependencies, including the workspace packages
```
### Packages -> Yarn 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).
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**
### Generated Code
For icons we use one single source of truth the icons svgs located in the icons directory. To distribute icons to the packages we generate code including: icon files with svg paths, index files with imports, and types files. Depending on the use case other necessary code will be generated.
The commands for generating this code you will read in the next chapter.
### Commonly used scripts
#### Building
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
#example:
yarn lucide-react build
```
#### Testing
Run unit tests with jest for each package to make sure all the package apis still works as expected.
```sh
yarn [package-name] test
#example:
yarn lucide-vue test
```
Recommended to run the test watcher when making changes.
```sh
yarn [package-name] test:watch
#example:
yarn lucide-preact test:watch
```
### Unit Testing
When adding new features to for example the icon component for a framework. It is required to have this covered with some unit tests.
### 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.
```sh
# in packages/lucide-react
yarn link
# in your local project
yarn link lucide-react
```
## Project Structure
Root directories
```sh
lucide
|
├── docs
├── icons
├── packages
├── scripts
└── site
```
### Docs
Detailed documentation about: installation, guides, packages, design guides etc.
### Icons
All the icons of lucide in SVG format. These will be used as source for all the packages and other distributions for the lucide icons.
### packages
Includes all the (npm) packages of lucide.
> Note: One package is not managed by yarn: **lucide-flutter**
### scripts
Includes usefully scripts to automate certain jobs. Big part of the scripts is the template generation, for example it generates icon components for all the packages. These scripts are usually executed from the "scripts" section in the package.json.
### site
The lucide.dev website using [Nextjs](https://nextjs.org).
## Documentation
The documentation files are located in the [docs](./docs) directory. All these markdown files will be loaded in the build of the lucide.dev website.
Feel free to write, adjust or add new markdown files to improve our documentation.
## Support
If you need any help or have problems with you contribution. Please don't hesitate to contact the Lucide Community, you can find us on [Github](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
## Credits
Thank you to all the people who already contributed to Lucide!
<a href="https://github.com/lucide-icons/lucide/graphs/contributors">
<img src="https://opencollective.com/lucide-icons/contributors.svg?width=890" /></a>
If the icon has not already been requested, [create an issue](https://github.com/featherity/featherity/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.

View File

@@ -1,6 +1,6 @@
ISC License
Copyright (c) 2020, Lucide Contributors
Copyright (c) 2020, Featherity Contributors
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above

224
README.md
View File

@@ -1,219 +1,91 @@
<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
# Featherity
# 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?
## What is Featherity?
Lucide is a 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.
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 and hope that you'll join us!
### 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.
- Well maintained code base.
- Active community.
Featherity is a fork of [Feather Icons](https://github.com/feathericons/feather), with icons sourced by the community.
## Table of Contents
* [Installation](#installation)
* [Package managers](#package-managers)
* [CDN](#cdn)
* [Usage](#usage)
* [Web](#web)
* [React](#react)
* [React Native](#react-native)
* [Vue 2](#vue-2)
* [Vue 3](#vue-3)
* [Angular](#angular)
* [Preact](#preact)
* [Static](#static-svg-sprite-font-icons-)
* [Figma](#figma)
* [Laravel](#laravel)
* [Flutter](#flutter)
* [Contributing](#contributing)
* [Community](#community)
* [License](#license)
## Installation
``` bash
npm install featherity
#or
yarn add featherity
```
## Usage
At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web Implementation Options](https://svgontheweb.com/#implementation)
At its core, Featherity is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web Implementation Options](https://svgontheweb.com/#implementation)
The following are additional ways you can use Lucide.
With the Javascript library you can easily incorporate the icon you want in your webpage.
The following are additional ways you can use Featherity.
### Web
### ESModule
Implementation of the lucide icon library for web applications.
``` js
import { Camera } from 'featherity';
// Returns HTMLElement
```sh
npm install lucide
#or
yarn add lucide
// Usage
document.appendChild(Camera);
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide#lucide).
### React
Implementation of the lucide icon library for react applications.
``` js
import { Camera } from 'featherity/react';
// Returns ReactComponent
```sh
yarn add lucide-react
// Usage
const App = () => {
return <Camera color="red" size={48}/>
};
# or
npm install lucide-react
export default App;
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react#lucide-react).
### Vue
### React Native
``` vue
<template>
<div id="app">
<Camera color="red" :size="48"/>
</div>
</template>
Implementation of the lucide icon library for React Native applications.
<script>
import { Camera } from 'featherity/vue';
```sh
yarn add lucide-react-native
# or
npm install lucide-react-native
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react-native#lucide-react-native).
### Vue 2
Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue
# or
npm install lucide-vue
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue).
### Vue 3
Implementation of the lucide icon library for vue applications.
```sh
yarn add lucide-vue-next
# or
npm install 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
npm install lucide-angular
```
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular#lucide-angular).
### Preact
Implementation of the lucide icon library for preact applications.
```sh
yarn add lucide-preact
# or
npm install 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 ..)
Assets:
[Font Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
[SVG Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)
NPM package
```sh
yarn add lucide-static
# or
npm install lucide-static
export default {
name: "App",
components: {
Camera
}
};
</script>
```
### Figma
The lucide figma plugin.
Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
<img width="420" src="https://www.figma.com/community/plugin/939567362549682242/thumbnail" alt="Figma Lucide Cover">
### Laravel
Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
```sh
composer require mallardduck/blade-lucide-icons
```
For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
### Flutter
Implementation of Lucide icon library for Flutter applications.
```sh
flutter pub add lucide_icons
```
For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
You can use the components from [this Figma file](https://www.figma.com/file/g0UipfQlRfGrntKPxZknM7/Featherity).
## Contributing
For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
For more info on how to contribute please see the [contribution guidelines](https://github.com/featherity/featherity/blob/master/CONTRIBUTING.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)
Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/featherity/featherity/blob/master/README.md)
## Community
Join the community on our [Discord](https://discord.gg/EH6nSts) server!
Do you want to join our community?
Join us in [discord](https://discord.gg/EH6nSts)!
## 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
Thank you to all the people who contributed to Lucide!
<a href="https://github.com/lucide-icons/lucide/graphs/contributors">
<img src="https://opencollective.com/lucide-icons/contributors.svg?width=890" /></a>
## Sponsors
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
<img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
</a>
Feather is licensed under the [ISC License](https://github.com/featherity/featherity/blob/master/LICENSE).

View File

@@ -1,6 +1,14 @@
module.exports = {
presets: ['@babel/env'],
// babelrcRoots: ['.', './packages/*'],
presets: [
[
'@babel/env',
{
loose: true,
modules: false,
},
],
],
// plugins: ['babel-plugin-add-import-extension'],
env: {
test: {
presets: ['@babel/env'],

View File

@@ -1,19 +0,0 @@
{
"arrows": [],
"brands": [],
"code": [],
"connectivity": ["airplay"],
"cursors": [],
"development": [],
"devices": ["alarm-clock"],
"file-system": [],
"layout": [],
"maths": ["activity"],
"multimedia": [],
"notifications": ["alert-circle", "alert-octagon", "alert-triangle"],
"nature": [],
"shopping": [],
"shapes": [],
"sports": [],
"text-edit": ["align-center","align-right","align-left","align-justify" ]
}

View File

@@ -1,44 +0,0 @@
---
title: Figma Template Guide
---
# Figma Template Guide
This guide shows the steps to setup Figma for creating icons that conform to the Featherity design guidelines.
## Setting Up The Frame
When you create a new document in Figma, the document. Each individual icon you want to create, has to be created in a separate frame.
To do this, create a frame of 24x24 pixels.
1. Click the frame button (or press `F`)
2. Draw a 24x24 frame (or edit it afterwards from the design window)
In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as `FRAME-NAME.svg`.
## Create your icon
To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma.
Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut `P`. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right.
Set the following:
1. Vector
1. Corner radius: 2px
2. Stroke
1. Stroke width: 2px
2. Stroke alignment: center
![Figma Stroke Options](images/figma-stroke-options.png)
## Export Your Icon
Once you have completed your icon, you can export it.
1. Select the frame
2. Open the *Export* tab on the right
3. Set the file type as SVG
4. Press export
That's it. You just made your first icon. Congratulations!
## Figma Tips
1. The [Icon Design Guidelines](ICON_DESIGN_GUIDE.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).

View File

@@ -1,82 +0,0 @@
---
title: Icon Design Guide
---
# Icon Design Principles
Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
## Summary of the rules we have
1. Icons must be designed on a **24 by 24 pixels** canvas.
2. Icons must have at least **1 pixel padding** within the canvas.
3. Icons must have a **stroke width of 2 pixels**.
4. Icons must use **round joins**.
5. Icons must use **round caps**.
6. Icons must use **centered strokes**.
7. Shapes (such as rectangles) in icons must have **border radius of 2 pixels**.
8. Distinct elements must have **2 pixels of spacing between each other**.
## The Rules Visualized
### 1. Icons must be designed on a 24 by 24 pixels canvas.
![24px-24px](images/24px-24px.png?raw=true "24px-24px")
### 2. Icons must have at least 1 pixel padding within the canvas.
![1px-padding](images/1px-padding.png?raw=true "1px-padding")
### 3. Icons must have a stroke width of 2 pixels.
![2px-stroke](images/2px-stroke.png?raw=true "2px-stroke")
### 4. Icons must use round joins.
![round-joints](images/round-joints.png?raw=true "round-joints")
### 5. Icons must use round caps.
![round-caps](images/round-caps.png?raw=true "round-caps")
### 6. Icons must use centered strokes.
![centered-strokes](images/centered-strokes.png?raw=true "centered-strokes")
### 7. Shapes (such as squares) in icons must have border radius of 2 pixels.
![2px-border-radius](images/2px-border-radius.png?raw=true "2px-border-radius")
### 8. Distinct elements must have 2 pixels of spacing between each other.
![2px-element-spacing](images/2px-element-spacing.png?raw=true "2px-element-spacing")
## Code Conventions
Before an icon is added to the library, we like to have readable and optimized svg code.
### Global Attributes
For each icon these attributes are applied, corresponding to the above rules.
```xml
<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"
>
<!-- SVGElements -->
</svg>
```
### Minify paths
Code of paths can get really big.
To reduce file size we like to minify the code.
We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths.

View File

@@ -1,31 +0,0 @@
---
title: Illustrator Template Guide
---
# Illustrator Template Guide
This Guide explains how to properly use the Adobe Illustrator Template for Lucide.
>Attention: Even though it is unlikely the template can be outdated or not 100% correct. Please check the Icon Design Guide before you start working with the template to ensure integrity with the Lucide icon pack.
## General Workflow
The Illustrator template is created following guidelines from the [Icon Design Guide](ICON_DESIGN_GUIDE.md).
**Workflow:**
1. Open the Document which can be found under __*/docs/templates/illustrator_template.ai*__ .
2. You can now remove the content from the example logo layer ("Draw") and start creating.
3. Verify that you follow the [Icon Design Guidelines](ICON_DESIGN_GUIDE.md).
4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid").
5. Export the file with the export menu under: `Export > Export As..` than safe the file as SVG. Select the following options in the SVG Options dialog:
![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/main/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).

View File

@@ -1,41 +0,0 @@
---
title: Icon Design Guide
---
# Inkscape Setup Guide
This guide shows the steps to setup Inkscape for creating icons that conform to the Featherity design
guidelines.
## Setting up The Canvas
When opening a new document, Inkscape will create a canvas of a default size. To change the size to 24x24:
1. Open the Document Properties dialog (File -> Document Properties).
2. On the “Page Size” tab, under “Custom Size” set the Units to `px` and set both Height and Width to 24.
![Setting Page Size](images/page-size.png?raw=true "Setting Page Size")
3. On the “Grid” tab, select `Rectangular Grid` and click “New Grid”.
![Setting Grid Properties](images/grid-1.png?raw=true "Setting Grid Properties")
4. Set the Grid Units to `px` and set Spacing X and Spacing Y both to 1.
![Setting Grid Properties](images/grid-2.png?raw=true "Setting Grid Properties")
5. Close the Document Properties dialog.
6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
## Setting up The Paths
1. Create a path or shape.
2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
![Stroke Style Properties](images/strokes.png?raw=true "Setting Grid Properties")
3. On the “Stroke Style” tab:
* Set Stroke Width to `2px`.
* Select the rounded join type.
* Select the rounded cap type.
4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
![Rectangle Radius Properties](images/corner-radius.png?raw=true "Rectangle Radius Properties")
## Saving A File
1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
![Save As](images/save-as.png?raw=true "Save as")
2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
![Optimize](images/optimize-settings.png?raw=true "Optimize")

View File

@@ -1,25 +0,0 @@
---
title: Comparison
---
# Comparison
## Lucide vs Feather Icons
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.
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.
### Why should I choose Lucide over Feather Icons?
- Lucide already expended the icon set by 130+ in less then a year. Lucide has over 500+ icon, feather sticks around 286 icons.
- Well maintained code base.
- Active community.
### Should I migrate to Lucide?
That depends if you're fine with the icons from feather icons. If that is the case, it is maybe not the effort worth it.
But if you keep wrestling and feel limited by the icons Feather provides you can consider to migrate.
We didn't remove any icons when we forked, but there are some icons renamed.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 184 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -1,23 +0,0 @@
---
title: Introduction
nextPage:
- comparison
- installation
---
# Introduction
An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
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).

View File

@@ -1,129 +0,0 @@
---
title: Installation
---
# Installation
## Web
Implementation of the lucide icon library for web applications.
```bash
npm install lucide
#or
yarn add lucide
```
For more details, see the [documentation](packages/lucide).
## React
Implementation of the lucide icon library for react applications.
```bash
yarn add lucide-react
# or
npm install lucide-react
```
For more details, see the [documentation](packages/lucide-react).
## Vue 2
Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-vue
# or
npm install lucide-vue
```
For more details, see the [documentation](packages/lucide-vue).
## Vue 3
Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-vue-next
# or
npm install lucide-vue-next
```
For more details, see the [documentation](packages/lucide-vue-next).
## Svelte
Implementation of the lucide icon library for vue applications.
```bash
yarn add lucide-svelte
# or
npm install lucide-svelte
```
For more details, see the [documentation](packages/lucide-svelte).
## Angular
```bash
yarn add lucide-angular
# or
npm install lucide-angular
```
For more details, see the [documentation](packages/lucide-angular).
## Preact
Implementation of the lucide icon library for preact applications.
```bash
yarn add lucide-preact
# or
npm install lucide-preact
```
For more details, see the [documentation](packages/lucide-preact).
## Figma
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")
## Laravel
Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
```bash
composer require mallardduck/blade-lucide-icons
```
For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
## Flutter
Implementation of Lucide icon library for Flutter applications.
```bash
flutter pub add lucide_icons
```
For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).

View File

@@ -1,164 +0,0 @@
# Lucide Angular
Implementation of the lucide icon library for angular applications.
## Installation
``` sh
yarn add lucide-angular
# or
npm install lucide-angular
```
## How to use
There are three ways for use this library.
### Method 1: createElement
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
``` html
<!-- app.component.html -->
<div id="lucide-icon"></div>
```
``` js
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { createElement } from 'lucide-angular';
import { Activity } from 'lucide-angular/icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(): void {
const div = document.getElementById('lucide-icon');
const elm = createElement(Activity);
elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
if (div) {
div.appendChild(elm);
}
}
}
```
### 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
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
``` 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
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
``` js
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LucideAngularModule } from 'lucide-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
LucideAngularModule.pick({ })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
``` xml
<!-- app.component.html -->
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
```
``` js
// app.component.ts
import { Component } from '@angular/core';
import { Airplay, Circle } from 'lucide-angular';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ico1 = Airplay;
ico2 = Circle;
}
```
## Notes
### Import all icons
In `Method 2`: import all icons in `app.module.ts` by:
``` js
import { icons } from 'lucide-angular/icons';
LucideAngularModule.pick(icons)
...
```
### Tags
You can use the following tags instead of `lucide-icon`:
- lucide-angular
- i-lucide
- span-lucide
All of the above are the same

View File

@@ -1,8 +0,0 @@
# lucide_icons
Lucide Icons ([lucide.dev](https://lucide.dev)) for Flutter. Visit the website for the full list of icons
## Example
```dart
Icon(LucideIcons.activity);
```

View File

@@ -1,79 +0,0 @@
---
title: Lucide Preact
---
# Lucide Preact
Implementation of the lucide icon library for preact applications.
## Installation
```sh
yarn add lucide-preact
# or
npm install lucide-preact
```
## How to use
It's build with ESmodules so it's completely threeshakable.
Each icon can be imported as a preact component.
### Example
You can pass additional props to adjust the icon.
``` js
import { Camera } from 'lucide-preact';
// Returns PreactComponent
// Usage
const App = () => {
return <Camera color="red" size={48}/>
};
export default App;
```
### Props
| name | type | default
| ------------ | -------- | --------
| `size` | *Number* | 24
| `color` | *String* | currentColor
| `strokeWidth`| *Number* | 2
### Custom props / svg attributes
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
``` js
// Usage
const App = () => {
return <Camera fill="red" stroke-linejoin="bevel"/>
};
```
> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
### One generic icon component
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.
#### Icon Component Example
``` js
import * as icons from 'lucide-preact';
const Icon = ({name, color, size}) => {
const LucideIcon = icons[name];
return <LucideIcon color={color} size={size} />
};
export default Icon;
```

View File

@@ -1,75 +0,0 @@
# 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
npm install lucide-react-native
```
## How to use
It's build with ESmodules so it's completely threeshakable.
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;
```

View File

@@ -1,73 +0,0 @@
# Lucide React
Implementation of the lucide icon library for react applications
## Installation
``` bash
yarn add lucide-react
# or
npm install lucide-react
```
## How to use
It's build with ESmodules so it's completely threeshakable.
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';
// 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;
```

View File

@@ -1,181 +0,0 @@
# Lucide Static
This package include the following lucide implementations:
- All svg files
- Javascript library containing strings of svgs.
- Icon fonts
- Svg sprite
## Why lucide-static?
This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
## Installation
## Package Managers
```sh
yarn add lucide-static
# or
npm install lucide-static
```
### CDN
``` html
<!-- Svg File -->
<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");
}
</style>
```
## Usage
Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
### SVG Files
#### Svg file as image
To use it in for example html:
``` html
<!-- Svg File -->
<img src="~lucide-static/icons/home.svg">
```
``` css
.home-icon {
background-image: url(~lucide-static/icons/home.svg)
}
```
Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
#### Svg file Inline
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'
// return string of a svg
```
### SVG Sprite
You may need additional loader for this.
```html
<!-- Icon Sprite, not recommended for production! -->
<img src="lucide-static/sprite.svg#home">
<!-- or -->
<svg
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<use href="#alert-triangle" />
</svg>
<svg>
...sprite svg
</svg>
```
If you'd prefer, you can use CSS to hold your base SVG properties
```css
.lucide-icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
```
and update the svg as follows
```svg
<svg
xmlns="http://www.w3.org/2000/svg"
class="lucide-icon"
>
<use
href="#alert-triangle"
/>
</svg>
<svg>
...sprite svg
</svg>
```
### Icon Font
```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')
```
> Note: Each icon name is in camelCase.
#### Example in node.js project
```js
const express = require('express')
const { messageSquare } = require('lucide-static/lib')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Lucide Icons</h1>
<p>This is a lucide icon ${messageSquare}</p>
</body>
</html>
`)
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
```

View File

@@ -1,89 +0,0 @@
# Lucide Svelte
Implementation of the lucide icon library for svelte applications.
## Installation
```bash
yarn add lucide-svelte
# or
npm install lucide-svelte
```
## How to use
All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
### Example
Default usage:
```html
<script>
import { Skull } from 'lucide-svelte'
</script>
<Skull/>
```
You can pass additional props to adjust the icon.
```html
<script>
import { Camera } from 'lucide-svelte'
</script>
<Camera />
```
### Available props
| 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)
### Example of custom props
```html
<script>
import { Phone } from 'lucide-svelte'
</script>
<Phone fill="#333"/>
```
This results a filled phone icon.
### One generic icon component
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 bundle your application,the build size will grow strongly. Because it will import all the icons.
#### Icon Component Example
``` html
<script>
import * as icons from "lucide-svelte";
export let name;
</script>
<svelte:component this={icons[name]} {...$$props}/>
```
##### Then you can use it like this
``` html
<script>
import LucideIcon from "./LucideIcon";
</script>
<LucideIcon name="Menu" />
```

View File

@@ -1,109 +0,0 @@
# Lucide Vue Next
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)
## Installation
**With yarn**
```bash
yarn add lucide-vue-next
```
**With npm**
```bash
npm install lucide-vue-next
```
## How to use
It's build with ESmodules so it's completely threeshakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` html
<template>
<Camera
color="red"
:size="32"
/>
</template>
<script>
// Returns Vue component
import { Camera } from 'lucide-vue-next';
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
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` html
<template>
<Camera fill="red" />
</template>
```
### One generic icon component
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.
#### Icon Component Example
``` html
<template>
<component :is="icon" />
</template>
<script>
import * as icons from "lucide-vue-next";
export default {
props: {
name: {
type: String,
required: true,
},
},
setup(props) {
const icon = computed(() => icons[props.name])
return { icon }
}
};
</script>
```
##### Then you can use it like this
``` html
<template>
<div id="app">
<Icon name="Airplay" />
</div>
</template>
```

View File

@@ -1,105 +0,0 @@
# Lucide Vue
Implementation of the lucide icon library for Vue applications.
> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](lucide-vue-next)
## Installation
```sh
yarn add lucide-vue
# or
npm install lucide-vue
```
## How to use
It's build with ESmodules so it's completely threeshakable.
Each icon can be imported as a vue component.
### Example
You can pass additional props to adjust the icon.
``` html
<template>
<Camera
color="red"
:size="32"
/>
</template>
<script>
// 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
### Custom props
You can also pass custom props that will be added in the svg as attributes.
``` html
<template>
<Camera fill="red" />
</template>
```
### One generic icon component
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.
#### Icon Component Example
``` html
<template>
<component :is="icon" />
</template>
<script>
import * as icons from "lucide-vue";
export default {
props: {
name: {
type: String,
required: true,
},
},
computed: {
icon() {
return icons[this.name];
},
},
};
</script>
```
##### Then you can use it like this
``` html
<template>
<div id="app">
<Icon name="Airplay" />
</div>
</template>
```

View File

@@ -1,120 +0,0 @@
# Lucide
Implementation of the lucide icon library for web applications.
## Installation
### Package Managers
``` bash
npm install lucide
#or
yarn add lucide
```
### CDN
``` html
<!-- Development version -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<!-- Production version -->
<script src="https://unpkg.com/lucide@latest"></script>
```
## Usage
### With unpkg
Here is a complete example with unpkg
```html
<!DOCTYPE html>
<body>
<i icon-name="volume-2" class="my-class"></i>
<i icon-name="x"></i>
<i icon-name="menu"></i>
<script src="https://unpkg.com/lucide@latest"></script>
<script>
lucide.createIcons();
</script>
</body>
```
### With ESModules
To reduce bundle size, lucide is built to be fully treeshakable.
The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
```html
<!-- Your HTML file -->
<i icon-name="menu"></i>
```
```js
import { createIcons, icons } from 'lucide';
// Caution, this will import all the icons and bundle them.
createIcons({icons});
// Recommended way, to include only the icons you need.
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
```
#### Additional Options
In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
Here is a full example:
```js
import { createIcons } from 'lucide';
createIcons({
attrs: {
class: ['my-custom-class', 'icon'],
'stroke-width': 1,
stroke: '#333',
},
nameAttr: 'icon-name', // attribute for the icon name.
});
```
#### Treeshake the library, only use the icons you use
```js
import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
createIcons({
icons: {
Menu,
ArrowRight,
Globe,
},
});
```
#### Custom Element binding
```js
import { createElement, Menu } from 'lucide';
const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
// set custom attributes with browser native functions
menuIcon.setAttribute('stroke', '#333');
menuIcon.classList.add('my-icon-class');
// Append HTMLElement in webpage
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);
```

File diff suppressed because one or more lines are too long

View File

@@ -1,17 +0,0 @@
<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="16" cy="4" r="1" />
<path d="m18 19 1-7-5.87.94" />
<path d="m5 8 3-3 5.5 3-2.21 3.1" />
<path d="M4.24 14.48c-.19.58-.27 1.2-.23 1.84a5 5 0 0 0 5.31 4.67c.65-.04 1.25-.2 1.8-.46" />
<path d="M13.76 17.52c.19-.58.27-1.2.23-1.84a5 5 0 0 0-5.31-4.67c-.65.04-1.25.2-1.8.46" />
</svg>

Before

Width:  |  Height:  |  Size: 504 B

View File

@@ -1,16 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 440 B

View File

@@ -1,18 +0,0 @@
<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 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
<path d="M5 3 2 6" />
<path d="m22 6-3-3" />
<path d="m6 19-2 2" />
<path d="m18 19 2 2" />
<path d="m9 13 2 2 4-4" />
</svg>

Before

Width:  |  Height:  |  Size: 390 B

View File

@@ -1,18 +0,0 @@
<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.87 6.87a8 8 0 1 0 11.26 11.26" />
<path d="M19.9 14.25A7.44 7.44 0 0 0 20 13a8 8 0 0 0-8-8 7.44 7.44 0 0 0-1.25.1" />
<path d="m22 6-3-3" />
<path d="m6 19-2 2" />
<path d="m2 2 20 20" />
<path d="M4 4 2 6" />
</svg>

Before

Width:  |  Height:  |  Size: 442 B

View File

@@ -11,8 +11,8 @@
>
<circle cx="12" cy="13" r="8" />
<path d="M12 9v4l2 2" />
<path d="M5 3 2 6" />
<path d="m22 6-3-3" />
<path d="m6 19-2 2" />
<path d="m18 19 2 2" />
<path d="M5 3L2 6" />
<path d="M22 6l-3-3" />
<path d="M6 19l-2 2" />
<path d="M18 19l2 2" />
</svg>

Before

Width:  |  Height:  |  Size: 370 B

After

Width:  |  Height:  |  Size: 372 B

View File

@@ -1,18 +0,0 @@
<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 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
<path d="M5 3 2 6" />
<path d="m22 6-3-3" />
<path d="m6 19-2 2" />
<path d="m18 19 2 2" />
<path d="M9 13h6" />
</svg>

Before

Width:  |  Height:  |  Size: 384 B

View File

@@ -1,19 +0,0 @@
<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 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
<path d="M5 3 2 6" />
<path d="m22 6-3-3" />
<path d="m6 19-2 2" />
<path d="m18 19 2 2" />
<path d="M12 10v6" />
<path d="M9 13h6" />
</svg>

Before

Width:  |  Height:  |  Size: 408 B

View File

@@ -1,14 +0,0 @@
<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="3" y="3" width="18" height="18" rx="2" ry="2" />
<polyline points="11 3 11 11 14 8 17 11 17 3" />
</svg>

Before

Width:  |  Height:  |  Size: 319 B

View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
<line x1="12" y1="9" x2="12" y2="13" />
<line x1="12" y1="17" x2="12.01" y2="17" />
</svg>

Before

Width:  |  Height:  |  Size: 385 B

After

Width:  |  Height:  |  Size: 400 B

View File

@@ -1,17 +0,0 @@
<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 12h20" />
<path d="M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4" />
<path d="M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4" />
<path d="M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1" />
<path d="M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1" />
</svg>

Before

Width:  |  Height:  |  Size: 457 B

View File

@@ -1,17 +0,0 @@
<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 2v20" />
<path d="M8 10H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h4" />
<path d="M16 10h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4" />
<path d="M8 20H7a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2h1" />
<path d="M16 14h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1" />
</svg>

Before

Width:  |  Height:  |  Size: 457 B

View File

@@ -9,7 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="18" y1="10" x2="6" y2="10" />
<line x1="21" y1="6" x2="3" y2="6" />
<line x1="17" y1="12" x2="7" y2="12" />
<line x1="19" y1="18" x2="5" y2="18" />
<line x1="21" y1="14" x2="3" y2="14" />
<line x1="18" y1="18" x2="6" y2="18" />
</svg>

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 374 B

View File

@@ -1,15 +0,0 @@
<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="4" y="2" width="6" height="16" rx="2" />
<rect x="14" y="9" width="6" height="9" rx="2" />
<path d="M22 22H2" />
</svg>

Before

Width:  |  Height:  |  Size: 336 B

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="4" width="16" height="6" rx="2" />
<rect x="9" y="14" width="9" height="6" rx="2" />
<path d="M22 22V2" />
</svg>

Before

Width:  |  Height:  |  Size: 336 B

View File

@@ -1,18 +0,0 @@
<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="4" y="5" width="6" height="14" rx="2" />
<rect x="14" y="7" width="6" height="10" rx="2" />
<path d="M17 22v-5" />
<path d="M17 7V2" />
<path d="M7 22v-3" />
<path d="M7 5V2" />
</svg>

Before

Width:  |  Height:  |  Size: 407 B

View File

@@ -1,16 +0,0 @@
<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="4" y="5" width="6" height="14" rx="2" />
<rect x="14" y="7" width="6" height="10" rx="2" />
<path d="M10 2v20" />
<path d="M20 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 361 B

View File

@@ -1,16 +0,0 @@
<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="4" y="5" width="6" height="14" rx="2" />
<rect x="14" y="7" width="6" height="10" rx="2" />
<path d="M4 2v20" />
<path d="M14 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 360 B

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="5" width="6" height="14" rx="2" />
<rect x="16" y="7" width="6" height="10" rx="2" />
<path d="M12 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 337 B

View File

@@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="5" width="6" height="14" rx="2" />
<rect x="12" y="7" width="6" height="10" rx="2" />
<path d="M22 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 337 B

View File

@@ -1,15 +0,0 @@
<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="6" y="5" width="6" height="14" rx="2" />
<rect x="16" y="7" width="6" height="10" rx="2" />
<path d="M2 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 336 B

View File

@@ -1,15 +0,0 @@
<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="9" y="7" width="6" height="10" rx="2" />
<path d="M4 22V2" />
<path d="M20 22V2" />
</svg>

Before

Width:  |  Height:  |  Size: 307 B

View File

@@ -1,16 +0,0 @@
<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="3" y="5" width="6" height="14" rx="2" />
<rect x="15" y="7" width="6" height="10" rx="2" />
<path d="M3 2v20" />
<path d="M21 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 360 B

View File

@@ -9,7 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="18" x2="21" y2="18" />
<line x1="21" y1="10" x2="3" y2="10" />
<line x1="21" y1="6" x2="3" y2="6" />
<line x1="21" y1="14" x2="3" y2="14" />
<line x1="21" y1="18" x2="3" y2="18" />
</svg>

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 374 B

View File

@@ -9,7 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="17" y1="10" x2="3" y2="10" />
<line x1="21" y1="6" x2="3" y2="6" />
<line x1="15" y1="12" x2="3" y2="12" />
<line x1="21" y1="14" x2="3" y2="14" />
<line x1="17" y1="18" x2="3" y2="18" />
</svg>

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 374 B

View File

@@ -9,7 +9,8 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="21" y1="10" x2="7" y2="10" />
<line x1="21" y1="6" x2="3" y2="6" />
<line x1="21" y1="12" x2="9" y2="12" />
<line x1="21" y1="14" x2="3" y2="14" />
<line x1="21" y1="18" x2="7" y2="18" />
</svg>

Before

Width:  |  Height:  |  Size: 332 B

After

Width:  |  Height:  |  Size: 374 B

View File

@@ -1,15 +0,0 @@
<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="4" y="6" width="6" height="16" rx="2" />
<rect x="14" y="6" width="6" height="9" rx="2" />
<path d="M22 2H2" />
</svg>

Before

Width:  |  Height:  |  Size: 335 B

View File

@@ -1,15 +0,0 @@
<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="6" y="14" width="9" height="6" rx="2" />
<rect x="6" y="4" width="16" height="6" rx="2" />
<path d="M2 2v20" />
</svg>

Before

Width:  |  Height:  |  Size: 335 B

View File

@@ -1,18 +0,0 @@
<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="5" y="14" width="14" height="6" rx="2" />
<rect x="7" y="4" width="10" height="6" rx="2" />
<path d="M22 7h-5" />
<path d="M7 7H1" />
<path d="M22 17h-3" />
<path d="M5 17H2" />
</svg>

Before

Width:  |  Height:  |  Size: 407 B

View File

@@ -1,16 +0,0 @@
<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="5" y="14" width="14" height="6" rx="2" />
<rect x="7" y="4" width="10" height="6" rx="2" />
<path d="M2 20h20" />
<path d="M2 10h20" />
</svg>

Before

Width:  |  Height:  |  Size: 361 B

View File

@@ -1,16 +0,0 @@
<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="5" y="14" width="14" height="6" rx="2" />
<rect x="7" y="4" width="10" height="6" rx="2" />
<path d="M2 14h20" />
<path d="M2 4h20" />
</svg>

Before

Width:  |  Height:  |  Size: 360 B

View File

@@ -1,15 +0,0 @@
<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="5" y="16" width="14" height="6" rx="2" />
<rect x="7" y="2" width="10" height="6" rx="2" />
<path d="M2 12h20" />
</svg>

Before

Width:  |  Height:  |  Size: 337 B

View File

@@ -1,15 +0,0 @@
<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="5" y="12" width="14" height="6" rx="2" />
<rect x="7" y="2" width="10" height="6" rx="2" />
<path d="M2 22h20" />
</svg>

Before

Width:  |  Height:  |  Size: 337 B

View File

@@ -1,15 +0,0 @@
<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="5" y="16" width="14" height="6" rx="2" />
<rect x="7" y="6" width="10" height="6" rx="2" />
<path d="M2 2h20" />
</svg>

Before

Width:  |  Height:  |  Size: 336 B

View File

@@ -1,15 +0,0 @@
<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="7" y="9" width="10" height="6" rx="2" />
<path d="M22 20H2" />
<path d="M22 4H2" />
</svg>

Before

Width:  |  Height:  |  Size: 307 B

View File

@@ -1,16 +0,0 @@
<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="5" y="15" width="14" height="6" rx="2" />
<rect x="7" y="3" width="10" height="6" rx="2" />
<path d="M2 21h20" />
<path d="M2 3h20" />
</svg>

Before

Width:  |  Height:  |  Size: 360 B

View File

@@ -1,18 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 386 B

View File

@@ -1,16 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 312 B

View File

@@ -1,14 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 423 B

View File

@@ -1,17 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="4" width="20" height="5" rx="2" />
<path d="M12 13v7" />
<path d="m9 16 3-3 3 3" />
<path d="M4 9v9a2 2 0 0 0 2 2h2" />
<path d="M20 9v9a2 2 0 0 1-2 2h-2" />
</svg>

Before

Width:  |  Height:  |  Size: 391 B

View File

@@ -9,7 +9,7 @@
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="4" width="20" height="5" rx="2" />
<path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9" />
<path d="M10 13h4" />
<polyline points="21 8 21 21 3 21 3 8" />
<rect x="1" y="3" width="22" height="5" />
<line x1="10" y1="12" x2="14" y2="12" />
</svg>

Before

Width:  |  Height:  |  Size: 339 B

After

Width:  |  Height:  |  Size: 340 B

View File

@@ -1,16 +0,0 @@
<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="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3" />
<path d="M3 11v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H7v-2a2 2 0 0 0-4 0Z" />
<path d="M5 18v2" />
<path d="M19 18v2" />
</svg>

Before

Width:  |  Height:  |  Size: 403 B

View File

@@ -1,13 +0,0 @@
<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 3h6v11h4l-7 7-7-7h4z" />
</svg>

Before

Width:  |  Height:  |  Size: 247 B

View File

@@ -1,13 +0,0 @@
<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="m3 12 7-7v4h11v6H10v4z" />
</svg>

Before

Width:  |  Height:  |  Size: 246 B

View File

@@ -1,13 +0,0 @@
<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 12-7-7v4H3v6h11v4z" />
</svg>

Before

Width:  |  Height:  |  Size: 246 B

View File

@@ -1,13 +0,0 @@
<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 21V10H5l7-7 7 7h-4v11z" />
</svg>

Before

Width:  |  Height:  |  Size: 249 B

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