feat: Add glasses icon (#149)

* feat: Add glasses icon

* Update icons/glasses.svg

Co-authored-by: Alexander Antonov <aantonov@131.ru>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

.github/ISSUE_TEMPLATE/icon_request.md

@@ -6,10 +6,13 @@ 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:

.github/workflows/ci.yml

@@ -0,0 +1,72 @@
+name: Continuous integration icons
+
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - icons/**
+
+jobs:
+  create-release:
+    if: github.repository == 'lucide-icons/lucide'
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Fetch tags
+        run: git fetch --tags
+
+      - name: Get latest tag
+        id: latest-tag
+        run: echo "::set-output name=LATEST_TAG::$(git tag --list 2>/dev/null | tail -n1 2>/dev/null)"
+
+      - name: Get yarn cache directory path
+        id: yarn_cache
+        run: echo "::set-output name=YARN_CACHE_DIR::$(yarn cache dir)"
+
+      - name: Get cached packaged
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn_cache.outputs.YARN_CACHE_DIR }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --pure-lockfile
+
+      - name: Create new version
+        id: new-version
+        run: echo "::set-output name=NEW_VERSION::$(.github/workflows/version-up.sh --patch)"
+
+      - 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: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
+        with:
+          tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
+          release_name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
+          body: ${{ steps.change-log.outputs.CHANGE_LOG }}
+

.github/workflows/font.yml

@@ -2,6 +2,7 @@ name: Build Lucide
 on:
   push:
     branches: [ master ]
+
   pull_request:
     branches: [ master ]
 
@@ -20,13 +21,9 @@ jobs:
     - name: Install FontForge
       run: sudo apt-get install zlib1g-dev fontforge
 
-    - name: Install NodeJS and Yarn
-      run: sudo apt-get install nodejs yarn
-
     - 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
@@ -36,7 +33,6 @@ jobs:
     - name: Clone woff2
       run: git clone --recursive https://github.com/google/woff2.git
 
-
     - name: Install woff2
       run: |
           cd woff2
@@ -47,16 +43,14 @@ jobs:
       run: sudo gem install fontcustom
 
     - name: Install "outline-stroke"
-      run: sudo yarn add svg-outline-stroke svgson
+      run: sudo yarn add svg-outline-stroke -W
 
     - name: "Outline SVG"
       run: mkdir converted_icons && node scripts/outline_svg.js
 
-
     - name: Build 'Lucide'
       run: echo "Building Lucide font" && fontcustom compile ./converted_icons -h -n Lucide -o build -F
 
-
     - name: Zip 'Lucide'
       run: zip -r Lucide.zip build
 

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Release to NPM
+name: Release Packages
 
 on:
   push:
@@ -6,94 +6,146 @@ on:
     - 'v*'
 
 jobs:
-  build-and-deploy:
+  pre-build:
     if: github.repository == 'lucide-icons/lucide'
-
     runs-on: ubuntu-latest
-
-    env:
-      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    outputs:
+      VERSION: ${{ steps.get_version.outputs.VERSION }}
+      YARN_CACHE_DIR: ${{ steps.yarn_cache.outputs.YARN_CACHE_DIR }}
 
     steps:
       - name: Get the version
         id: get_version
         run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\/\v}
 
+      - name: Get yarn cache directory path
+        id: yarn_cache
+        run: echo "::set-output name=YARN_CACHE_DIR::$(yarn cache dir)"
+
+  lucide:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
       - uses: actions/checkout@v2
+      - uses: actions/cache@v2
         with:
-          clean: true
+          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --pure-lockfile
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
 
-      # Build lucide
-      - name: Install Dependencies Lucide
+      - 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:
+          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
+      - uses: actions/cache@v2
+        with:
+          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
         run: yarn --pure-lockfile
 
-      - name: Build lucide package
-        run: yarn build
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
 
-      - name: Test lucide package
-        run: yarn test
-
-      # Build lucide-react
-      - name: Install Dependencies lucide-react
-        run: yarn --pure-lockfile
-        working-directory: packages/lucide-react
-
-      - name: Build lucide-react
-        run: yarn build
-        working-directory: packages/lucide-react
-
-      - name: Test lucide-react
-        run: yarn test
-        working-directory: packages/lucide-react
-
-      # Build lucide-vue
-      - name: Install Dependencies lucide-vue
-        run: yarn --pure-lockfile
-        working-directory: packages/lucide-vue
-
-      - name: Build lucide-vue
-        run: yarn build
-        working-directory: packages/lucide-vue
-
-      - name: Test lucide-vue
-        run: yarn test
-        working-directory: packages/lucide-vue
-
-      # Publish lucide
       - name: Set package.json version lucide
-        run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version
+        run: yarn workspace lucide-react version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
 
-      - name: publish lucide
-        run: yarn publish
+      - name: Build
+        run: yarn workspace lucide-react build
 
-      # Publish lucide-react
-      - name: Set package.json version lucide-react
-        run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version
-        working-directory: packages/lucide-react
+      - name: Test
+        run: yarn workspace lucide-react test
 
-      - name: publish lucide-react
-        run: yarn publish
-        working-directory: packages/lucide-react
+      - name: Publish
+        run: yarn workspace lucide-react publish
 
-      # Publish lucide-vue
-      - name: Set package.json version lucide-vue
-        run: yarn version --new-version ${{ steps.get_version.outputs.VERSION }} --no-git-tag-version
-        working-directory: packages/lucide-vue
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          path: packages/lucide-react/package.json
 
-      - name: publish lucide-vue
-        run: yarn publish
-        working-directory: packages/lucide-vue
+  lucide-vue:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12.x'
 
-      - name: Commit package.json
+      - uses: actions/cache@v2
+        with:
+          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --pure-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:
+          path: packages/lucide-vue/package.json
+
+  upload-package-jsons:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: [lucide, lucide-react, lucide-vue]
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/download-artifact@v2
+    - name: Commit package.jsons
       run: |
-          git add package.json
-          git add packages/lucide-react/package.json
-          git add packages/lucide-vue/package.json
+        git add packages/*/package.json
         git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
-            commit -m ":package: Bump version to ${{ steps.get_version.outputs.VERSION }}" --no-verify --quiet
-          git remote set-url --push origin https://lucide-bot:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY.git
+          commit -m ":package: Bump lucide package versions to ${{ needs.pre-build.outputs.VERSION }}" --no-verify --quiet
+        git remote set-url --push origin https://lucide-bot:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git
         git push origin HEAD:master
-

.github/workflows/version-up.sh

@@ -0,0 +1,284 @@
+#!/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 tag --list 2>/dev/null | tail -n1 2>/dev/null)
+  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

.gitignore

@@ -4,9 +4,9 @@
 node_modules
 dist
 build
-/lib
 sandbox
 stash
 coverage
 stats
 *.log
+packages/**/src/icons/*.js

CONTRIBUTING.md

@@ -12,6 +12,7 @@ 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 won’t make apparent.
 - __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
 - __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
@@ -38,4 +39,5 @@ Before creating an icon request, please search to see if someone has requested t
 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).

README.md

@@ -9,6 +9,15 @@
 ## What is Lucide?
 
 Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+Started after growing disaffection of the moderation of the [Feather Icons](https://github.com/feathericons/feather) project, with over 300+ open issues and over 100+ open PRs, this project is no longer maintained. The owner of the project stopped merging icons and want to keep the project like it now is. Hundreds of developers/designer wasted their time trying to contribute, what a shame.
+
+We're trying to expanding the icon set as much as possible while keeping it nice-looking, we do it as a community of devs and designers, join us!
+
+### Why choose Lucide over Feather Icons
+
+- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
+- Well maintained code base.
+- Active community.
 
 ## Table of Contents
 
@@ -16,38 +25,15 @@ Lucide is a community-run fork of [Feather Icons](https://github.com/feathericon
   * [Package managers](#package-managers)
   * [CDN](#cdn)
 * [Usage](#usage)
-  * [Unpkg](#with-unpkg)
-  * [ESModules](#with-esmodules)
-    * [Options](#additional-options)
-    * [Treeshake library](#treeshake-the-library-only-use-the-icons-you-use)
-    * [Custom binding](#custom-element-binding)
-  * [React](#with-react)
-  * [Vue](#with-vue)
+  * [Web](#web)
+  * [React](#react)
+  * [Vue](#vue)
+  * [Angular](#angular)
   * [Figma](#figma)
 * [Contributing](#contributing)
 * [Community](#community)
 * [License](#license)
 
-## 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
 
 At its core, Lucide 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)
@@ -55,104 +41,23 @@ At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files
 The following are additional ways you can use Lucide.
 With the Javascript library you can easily incorporate the icon you want in your webpage.
 
-### With unpkg
+### Web
 
-Here is a complete example with unpkg
+Implementation of the lucide icon library for web applications.
 
-```html
-<!DOCTYPE html>
-<body>
-  <i icon-name="volume-2" class="my-class"></i>
-  <i icon-name="x"></i>
-  <i icon-name="menu"></i>
+```sh
+npm install lucide
 
-  <script src="https://unpkg.com/lucide@latest"></script>
-  <script>
-    lucide.createIcons();
-  </script>
-</body>
+#or
+
+yarn add lucide
 ```
 
-### With ESModules
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide#lucide).
 
-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.
+### React
 
-```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', // atrribute 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);
-```
-
-### With React
-
-You can also use the Lucide library using the react package.
+Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
@@ -162,11 +67,11 @@ yarn add lucide-react
 npm install lucide-react
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/blob/master/packages/lucide-react/README.md).
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react).
 
-### With Vue
+### Vue
 
-You can also use the Lucide library using the Vue package.
+Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue
@@ -176,11 +81,27 @@ yarn add lucide-vue
 npm install lucide-vue
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/blob/master/packages/lucide-vue/README.md).
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue).
+
+### Angular
+
+```sh
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular/projects/lucide-angular#lucide-angular).
 
 ### Figma
 
-You can use the components from [this Figma file](https://www.figma.com/file/g0UipfQlRfGrntKPxZknM7/Featherity).
+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">
 
 ## Contributing
 
@@ -194,10 +115,10 @@ Join the community on our [Discord](https://discord.gg/EH6nSts) server!
 
 ## License
 
-Lucide is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
+Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).
+
+## Sponsors
 
-<p align="center">
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
   <img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>
-</p>

babel.config.js

@@ -1,13 +1,5 @@
 module.exports = {
-  presets: [
-    [
-      '@babel/env',
-      {
-        loose: true,
-        modules: false,
-      },
-    ],
-  ],
+  presets: ['@babel/env'],
   env: {
     test: {
       presets: ['@babel/env'],

icons/alarm-minus.svg

@@ -14,5 +14,5 @@
   <path d="M22 6l-3-3" />
   <path d="M6 19l-2 2" />
   <path d="M18 19l2 2" />
-  <path d="M8 13h8" />
+  <path d="M9 13h6" />
 </svg>

icons/alarm-plus.svg

@@ -14,6 +14,6 @@
   <path d="M22 6l-3-3" />
   <path d="M6 19l-2 2" />
   <path d="M18 19l2 2" />
-  <path d="M12 9v8" />
-  <path d="M8 13h8" />
+  <path d="M12 10v6" />
+  <path d="M9 13h6" />
 </svg>

icons/banknote.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect x="2" y="6" width="20" height="12" rx="2" />
+  <circle cx="12" cy="12" r="2" />
+  <path d="M6 12h.01M18 12h.01" />
+</svg>

icons/bitcoin.svg

@@ -0,0 +1,13 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042l-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893l-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042l.348-1.97M7.48 20.364l3.126-17.727" />
+</svg>

icons/bug.svg

@@ -0,0 +1,22 @@
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="8" height="14" x="8" y="6" rx="4" />
+  <path d="M19 7l-3 2" />
+  <path d="M5 7l3 2" />
+  <path d="M19 19l-3-2" />
+  <path d="M5 19l3-2" />
+  <path d="M20 13h-4" />
+  <path d="M4 13h4" />
+  <path d="M10 4l1 2" />
+  <path d="M14 4l-1 2" />
+</svg>

icons/clipboard-list.svg

@@ -0,0 +1,18 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" />
+  <path d="M15 2H9a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V3a1 1 0 00-1-1z" />
+  <path d="M12 11h4" />
+  <path d="M12 16h4" />
+  <path d="M8 11h.01" />
+  <path d="M8 16h.01" />
+</svg>

icons/cloud-drizzle.svg

@@ -9,11 +9,11 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="8" y1="19" x2="8" y2="21" />
-  <line x1="8" y1="13" x2="8" y2="15" />
-  <line x1="16" y1="19" x2="16" y2="21" />
-  <line x1="16" y1="13" x2="16" y2="15" />
-  <line x1="12" y1="21" x2="12" y2="23" />
-  <line x1="12" y1="15" x2="12" y2="17" />
-  <path d="M20 16.58A5 5 0 0018 7h-1.26A8 8 0 104 15.25" />
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M8 19v1" />
+  <path d="M8 14v1" />
+  <path d="M16 19v1" />
+  <path d="M16 14v1" />
+  <path d="M12 21v1" />
+  <path d="M12 16v1" />
 </svg>

icons/cloud-hail.svg

@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M16 14v2" />
+  <path d="M8 14v2" />
+  <path d="M16 20h0" />
+  <path d="M8 20h0" />
+  <path d="M12 16v2" />
+  <path d="M12 22h0" />
+</svg>

icons/cloud-lightning.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 16.9A5 5 0 0018 7h-1.26a8 8 0 10-11.62 9" />
-  <polyline points="13 11 9 17 15 17 11 23" />
+  <path d="M17.5 17a4.5 4.5 0 100-9h-1.8a7 7 0 10-10.3 8" />
+  <path d="M12 12l-3 5h5l-3 5" />
 </svg>

icons/cloud-off.svg

@@ -9,6 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M22.61 16.95A5 5 0 0018 10h-1.26a8 8 0 00-7.05-6M5 5a8 8 0 004 15h9a5 5 0 001.7-.3" />
-  <line x1="1" y1="1" x2="23" y2="23" />
+  <path d="M2 2l20 20" />
+  <path d="M10 5a7 7 0 015.7 5h1.8a4.5 4.5 0 014 6.5" />
+  <path d="M18.8 18.8c-.4.2-.8.2-1.3.2H9A7 7 0 015.8 5.8" />
 </svg>

icons/cloud-rain-wind.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M9.2 22l3-7" />
+  <path d="M9 13l-3 7" />
+  <path d="M17 13l-3 7" />
+</svg>

icons/cloud-rain.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="16" y1="13" x2="16" y2="21" />
-  <line x1="8" y1="13" x2="8" y2="21" />
-  <line x1="12" y1="15" x2="12" y2="23" />
-  <path d="M20 16.58A5 5 0 0018 7h-1.26A8 8 0 104 15.25" />
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M16 14v6" />
+  <path d="M8 14v6" />
+  <path d="M12 16v6" />
 </svg>

icons/cloud-snow.svg

@@ -9,11 +9,11 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M20 17.58A5 5 0 0018 8h-1.26A8 8 0 104 16.25" />
-  <line x1="8" y1="16" x2="8.01" y2="16" />
-  <line x1="8" y1="20" x2="8.01" y2="20" />
-  <line x1="12" y1="18" x2="12.01" y2="18" />
-  <line x1="12" y1="22" x2="12.01" y2="22" />
-  <line x1="16" y1="16" x2="16.01" y2="16" />
-  <line x1="16" y1="20" x2="16.01" y2="20" />
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M8 15h0" />
+  <path d="M8 19h0" />
+  <path d="M12 17h0" />
+  <path d="M12 21h0" />
+  <path d="M16 15h0" />
+  <path d="M16 19h0" />
 </svg>

icons/cloud.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z" />
+  <path d="M17.5 19a4.5 4.5 0 100-9h-1.8A7 7 0 109 19h8.5z" />
 </svg>

icons/code-2.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 16L22 12L18 8" />
+  <path d="M6 8L2 12L6 16" />
+  <path d="M14.5 4L9.5 20" />
+</svg>

icons/download-cloud.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="8 17 12 21 16 17" />
-  <line x1="12" y1="12" x2="12" y2="21" />
-  <path d="M20.88 18.09A5 5 0 0018 9h-1.26A8 8 0 103 16.29" />
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M12 12v9" />
+  <path d="M8 17l4 4 4-4" />
 </svg>

icons/droplets.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" />
+  <path d="M12.56 6.6A10.97 10.97 0 0014 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 01-11.91 4.97" />
+</svg>

icons/euro.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 10h12" />
+  <path d="M4 14h9" />
+  <path d="M19 6a7.7 7.7 0 00-5.2-2A7.9 7.9 0 006 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2" />
+</svg>

icons/file-input.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 22h14a2 2 0 002-2V7.5L14.5 2H6a2 2 0 00-2 2v4" />
+  <path d="M14 2v6h6" />
+  <path d="M2 15h10" />
+  <path d="M9 18l3-3-3-3" />
+</svg>

icons/file-output.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 22h14a2 2 0 002-2V7.5L14.5 2H6a2 2 0 00-2 2v4" />
+  <path d="M14 2v6h6" />
+  <path d="M2 15h10" />
+  <path d="M5 12l-3 3 3 3" />
+</svg>

icons/glasses.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="6" cy="15" r="4" />
+  <circle cx="18" cy="15" r="4" />
+  <path d="M14 15a2 2 0 00-2-2 2 2 0 00-2 2" />
+  <path d="M2.5 13L5 7c.7-1.3 1.4-2 3-2" />
+  <path d="M21.5 13L19 7c-.7-1.3-1.5-2-3-2" />
+</svg>

icons/haze.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5.2 6.2l1.4 1.4" />
+  <path d="M2 13h2" />
+  <path d="M20 13h2" />
+  <path d="M17.4 7.6l1.4-1.4" />
+  <path d="M22 17H2" />
+  <path d="M22 21H2" />
+  <path d="M16 13a4 4 0 00-8 0" />
+  <path d="M12 5V2.5" />
+</svg>

icons/indian-rupee.svg

@@ -0,0 +1,17 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 3h12" />
+  <path d="M6 8h12" />
+  <path d="M6 13l8.5 8" />
+  <path d="M6 13h3" />
+  <path d="M9 13c6.667 0 6.667-10 0-10" />
+</svg>

icons/jersey-pound.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 9.5V21m0-11.5L6 3m6 6.5L18 3" />
+  <path d="M6 15h12" />
+  <path d="M6 11h12" />
+</svg>

icons/languages.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="5" y1="8" x2="11" y2="14" />
+  <path d="M5 8l6 6" />
   <path d="M4 14l6-6 2-3" />
-  <line x1="2" y1="5" x2="14" y2="5" />
-  <line x1="7" y1="2" x2="8" y2="2" />
-  <path d="M22 21l-5-10-5 10" />
-  <line x1="14" y1="17" x2="20" y2="17" />
+  <path d="M2 5h12" />
+  <path d="M7 2h1" />
+  <path d="M22 22l-5-10-5 10" />
+  <path d="M14 18h6" />
 </svg>

icons/layout-template.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 3H3v7h18V3z" />
+  <path d="M21 14h-5v7h5v-7z" />
+  <path d="M12 14H3v7h9v-7z" />
+</svg>

icons/lightbulb-off.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 18h6" />
+  <path d="M10 22h4" />
+  <path d="M2 2l20 20" />
+  <path d="M8.91 14a4.61 4.61 0 00-1.41-2.5C6.23 10.23 6 9 6 8a6 6 0 01.084-1M9 2.804A6 6 0 0118 8a4.651 4.651 0 01-1.031 3" />
+</svg>

icons/loader-2.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 12a9 9 0 11-6.219-8.56" />
+</svg>

icons/mouse-pointer-click.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 9l5 12 1.774-5.226L21 14 9 9z" />
+  <path d="M16.071 16.071l4.243 4.243" />
+  <path d="M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
+</svg>

icons/pound-sterling.svg

@@ -0,0 +1,16 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18 7c0-5.333-8-5.333-8 0" />
+  <path d="M10 7v14" />
+  <path d="M6 21h12" />
+  <path d="M6 13h10" />
+</svg>

icons/power-off.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M18.36 6.64A9 9 0 0120.77 15M5.63 6.64A9 9 0 1018.706 19" />
+  <path d="M12 2v4" />
+  <path d="M2 2l20 20" />
+</svg>

icons/redo.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="22 10 22 16 16 16" />
-  <path d="M1.994 16c1.813-6.542 9.559-9.482 15.36-4.36l4.64 4.36" />
+  <path d="M21 7v6h-6" />
+  <path d="M3 17a9 9 0 019-9 9 9 0 016 2.3l3 2.7" />
 </svg>

icons/russian-ruble.svg

@@ -0,0 +1,17 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M14 11c5.333 0 5.333-8 0-8" />
+  <path d="M6 11h8" />
+  <path d="M6 15h8" />
+  <path d="M9 21V3" />
+  <path d="M9 3h5" />
+</svg>

icons/star-half.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 17.8L5.8 21 7 14.1 2 9.3l7-1L12 2" />
+</svg>

icons/sun.svg

@@ -9,13 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="12" cy="12" r="5" />
-  <line x1="12" y1="1" x2="12" y2="3" />
-  <line x1="12" y1="21" x2="12" y2="23" />
-  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-  <line x1="1" y1="12" x2="3" y2="12" />
-  <line x1="21" y1="12" x2="23" y2="12" />
-  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" />
+  <path d="M12 20v2" />
+  <path d="M5 5l1.5 1.5" />
+  <path d="M17.5 17.5L19 19" />
+  <path d="M2 12h2" />
+  <path d="M20 12h2" />
+  <path d="M5 19l1.5-1.5" />
+  <path d="M17.5 6.5L19 5" />
 </svg>

icons/sunrise.svg

@@ -9,12 +9,12 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 18a5 5 0 00-10 0" />
-  <line x1="12" y1="2" x2="12" y2="9" />
-  <line x1="4.22" y1="10.22" x2="5.64" y2="11.64" />
-  <line x1="1" y1="18" x2="3" y2="18" />
-  <line x1="21" y1="18" x2="23" y2="18" />
-  <line x1="18.36" y1="11.64" x2="19.78" y2="10.22" />
-  <line x1="23" y1="22" x2="1" y2="22" />
-  <polyline points="8 6 12 2 16 6" />
+  <path d="M12 2v8" />
+  <path d="M5.2 11.2l1.4 1.4" />
+  <path d="M2 18h2" />
+  <path d="M20 18h2" />
+  <path d="M17.4 12.6l1.4-1.4" />
+  <path d="M22 22H2" />
+  <path d="M8 6l4-4 4 4" />
+  <path d="M16 18a4 4 0 00-8 0" />
 </svg>

icons/sunset.svg

@@ -9,12 +9,12 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 18a5 5 0 00-10 0" />
-  <line x1="12" y1="9" x2="12" y2="2" />
-  <line x1="4.22" y1="10.22" x2="5.64" y2="11.64" />
-  <line x1="1" y1="18" x2="3" y2="18" />
-  <line x1="21" y1="18" x2="23" y2="18" />
-  <line x1="18.36" y1="11.64" x2="19.78" y2="10.22" />
-  <line x1="23" y1="22" x2="1" y2="22" />
-  <polyline points="16 5 12 9 8 5" />
+  <path d="M12 10V2" />
+  <path d="M5.2 11.2l1.4 1.4" />
+  <path d="M2 18h2" />
+  <path d="M20 18h2" />
+  <path d="M17.4 12.6l1.4-1.4" />
+  <path d="M22 22H2" />
+  <path d="M16 6l-4 4-4-4" />
+  <path d="M16 18a4 4 0 00-8 0" />
 </svg>

icons/swiss-franc.svg

@@ -0,0 +1,15 @@
+<svg
+  width="24"
+  height="24"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 21V3h8" />
+  <path d="M6 16h9" />
+  <path d="M10 9.5h7" />
+</svg>

icons/terminal-square.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M7 11l2-2-2-2" />
+  <path d="M11 13h4" />
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+</svg>

icons/thermometer-snowflake.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 12h10" />
+  <path d="M9 4v16" />
+  <path d="M3 9l3 3-3 3" />
+  <path d="M12 6L9 9 6 6" />
+  <path d="M6 18l3-3 1.5 1.5" />
+  <path d="M18 2a2 2 0 00-2 2v10.5a4 4 0 104 0V4a2 2 0 00-2-2z" />
+</svg>

icons/thermometer-sun.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 9a4 4 0 00-2 7.5" />
+  <path d="M12 3v2" />
+  <path d="M6.6 18.4l-1.4 1.4" />
+  <path d="M18 2a2 2 0 012 2v10.5a4 4 0 11-4 0V4c0-1.1.9-2 2-2z" />
+  <path d="M4 13H2" />
+  <path d="M6.6 7.6L5.2 6.2" />
+</svg>

icons/thermometer.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M14 14.76V3.5a2.5 2.5 0 00-5 0v11.26a4.5 4.5 0 105 0z" />
+  <path d="M12 2a2 2 0 00-2 2v10.5a4 4 0 104 0V4a2 2 0 00-2-2z" />
 </svg>

icons/undo.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="2 10 2 16 8 16" />
-  <path d="M22 16c-1.814-6.542-9.56-9.482-15.36-4.36L2 16" />
+  <path d="M3 7v6h6" />
+  <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13" />
 </svg>

icons/upload-cloud.svg

@@ -9,8 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="16 16 12 12 8 16" />
-  <line x1="12" y1="12" x2="12" y2="21" />
-  <path d="M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3" />
-  <polyline points="16 16 12 12 8 16" />
+  <path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
+  <path d="M12 12v9" />
+  <path d="M16 16l-4-4-4 4" />
 </svg>

icons/wind.svg

@@ -9,5 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9.59 4.59A2 2 0 1111 8H2m10.59 11.41A2 2 0 1014 16H2m15.73-8.27A2.5 2.5 0 1119.5 12H2" />
+  <path d="M17.7 7.7a2.5 2.5 0 111.8 4.3H2" />
+  <path d="M9.6 4.6A2 2 0 1111 8H2" />
+  <path d="M12.6 19.4A2 2 0 1014 16H2" />
 </svg>

netlify.toml

@@ -1,5 +0,0 @@
-[build]
-  base = "site/"
-  publish = "build/"
-  command = "yarn deploy"
-  ignore = "git diff --quiet origin/master HEAD ../icons ../site"

package.json

@@ -1,66 +1,64 @@
 {
-  "name": "lucide",
-  "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
-  "version": "0.13.0",
-  "license": "ISC",
-  "homepage": "https://lucide.dev",
-  "bugs": "https://github.com/lucide-icons/lucide/issues",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lucide-icons/lucide.git"
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "packages/*",
+      "site"
+    ],
+    "nohoist": [
+      "**/jest", "**/jest/**",
+      "**/jasmine", "**/jasmine/**",
+      "**/react", "**/react/**",
+      "**/testing-library__jest-dom", "**/testing-library__jest-dom/**",
+      "**/testing-library__react-hooks", "**/testing-library__react-hooks/**",
+      "**/react-dom", "**/react-dom/**",
+      "**/react-test-renderer", "**/react-test-renderer/**"
+    ]
   },
-  "amdName": "lucide",
-  "source": "build/lucide.js",
-  "main": "dist/cjs/lucide.js",
-  "main:umd": "dist/umd/lucide.js",
-  "module": "dist/esm/lucide.js",
-  "unpkg": "dist/umd/lucide.min.js",
-  "sideEffects": false,
   "scripts": {
-    "start": "babel-watch --watch src",
-    "clean": "rimraf dist && rimraf build",
-    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
-    "build:move": "cp -av src build",
-    "build:icons": "npx babel-node ./scripts/buildIcons.js --presets @babel/env",
-    "build:es": "babel build -d dist/esm",
-    "build:bundles": "rollup -c rollup.config.js",
-    "optimize": "npx babel-node ./scripts/optimizeSvgs.js --presets @babel/env",
-    "addtags": "npx babel-node ./scripts/addMissingKeysToTags.js --presets @babel/env",
-    "test": "jest"
+    "build": "yarn lucide build && yarn lucide-react build && yarn lucide-vue build",
+    "test": "yarn lucide build:icons && yarn lucide-react build:icons && yarn lucide-vue build:icons && jest",
+    "lucide": "yarn workspace lucide",
+    "lucide-angular": "yarn workspace lucide-angular",
+    "lucide-react": "yarn workspace lucide-react",
+    "lucide-vue": "yarn workspace lucide-vue",
+    "build:icons": "babel-node ./scripts/buildIcons.js --presets @babel/env",
+    "optimize": "babel-node ./scripts/optimizeSvgs.js --presets @babel/env",
+    "addtags": "babel-node ./scripts/addMissingKeysToTags.js --presets @babel/env",
+    "generate:changelog": "babel-node ./scripts/generateChangelog.js --presets @babel/env"
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.25.2",
     "@atomico/rollup-plugin-sizes": "^1.1.4",
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.11.1",
-    "@babel/node": "^7.10.5",
+    "@babel/node": "^7.13.10",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.0",
     "@rollup/plugin-babel": "^5.0.0",
-    "babel-jest": "^26.3.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@rollup/plugin-replace": "^2.4.1",
+    "babel-jest": "^26.6.3",
     "babel-plugin-add-import-extension": "^1.4.3",
-    "cheerio": "^1.0.0-rc.2",
     "core-js": "3",
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.5.0",
     "eslint-plugin-prettier": "^2.5.0",
-    "html-minifier": "^3.5.8",
-    "htmlparser2": "^4.1.0",
     "husky": "^4.3.6",
     "jest": "^26.4.2",
     "lint-staged": "^10.5.3",
     "minimist": "^1.2.5",
+    "node-fetch": "^2.6.1",
     "prettier": "1.17.1",
     "rollup": "^2.7.3",
-    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-license": "^2.0.0",
-    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-terser": "^5.2.0",
     "rollup-plugin-visualizer": "^4.1.0",
-    "svgo": "^1.3.2"
+    "svgo": "^1.3.2",
+    "svgson": "^4.1.0"
   },
   "husky": {
     "hooks": {

packages/lucide-angular/.gitignore

@@ -0,0 +1,51 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+.editorconfig
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+#npm-yarn
+package-lock.json
+yarn.lock

packages/lucide-angular/angular.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "lucide-angular": {
+      "projectType": "library",
+      "root": "projects/lucide-angular",
+      "sourceRoot": "projects/lucide-angular/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "projects/lucide-angular/tsconfig.lib.json",
+            "project": "projects/lucide-angular/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/lucide-angular/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/lucide-angular/src/test.ts",
+            "tsConfig": "projects/lucide-angular/tsconfig.spec.json",
+            "karmaConfig": "projects/lucide-angular/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/lucide-angular/tsconfig.lib.json",
+              "projects/lucide-angular/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "lucide-angular"
+}

packages/lucide-angular/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "lucide-angular",
+  "description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "version": "0.15.0",
+  "author": "SMAH1",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-vue"
+  },
+  "keywords": [
+    "Lucide",
+    "Angular",
+    "Feather",
+    "Icons",
+    "Icon",
+    "Feather Icons",
+    "Fontawesome",
+    "Font Awesome"
+  ],
+  "scripts": {
+    "build": "yarn clean && yarn build:js && yarn build:icons && yarn build:iconsindex && yarn build:ng",
+    "clean": "rm -rf dist && rm -rf projects/lucide-angular/build",
+    "build:js": "mkdir -p projects/lucide-angular/build && cp -av ../lucide/src/createElement.js projects/lucide-angular/build/",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-angular/projects/lucide-angular/build --templateSrc=../packages/lucide-angular/scripts/exportTemplate && for f in projects/lucide-angular/build/icons/*.js; do mv -- \"$f\" \"${f%.js}.ts\"; done",
+    "build:iconsindex": "yarn --cwd ../../ babel-node packages/lucide-angular/scripts/buildIconsIndex.js",
+    "build:ng": "ng build --prod",
+    "test:headless": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "dependencies": {
+    "@angular/common": "~11.2.6",
+    "@angular/compiler": "~11.2.6",
+    "@angular/core": "~11.2.6",
+    "@angular/platform-browser": "~11.2.6",
+    "@angular/platform-browser-dynamic": "~11.2.6",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1102.5",
+    "@angular/cli": "~11.2.5",
+    "@angular/compiler-cli": "~11.2.6",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.1.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^11.0.0",
+    "protractor": "~7.0.0",
+    "puppeteer": "^8.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.1.5"
+  }
+}

packages/lucide-angular/projects/lucide-angular/README.md

@@ -0,0 +1,191 @@
+# Lucide Angular
+
+Implementation of the lucide icon library for angular applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## 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`.
+
+``` xml
+<!-- app.component.html -->
+<div id="ico"></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('ico');
+    const elm = createElement(Activity);
+    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
+    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 } from 'lucide-angular';
+import { AlarmCheck, Edit } from 'lucide-angular/icons';  // or import other icons
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+``` css
+/* app.component.css */
+.myicon {
+  /* Be sure to set these values */
+  width: 48px;
+  height: 48px;
+  /* or other properties like `color`, `fill`, `stroke-width` */
+}
+```
+
+``` xml
+<!-- app.component.html -->
+<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
+<lucide-icon name="edit" class="myicon"></lucide-icon>
+```
+
+``` js
+// app.component.ts
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  
+}
+```
+
+### 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 { }
+```
+
+``` css
+/* app.component.css */
+.myicon {
+  /* Be sure to set these values */
+  width: 48px;
+  height: 48px;
+  /* or other properties like `color`, `fill`, `stroke-width` */
+}
+```
+
+``` 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/icons';
+
+@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

packages/lucide-angular/projects/lucide-angular/default-attributes.ts

@@ -5,7 +5,7 @@ export default {
   viewBox: '0 0 24 24',
   fill: 'none',
   stroke: 'currentColor',
-  strokeWidth: 2,
-  strokeLinecap: 'round',
-  strokeLinejoin: 'round',
+  'stroke-width': 2,
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
 };

packages/lucide-angular/projects/lucide-angular/icons-index.ts

@@ -0,0 +1,4 @@
+export * from './build/icons-index';
+
+import * as icons from './build/icons-index';
+export { icons };

packages/lucide-angular/projects/lucide-angular/icons/package.json

@@ -0,0 +1,7 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "../icons-index.ts"
+    }
+  }
+}

packages/lucide-angular/projects/lucide-angular/karma.conf.js

@@ -0,0 +1,51 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+process.env.CHROME_BIN = require('puppeteer').executablePath();
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/lucide-angular'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['ChromeHeadlessCI'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

packages/lucide-angular/projects/lucide-angular/lib-index.ts

@@ -0,0 +1,4 @@
+
+export * from './src/lib/lucide-angular.component';
+export * from './src/lib/lucide-angular.module';
+export * from './lucide';

packages/lucide-angular/projects/lucide-angular/lucide.ts

@@ -0,0 +1,10 @@
+export type IconNode = readonly [string, object];
+export type IconData = readonly [string, object, IconNode[] ];
+
+export declare const icons: { [key: string]: IconData };
+
+import { default as createElementTmp } from './build/createElement';
+
+export function createElement(ico: IconData): HTMLElement {
+    return createElementTmp(ico as any);
+}

packages/lucide-angular/projects/lucide-angular/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/lucide-angular",
+  "lib": {
+    "entryFile": "./lib-index.ts"
+  }
+}

packages/lucide-angular/projects/lucide-angular/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "lucide-angular",
+  "description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "version": "0.15.0",
+  "author": "SMAH1",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-vue"
+  },
+  "keywords": [
+    "Lucide",
+    "Angular",
+    "Feather",
+    "Icons",
+    "Icon",
+    "Feather Icons",
+    "Fontawesome",
+    "Font Awesome"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^11.2.6",
+    "@angular/core": "^11.2.6"
+  },
+  "dependencies": {
+    "tslib": "^2.0.0"
+  }
+}

packages/lucide-angular/projects/lucide-angular/src/lib/icons.provider.ts

@@ -0,0 +1,3 @@
+export class Icons {
+  constructor(private icons: object) {}
+}

packages/lucide-angular/projects/lucide-angular/src/lib/lucide-angular.component.spec.ts

@@ -0,0 +1,29 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LucideAngularModule } from './lucide-angular.module';
+
+import { LucideAngularComponent } from './lucide-angular.component';
+
+describe('LucideAngularComponent', () => {
+  let component: LucideAngularComponent;
+  let fixture: ComponentFixture<LucideAngularComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LucideAngularComponent ],
+      imports: [
+        LucideAngularModule.pick({ })
+      ],
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LucideAngularComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/lucide-angular/projects/lucide-angular/src/lib/lucide-angular.component.ts

@@ -0,0 +1,68 @@
+import { Component, ElementRef, Input, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
+import { Icons } from './icons.provider';
+import { createElement, IconData } from '../../lucide';
+
+@Component({
+  selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
+  template: `<ng-content></ng-content>`,
+  styles: [`
+    :host {
+      display: inline-block;
+      fill: none;
+      stroke: inherit;
+      stroke-width: inherit;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `]
+})
+export class LucideAngularComponent implements OnChanges {
+  @Input() name!: string;
+  @Input() img!: IconData;
+
+  constructor(
+    @Inject(ElementRef) private elem: ElementRef,
+    @Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
+    @Inject(Icons) private icons: Icons
+  ) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.name) {
+      // icons are provided as an array of objects because of "multi: true"
+      const icons = Object.assign({}, ...(this.icons as any as object[]));
+      const icoOfName = icons[this.toPascalCase(changes.name.currentValue)] || '';
+
+      if (!icoOfName) {
+        console.warn(
+          `Icon not found: ${changes.name.currentValue}\n` +
+          `Please check icon name or \'lucide icon list\'`
+        );
+      } else {
+        const icoElement = createElement(icoOfName);
+        icoElement.setAttribute('stroke-width', 'inherit');
+        icoElement.setAttribute('fill', 'inherit');
+        icoElement.removeAttribute('width');
+        icoElement.removeAttribute('height');
+
+        this.elem.nativeElement.innerHTML = '';
+        this.elem.nativeElement.append(icoElement);
+      }
+    }
+    else if (changes.img) {
+      const icoElement = createElement(changes.img.currentValue);
+      icoElement.setAttribute('stroke-width', 'inherit');
+      icoElement.setAttribute('fill', 'inherit');
+      icoElement.removeAttribute('width');
+      icoElement.removeAttribute('height');
+
+      this.elem.nativeElement.innerHTML = '';
+      this.elem.nativeElement.append(icoElement);
+    }
+
+    this.changeDetector.markForCheck();
+  }
+
+  toPascalCase(str: string): string {
+    return str.replace(/(\w)([a-z0-9]*)(_|-|\s*)/g, (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase());
+  }
+}

packages/lucide-angular/projects/lucide-angular/src/lib/lucide-angular.module.ts

@@ -0,0 +1,27 @@
+import { NgModule, ModuleWithProviders, Optional } from '@angular/core';
+import { LucideAngularComponent } from './lucide-angular.component';
+import { Icons } from './icons.provider';
+import { IconData  } from '../../lucide';
+
+@NgModule({
+  declarations: [LucideAngularComponent],
+  exports: [LucideAngularComponent]
+})
+export class LucideAngularModule {
+    constructor(@Optional() private icons: Icons) {
+        if (!this.icons) {
+            throw new Error(
+                `No icon provided. Make sure to use 'LucideAngularModule.pick({ ... })' when importing the module\n`
+            );
+        }
+    }
+
+    static pick(icons: { [key: string]: IconData }): ModuleWithProviders<LucideAngularModule> {
+        return {
+            ngModule: LucideAngularModule,
+            providers: [
+                { provide: Icons, multi: true, useValue: icons }
+            ]
+        };
+    }
+}

packages/lucide-angular/projects/lucide-angular/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

packages/lucide-angular/projects/lucide-angular/tsconfig.lib.json

@@ -0,0 +1,26 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

packages/lucide-angular/projects/lucide-angular/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

packages/lucide-angular/projects/lucide-angular/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

packages/lucide-angular/projects/lucide-angular/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "lib",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "",
+      "kebab-case"
+    ]
+  }
+}

packages/lucide-angular/scripts/buildIconsIndex.js

@@ -0,0 +1,39 @@
+import path from 'path';
+
+import {
+  writeFile,
+  resetFile,
+  appendFile,
+  readSvgDirectory,
+} from '../../../scripts/helpers';
+
+const TARGET_DIR = path.join(__dirname, '../projects/lucide-angular/build');
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+const TYPES_FILE_NAME = 'icons-index.ts';
+
+// Generates header of d.ts file include some types and functions
+const typeDefinitions = `\
+export type IconNode = readonly [string, object];
+export type IconData = readonly [string, object, IconNode[] ];
+
+export declare const icons: { [key: string]: IconData };
+
+// Generated icons
+`;
+
+resetFile(TYPES_FILE_NAME, TARGET_DIR);
+writeFile(typeDefinitions, TYPES_FILE_NAME, TARGET_DIR);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+svgFiles.forEach(svgFile => {
+  const kebab = path.basename(svgFile, '.svg');
+
+  appendFile(
+    `export * from './icons/${kebab}';\n`,
+    TYPES_FILE_NAME,
+    TARGET_DIR,
+  );
+});
+
+console.log(`Generated ${TYPES_FILE_NAME} file with`, svgFiles.length, 'icons');

packages/lucide-angular/scripts/exportTemplate.js

@@ -0,0 +1,10 @@
+export default ({ componentName, children }) => `
+import { IconData } from '../../lucide';
+import defaultAttributes from '../../default-attributes';
+
+export const ${componentName}: IconData  = [
+  'svg',
+  defaultAttributes,
+  ${JSON.stringify(children)}
+];
+`;

packages/lucide-angular/tsconfig.json

@@ -0,0 +1,31 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": true,
+    "downlevelIteration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowJs": true,
+    "paths": {
+      "lucide-angular": [
+        "dist/lucide-angular/lucide-angular",
+        "dist/lucide-angular"
+      ]
+    },
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "module": "es2020",
+    "lib": [
+      "es2018",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false
+  }
+}

packages/lucide-angular/tslint.json

@@ -0,0 +1,140 @@
+{
+  "extends": "tslint:recommended",
+  "rulesDirectory": [
+    "codelyzer"
+  ],
+  "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
+    "array-type": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
+    "deprecation": {
+      "severity": "warning"
+    },
+    "eofline": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
+    "max-classes-per-file": false,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-empty": false,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-switch-case-fall-through": true,
+    "no-var-requires": false,
+    "object-literal-key-quotes": [
+      true,
+      "as-needed"
+    ],
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
+    "typedef": [
+      true,
+      "call-signature"
+    ],
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
+    "component-class-suffix": true,
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true
+  }
+}

packages/lucide-figma/README.md

@@ -0,0 +1,25 @@
+# Lucide Figma plugin
+
+A Figma plugin for using Lucide Icons
+
+## Local development
+
+1. Install the dependencies
+
+   ```sh
+   yarn
+   ```
+
+2. Build the plugin
+
+   ```sh
+   yarn watch
+   ```
+
+3. Open the [Figma desktop app](https://www.figma.com/downloads/)
+
+4. Go to `Menu > Plugins > Development > New Plugin...`
+
+5. Choose `lucide/packages/lucide-figma/manifest.json`
+
+6. Run the plugin by going to `Menu > Plugins > Development > Lucide Icons`

packages/lucide-figma/figma.d.ts

@@ -0,0 +1,675 @@
+// Global variable with Figma's plugin API.
+declare const figma: PluginAPI
+declare const __html__: string
+
+interface PluginAPI {
+  readonly currentPage: PageNode
+
+  // Root of the current Figma document.
+  readonly root: DocumentNode
+
+  // API for accessing viewport information.
+  readonly viewport: ViewportAPI
+
+  // call this once your plugin is finished executing.
+  closePlugin(): void
+
+  // Command that the user chose through menu when launching the plugin.
+  readonly command: string
+
+  // Finds a node by its id. If not found, returns null.
+  getNodeById(id: string): BaseNode | null
+
+  // Finds a style by its id. If not found, returns null.
+  getStyleById(id: string): BaseStyle | null
+
+  // Access browser APIs and/or show UI to the user.
+  showUI(html: string, options?: ShowUIOptions): void
+  readonly ui: UIAPI
+
+  // Lets you store persistent data on the user's local machine
+  readonly clientStorage: ClientStorageAPI
+
+  // This value is returned when a property is in a "mixed" state.
+  // In order to check if a property is in a mixed state, always
+  // compare directly to this value. I.e.
+  // `if (node.cornerRadius === figma.mixed) { ... }`
+  mixed: symbol
+
+  // Creates new nodes. Nodes will start off inserted
+  // into the current page.
+  // To move them elsewhere use `appendChild` or `insertChild`
+  createRectangle(): RectangleNode
+  createLine(): LineNode
+  createEllipse(): EllipseNode
+  createPolygon(): PolygonNode
+  createStar(): StarNode
+  createVector(): VectorNode
+  createText(): TextNode
+  createBooleanOperation(): BooleanOperationNode
+  createFrame(): FrameNode
+  createComponent(): ComponentNode
+  createPage(): PageNode
+  createSlice(): SliceNode
+
+  // Creates styles. A style's id can be assigned to
+  // node properties like textStyleId, fillStyleId, etc.
+  createPaintStyle(): PaintStyle
+  createTextStyle(): TextStyle
+  createEffectStyle(): EffectStyle
+  createGridStyle(): GridStyle
+
+  // These let you insert stuff from the team library if you have the key
+  importComponentByKeyAsync(key: string): Promise<ComponentNode>
+  importStyleByKeyAsync(key: string): Promise<BaseStyle>
+
+  // Return all fonts currently supported for use with the "fontName" property
+  listAvailableFontsAsync(): Promise<Font[]>
+
+  // You must await the promise returned here before being able to use "fontName"
+  loadFontAsync(fontName: FontName): Promise<void>
+
+  // Creates node from an SVG string.
+  createNodeFromSvg(svg: string): FrameNode
+
+  // Creates an Image object using the provided file contents.
+  createImage(data: Uint8Array): Image
+
+  // Groups every node in `nodes` under a new group.
+  group(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): FrameNode
+
+  // Flattens every node in `nodes` into a single vector network.
+  flatten(nodes: ReadonlyArray<BaseNode>, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode
+}
+
+interface ClientStorageAPI {
+  // This stores information in the browser, not on the server. It's similar to localStorage, but is
+  // asynchronous, and allows storing objects, arrays, strings, numbers, booleans, null, undefined and Uint8Arrays.
+  getAsync(key: string): Promise<any | undefined>
+  setAsync(key: string, value: any): Promise<void>
+}
+
+type ShowUIOptions = {
+  visible?: boolean, // defaults to true
+  width?: number,    // defaults to 300
+  height?: number,   // defaults to 200
+}
+
+interface UIAPI {
+  show(): void
+  hide(): void
+  resize(width: number, height: number): void
+  close(): void
+
+  // Sends a message to the iframe.
+  postMessage(pluginMessage: any): void
+
+  // Registers a callback for messages sent by the iframe.
+  onmessage: ((pluginMessage: any) => void) | undefined
+}
+
+interface ViewportAPI {
+  center: { x: number, y: number }
+
+  // 1.0 means 100% zoom, 0.5 means 50% zoom.
+  zoom: number
+
+  // Adjust the viewport such that it shows the provided nodes.
+  scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>)
+}
+
+// manifest.json format
+interface ManifestJson {
+  // Name of the plugin.
+  name: string
+
+  // Version of the runtime that the plugin uses, e.g. '0.5.0'.
+  version: string
+
+  // The file name that contains the plugin code.
+  script: string
+
+  // The file name that contains the html code made available in script.
+  html?: string
+
+  // Shell command to be executed before the contents of the `html` and `script` files are read.
+  build?: string
+
+  // Menu items to show up in UI.
+  menu?: ManifestMenuItem[]
+}
+
+type ManifestMenuItem =
+  // Clickable menu item.
+  { name: string, command: string } |
+  // Separator
+  { separator: true } |
+  // Submenu
+  { name: string, menu: ManifestMenuItem[] }
+
+////////////////////////////////////////////////////////////////////////////////
+// Values
+
+// These are the top two rows of a 3x3 matrix. This is enough to represent
+// translation, rotation, and skew.
+type Transform = [
+  [number, number, number],
+  [number, number, number]
+]
+
+interface Vector {
+  readonly x: number
+  readonly y: number
+}
+
+interface RGB {
+  readonly r: number
+  readonly g: number
+  readonly b: number
+}
+
+interface RGBA {
+  readonly r: number
+  readonly g: number
+  readonly b: number
+  readonly a: number
+}
+
+interface FontName {
+  readonly family: string
+  readonly style: string
+}
+
+interface ArcData {
+  readonly startingAngle: number
+  readonly endingAngle: number
+  readonly innerRadius: number
+}
+
+interface ShadowEffect {
+  readonly type: "DROP_SHADOW" | "INNER_SHADOW"
+  readonly color: RGBA
+  readonly offset: Vector
+  readonly radius: number
+  readonly visible: boolean
+  readonly blendMode: BlendMode
+}
+
+interface BlurEffect {
+  readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR"
+  readonly radius: number
+  readonly visible: boolean
+}
+
+type Effect = ShadowEffect | BlurEffect
+
+type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE"
+
+interface Constraints {
+  readonly horizontal: ConstraintType
+  readonly vertical: ConstraintType
+}
+
+interface ColorStop {
+  readonly position: number
+  readonly color: RGBA
+}
+
+interface SolidPaint {
+  readonly type: "SOLID"
+  readonly color: RGB
+
+  readonly visible?: boolean
+  readonly opacity?: number
+}
+
+interface GradientPaint {
+  readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND"
+  readonly gradientTransform: Transform
+  readonly gradientStops: ReadonlyArray<ColorStop>
+
+  readonly visible?: boolean
+  readonly opacity?: number
+}
+
+interface ImagePaint {
+  readonly type: "IMAGE"
+  readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE"
+  readonly image: Image | null
+  readonly imageTransform?: Transform // setting for "CROP"
+  readonly scalingFactor?: number // setting for "TILE"
+
+  readonly visible?: boolean
+  readonly opacity?: number
+}
+
+type Paint = SolidPaint | GradientPaint | ImagePaint
+
+interface Guide {
+  readonly axis: "X" | "Y"
+  readonly offset: number
+}
+
+interface RowsColsLayoutGrid {
+  readonly pattern: "ROWS" | "COLUMNS"
+  readonly alignment: "MIN" | "STRETCH" | "CENTER"
+  readonly gutterSize: number
+
+  readonly count: number        // Infinity when "Auto" is set in the UI
+  readonly sectionSize?: number // Not set for alignment: "STRETCH"
+  readonly offset?: number      // Not set for alignment: "CENTER"
+
+  readonly visible?: boolean
+  readonly color?: RGBA
+}
+
+interface GridLayoutGrid {
+  readonly pattern: "GRID"
+  readonly sectionSize: number
+
+  readonly visible?: boolean
+  readonly color?: RGBA
+}
+
+type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid
+
+interface ExportSettingsImage {
+  format: "JPG" | "PNG"
+  contentsOnly?: boolean    // defaults to true
+  suffix?: string
+  constraint?: {            // defaults to unscaled ({ type: "SCALE", value: 1 })
+    type: "SCALE" | "WIDTH" | "HEIGHT"
+    value: number
+  }
+}
+
+interface ExportSettingsSVG {
+  format: "SVG"
+  contentsOnly?: boolean    // defaults to true
+  suffix?: string
+  svgOutlineText?: boolean  // defaults to true
+  svgIdAttribute?: boolean  // defaults to false
+  svgSimplifyStroke?: boolean // defaults to true
+}
+
+interface ExportSettingsPDF {
+  format: "PDF"
+  contentsOnly?: boolean    // defaults to true
+  suffix?: string
+}
+
+type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF
+
+type WindingRule = "NONZERO" | "EVENODD"
+
+interface VectorVertex {
+  readonly x: number
+  readonly y: number
+  readonly strokeCap?: StrokeCap
+  readonly strokeJoin?: StrokeJoin
+  readonly cornerRadius?: number
+  readonly handleMirroring?: HandleMirroring
+}
+
+interface VectorSegment {
+  readonly start: number
+  readonly end: number
+  readonly tangentStart?: Vector  // Defaults to { x: 0, y: 0 }
+  readonly tangentEnd?: Vector  // Defaults to { x: 0, y: 0 }
+}
+
+interface VectorRegion {
+  readonly windingRule: WindingRule
+  readonly loops: ReadonlyArray<ReadonlyArray<number>>
+}
+
+interface VectorNetwork {
+  readonly vertices: ReadonlyArray<VectorVertex>
+  readonly segments: ReadonlyArray<VectorSegment>
+  readonly regions?: ReadonlyArray<VectorRegion> // Defaults to []
+}
+
+interface VectorPath {
+  // Similar to the svg fill-rule
+  // "NONE" means an open path won't have a fill
+  readonly windingRule: WindingRule | "NONE"
+  readonly data: string
+}
+
+type VectorPaths = ReadonlyArray<VectorPath>
+
+interface NumberWithUnits {
+  readonly value: number
+  readonly units: "PIXELS" | "PERCENT"
+}
+
+type BlendMode =
+  "PASS_THROUGH" |
+  "NORMAL" |
+  "DARKEN" |
+  "MULTIPLY" |
+  "LINEAR_BURN" |
+  "COLOR_BURN" |
+  "LIGHTEN" |
+  "SCREEN" |
+  "LINEAR_DODGE" |
+  "COLOR_DODGE" |
+  "OVERLAY" |
+  "SOFT_LIGHT" |
+  "HARD_LIGHT" |
+  "DIFFERENCE" |
+  "EXCLUSION" |
+  "HUE" |
+  "SATURATION" |
+  "COLOR" |
+  "LUMINOSITY"
+
+interface Font {
+  fontName: FontName
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Mixins
+
+interface BaseNodeMixin {
+  readonly id: string
+  readonly parent: (BaseNode & ChildrenMixin) | null
+  name: string
+  visible: boolean
+  locked: boolean
+  removed: boolean
+  toString(): string
+  remove(): void
+
+  // Attach custom data to a node. Only your plugin will be able to read this.
+  getPluginData(key: string): string
+  setPluginData(key: string, value: string): void
+
+  // Attach custom data to a node. All plugins will be able to read this.
+  // Namespace is a string that must be at least 3 alphanumeric characters, and should
+  // be a name related to your plugin. This is a mandatory argument to avoid multiple
+  // multiple plugins adding keys like "data" and colliding with each other. Other
+  // plugins will still be able to read shared plugin data as long as they know the
+  // namespace you use.
+  getSharedPluginData(namespace: string, key: string): string
+  setSharedPluginData(namespace: string, key: string, value: string): void
+}
+
+interface ChildrenMixin {
+  // Sorted back-to-front. I.e. the top-most child is last in this array.
+  readonly children: ReadonlyArray<BaseNode>
+
+  // Adds to the end of the .children array. I.e. visually on top of all other
+  // children.
+  appendChild(child: BaseNode): void
+
+  insertChild(index: number, child: BaseNode): void
+  findAll(callback?: (node: BaseNode) => boolean): ReadonlyArray<BaseNode>
+  findOne(callback: (node: BaseNode) => boolean): BaseNode | null
+}
+
+interface LayoutMixin {
+  readonly absoluteTransform: Transform
+  relativeTransform: Transform
+  x: number // The same as "relativeTransform[0][2]"
+  y: number // The same as "relativeTransform[1][2]"
+  rotation: number // The angle of the x axis of "relativeTransform" in degrees. Returns values from -180 to 180.
+
+  readonly size: Vector
+  readonly width: number // The same as "size.x"
+  readonly height: number // The same as "size.y"
+
+  // Resizes the node. If children of the node has constraints, it applies those constraints
+  // width and height must be >= 0.01
+  resize(width: number, height: number): void
+
+  // Resizes the node. Children of the node are never resized, even if those children have
+  // constraints. width and height must be >= 0.01
+  resizeWithoutConstraints(width: number, height: number): void
+
+  constraints: Constraints
+}
+
+interface BlendMixin {
+  opacity: number
+  blendMode: BlendMode
+  isMask: boolean
+  effects: ReadonlyArray<Effect>
+  effectStyleId: string
+}
+
+interface FrameMixin {
+  backgrounds: ReadonlyArray<Paint>
+  layoutGrids: ReadonlyArray<LayoutGrid>
+  clipsContent: boolean
+  guides: ReadonlyArray<Guide>
+  gridStyleId: string
+  backgroundStyleId: string
+}
+
+type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL"
+type StrokeJoin = "MITER" | "BEVEL" | "ROUND"
+type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH"
+
+interface GeometryMixin {
+  fills: ReadonlyArray<Paint> | symbol // This can return figma.mixed on TEXT nodes
+  strokes: ReadonlyArray<Paint>
+  strokeWeight: number
+  strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
+  strokeCap: StrokeCap | symbol // This can return figma.mixed on VECTOR nodes if vertices have different strokeCap values
+  strokeJoin: StrokeJoin | symbol // This can return figma.mixed on VECTOR nodes if vertices have different strokeJoin values
+  dashPattern: ReadonlyArray<number>
+  fillStyleId: string | symbol // This can return figma.mixed on TEXT nodes
+  strokeStyleId: string
+}
+
+interface CornerMixin {
+  // This can return figma.mixed on VECTOR nodes if vertices have different cornerRadius values,
+  // and on RECTANGLE nodes if node.topLeftRadius etc has different values
+  cornerRadius: number | symbol
+
+  cornerSmoothing: number
+}
+
+interface ExportMixin {
+  exportSettings: ExportSettings[]
+  exportAsync(settings?: ExportSettings): Promise<Uint8Array> // Defaults to PNG format
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Nodes
+
+interface DocumentNode extends BaseNodeMixin, ChildrenMixin {
+  readonly type: "DOCUMENT"
+  clone(): DocumentNode // Note: this always throws an error
+}
+
+interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
+  readonly type: "PAGE"
+  clone(): PageNode // cloned node starts off inserted into current page
+
+  guides: ReadonlyArray<Guide>
+  selection: ReadonlyArray<BaseNode>
+}
+
+interface FrameNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, FrameMixin, LayoutMixin, ExportMixin {
+  readonly type: "FRAME" | "GROUP"
+  clone(): FrameNode // cloned node starts off inserted into current page
+}
+
+interface SliceNode extends BaseNodeMixin, LayoutMixin, ExportMixin {
+  readonly type: "SLICE"
+  clone(): SliceNode // cloned node starts off inserted into current page
+}
+
+interface RectangleNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "RECTANGLE"
+  clone(): RectangleNode // cloned node starts off inserted into current page
+  topLeftRadius: number
+  topRightRadius: number
+  bottomLeftRadius: number
+  bottomRightRadius: number
+}
+
+interface LineNode extends BaseNodeMixin, BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "LINE"
+  clone(): LineNode // cloned node starts off inserted into current page
+}
+
+interface EllipseNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "ELLIPSE"
+  clone(): EllipseNode // cloned node starts off inserted into current page
+  arcData: ArcData
+}
+
+interface PolygonNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "POLYGON"
+  clone(): PolygonNode // cloned node starts off inserted into current page
+  pointCount: number
+}
+
+interface StarNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "STAR"
+  clone(): StarNode // cloned node starts off inserted into current page
+  pointCount: number
+
+  // This is a percentage value from 0 to 1
+  innerRadius: number
+}
+
+interface VectorNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "VECTOR"
+  clone(): VectorNode // cloned node starts off inserted into current page
+  vectorNetwork: VectorNetwork
+  vectorPaths: VectorPaths
+  handleMirroring: HandleMirroring | symbol // This can return figma.mixed if vertices have different handleMirroring values
+}
+
+interface TextNode extends BaseNodeMixin, BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "TEXT"
+  clone(): TextNode // cloned node starts off inserted into current page
+  characters: string
+  textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED"
+  textAlignVertical: "TOP" | "CENTER" | "BOTTOM"
+  textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT"
+  paragraphIndent: number
+  paragraphSpacing: number
+  autoRename: boolean
+
+  // These properties can all return figma.mixed if the text has multiple values for the property
+  textStyleId: string | symbol
+  fontSize: number | symbol
+  fontName: FontName | symbol
+  textCase: "ORIGINAL" | "UPPER" | "LOWER" | "TITLE" | symbol
+  textDecoration: "NONE" | "UNDERLINE" | "STRIKETHROUGH" | symbol
+  letterSpacing: NumberWithUnits | symbol
+  lineHeight: NumberWithUnits | symbol
+}
+
+interface ComponentNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, FrameMixin, LayoutMixin, ExportMixin {
+  readonly type: "COMPONENT"
+  clone(): ComponentNode // cloned node starts off inserted into current page
+
+  createInstance(): InstanceNode // instance starts off inserted into current page
+  description: string
+  readonly remote: boolean
+  readonly key: string // The key to use with "importComponentByKeyAsync"
+}
+
+interface InstanceNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, FrameMixin, LayoutMixin, ExportMixin {
+  readonly type: "INSTANCE"
+  clone(): InstanceNode // cloned node starts off inserted into current page
+  masterComponent: ComponentNode
+}
+
+interface BooleanOperationNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
+  readonly type: "BOOLEAN_OPERATION"
+  clone(): BooleanOperationNode // cloned node starts off inserted into current page
+  booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE"
+}
+
+type BaseNode =
+  DocumentNode |
+  PageNode |
+  SliceNode |
+  FrameNode |
+  ComponentNode |
+  InstanceNode |
+  BooleanOperationNode |
+  VectorNode |
+  StarNode |
+  LineNode |
+  EllipseNode |
+  PolygonNode |
+  RectangleNode |
+  TextNode
+
+type NodeType =
+  "DOCUMENT" |
+  "PAGE" |
+  "SLICE" |
+  "FRAME" |
+  "GROUP" |
+  "COMPONENT" |
+  "INSTANCE" |
+  "BOOLEAN_OPERATION" |
+  "VECTOR" |
+  "STAR" |
+  "LINE" |
+  "ELLIPSE" |
+  "POLYGON" |
+  "RECTANGLE" |
+  "TEXT"
+
+////////////////////////////////////////////////////////////////////////////////
+// Styles
+type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID"
+
+interface BaseStyle {
+  // The string to uniquely identify a style by
+  readonly id: string
+  readonly type: StyleType
+  name: string // Note: setting this also sets "autoRename" to false on TextNodes
+  description: string
+  remote: boolean
+  readonly key: string // The key to use with "importStyleByKeyAsync"
+  remove(): void
+}
+
+interface PaintStyle extends BaseStyle {
+  type: "PAINT"
+  paints: ReadonlyArray<Paint>
+}
+
+interface TextStyle extends BaseStyle {
+  type: "TEXT"
+  fontSize: number
+  textDecoration: "NONE" | "UNDERLINE" | "STRIKETHROUGH"
+  fontName: FontName
+  letterSpacing: NumberWithUnits
+  lineHeight: NumberWithUnits
+  paragraphIndent: number
+  paragraphSpacing: number
+  textCase: "ORIGINAL" | "UPPER" | "LOWER" | "TITLE"
+}
+
+interface EffectStyle extends BaseStyle {
+  type: "EFFECT"
+  effects: ReadonlyArray<Paint>
+}
+
+interface GridStyle extends BaseStyle {
+  type: "GRID"
+  layoutGrids: ReadonlyArray<LayoutGrid>
+}
+
+////////////////////////////////////////////////////////////////////////////////
+// Other
+
+interface Image {
+  // Returns a unique hash for the image
+  readonly hash: string
+
+  // The contents of the image file
+  getBytesAsync(): Promise<Uint8Array>
+}

packages/lucide-figma/manifest.json

@@ -0,0 +1,7 @@
+{
+  "name": "Lucide Icons",
+  "id": "939567362549682242",
+  "api": "1.0.0",
+  "ui": "build/ui.html",
+  "main": "build/main.js"
+}

packages/lucide-figma/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "lucide-figma",
+  "version": "0.15.0",
+  "license": "ISC",
+  "private": true,
+  "main": "build/ui.js",
+  "scripts": {
+    "build": "webpack --mode=production",
+    "watch": "webpack --mode=development --watch"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.14",
+    "@types/react": "^16.8.23",
+    "@types/react-dom": "^16.8.4",
+    "css-loader": "^3.0.0",
+    "html-webpack-inline-source-plugin": "^0.0.10",
+    "html-webpack-plugin": "^3.2.0",
+    "lucide-react": "^0.15.0",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "style-loader": "^0.23.1",
+    "ts-loader": "^6.0.4",
+    "typescript": "^3.5.2",
+    "webpack": "^4.35.2",
+    "webpack-cli": "^3.3.5"
+  }
+}

packages/lucide-figma/src/components/icon-button.tsx

@@ -0,0 +1,44 @@
+import { jsx } from '@emotion/core'
+import theme from '../theme'
+import { renderToString } from 'react-dom/server'
+import { FC } from 'react';
+
+interface IconButtonProps {
+  name: string,
+  component: FC,
+}
+
+function IconButton({ name, component: IconComponent }: IconButtonProps) {
+  const onIconclick = () => {
+    const svg = renderToString(<IconComponent/>);
+
+    parent.postMessage({ pluginMessage: { name, svg }}, '*')
+  }
+
+  return (
+    <button
+      key={name}
+      aria-label={name}
+      onClick={onIconclick}
+      css={{
+        padding: theme.space[2],
+        color: '#333',
+        background: 'transparent',
+        border: 0,
+        borderRadius: theme.radii[1],
+        appearance: 'none',
+        outline: 0,
+        '&:hover': {
+          background: 'rgba(0, 0, 0, 0.06)',
+        },
+        '&:focus, &:active': {
+          boxShadow: `inset 0 0 0 2px ${theme.colors.blue}`,
+        },
+      }}
+    >
+      <IconComponent />
+    </button>
+  )
+}
+
+export default IconButton

packages/lucide-figma/src/components/search-icon.tsx

@@ -0,0 +1,24 @@
+import { createElement, forwardRef } from 'react'
+
+const SearchIcon = forwardRef((props: any, ref) => createElement(
+    'svg',
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 32,
+      height: 32,
+      clipRule: 'evenodd',
+      fillRule: 'evenodd',
+      ref,
+      ...props,
+    },
+    [
+      createElement(
+        'path', {
+          d: 'm20 15c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5zm-1.1256 4.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072z',
+          key: 'path'
+        }
+      )
+    ]
+  ))
+
+export default SearchIcon

packages/lucide-figma/src/components/search-input.tsx

@@ -0,0 +1,43 @@
+import { jsx } from '@emotion/core'
+import theme from '../theme'
+import SearchIcon from './search-icon'
+interface SearchInputProps extends React.HTMLProps<HTMLDivElement> {
+  value: string,
+  iconCount: number,
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+function SearchInput({ value, onChange, iconCount, ...props }: SearchInputProps) {
+  return (
+    <div css={{ position: 'relative' }} {...props}>
+      <div
+        css={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          padding: theme.space[1],
+        }}
+      >
+        <SearchIcon fill="#333" />
+      </div>
+      <input
+        autoFocus
+        type="search"
+        value={value}
+        onChange={onChange}
+        placeholder={`Search ${iconCount} icons`}
+        css={{
+          width: '100%',
+          height: 40,
+          padding: `0 ${theme.space[4]} 0 36px`,
+          fontFamily: 'inherit',
+          fontSize: theme.fontSizes[0],
+          border: 0,
+          outline: 0,
+        }}
+      />
+    </div>
+  )
+}
+
+export default SearchInput

packages/lucide-figma/src/helpers/naming.ts

@@ -0,0 +1,21 @@
+
+/**
+ * Converts string to camelcase
+ *
+ * @param {string} string
+ */
+export const toCamelCase = (string: string) =>
+  string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
+    p2 ? p2.toUpperCase() : p1.toLowerCase(),
+  );
+
+/**
+ * Converts string to PascalCase
+ *
+ * @param {string} string
+ */
+export const toPascalCase = (string: string) => {
+  const camelCase = toCamelCase(string);
+
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};

packages/lucide-figma/src/main.ts

@@ -0,0 +1,9 @@
+figma.showUI(__html__, { width: 300, height: 400 })
+
+figma.ui.onmessage = ({name, svg}) => {
+  const icon = figma.createNodeFromSvg(svg)
+  icon.name = name
+  icon.x = figma.viewport.center.x
+  icon.y = figma.viewport.center.y
+  figma.currentPage.selection = [icon]
+}

packages/lucide-figma/src/theme.ts

@@ -0,0 +1,8 @@
+export default {
+  space: [0, 4, 8, 12, 16],
+  fontSizes: [12, 14, 16],
+  colors: {
+    blue: '#18a0fb',
+  },
+  radii: [0, 2],
+}

packages/lucide-figma/src/types/lucide-react.ts

@@ -0,0 +1,4 @@
+declare module 'lucide-react';
+declare module 'lucide';
+declare module 'lucide/icons';
+declare module 'lucide/build/icons';

packages/lucide-figma/src/ui.css

@@ -0,0 +1,10 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9')
+      format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9')
+      format('woff');
+}

packages/lucide-figma/src/ui.html

@@ -0,0 +1 @@
+<div id="root"></div>

packages/lucide-figma/src/ui.tsx

@@ -0,0 +1,82 @@
+import { Global, jsx } from '@emotion/core'
+import { version } from '../package.json'
+import React, { useMemo } from 'react'
+import ReactDOM from 'react-dom'
+import IconButton from './components/icon-button'
+import SearchInput from './components/search-input'
+import theme from './theme'
+import './ui.css'
+import tags from '../../../tags.json'
+import * as iconComponents from 'lucide-react'
+import { toPascalCase } from './helpers/naming';
+import useSearch from '../../../site/src/lib/useSearch';
+
+declare var ICONS: [];
+
+function App() {
+  const [query, setQuery] = React.useState('')
+  const icons = ICONS.map(name => {
+    const componentName = toPascalCase(name);
+    return {
+      name,
+      tags: tags[name] || [],
+      component: iconComponents[componentName] || null
+    }
+  }).filter(({component}) => !!component)
+
+  const searchResults = useMemo(() => useSearch(icons, query), [icons, query])
+
+  return (
+    <div>
+      <Global
+        styles={{ body: { margin: 0, fontFamily: 'Inter, sans-serif' } }}
+      />
+      <SearchInput
+        value={query}
+        iconCount={icons.length}
+        onChange={event => setQuery(event.target.value)}
+        css={{
+          position: 'sticky',
+          top: 0,
+          borderBottom: '1px solid #e5e5e5',
+          backfaceVisibility: 'hidden'
+        }}
+      />
+      <div css={{ padding: theme.space[2] }}>
+        <div
+          css={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(6, 1fr)',
+            gridGap: theme.space[1],
+          }}
+        >
+          {searchResults.map(({name, component: Icon} :any) => (
+            <IconButton
+              name={name}
+              key={name}
+              component={Icon}
+            />
+          ))}
+        </div>
+        <div
+          css={{
+            marginTop: theme.space[2],
+            padding: theme.space[2],
+            fontSize: theme.fontSizes[0],
+            color: 'rgba(0, 0, 0, 0.5)',
+          }}
+        >
+          <a
+            href="https://lucide.dev"
+            target="_blank"
+            css={{ color: 'inherit' }}
+          >
+            Lucide v{version}
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))

packages/lucide-figma/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "lib": ["dom", "esnext"],
+    "jsx": "react",
+    "jsxFactory": "jsx",
+    "resolveJsonModule": true,
+    "strict": true,
+    "allowJs": true,
+  },
+  "exclude": ["node_modules"],
+}

packages/lucide-figma/webpack.config.js

@@ -0,0 +1,48 @@
+const fs = require('fs');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+const webpack = require('webpack');
+
+module.exports = (env, argv) => ({
+  // This is necessary because Figma's 'eval' works differently than normal eval
+  devtool: argv.mode === 'production' ? false : 'inline-source-map',
+  entry: {
+    ui: './src/ui.tsx',
+    main: './src/main.ts',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'build'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      ICONS: JSON.stringify(
+        fs.readdirSync(path.join(process.cwd(), '../../icons')).map(name => name.split('.')[0]),
+      ),
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/ui.html',
+      filename: 'ui.html',
+      inlineSource: '.(js)$',
+      chunks: ['ui'],
+    }),
+    new HtmlWebpackInlineSourcePlugin(),
+  ],
+});