create wand icon (#351)

* create wand icon

* Update wand.svg

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

.github/workflows/ci.yml

@@ -71,4 +71,3 @@ jobs:
           tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
           name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
           body: ${{ steps.change-log.outputs.CHANGE_LOG }}
-

.github/workflows/close-stale-prs.yml

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

.github/workflows/font.yml

@@ -1,61 +0,0 @@
-name: Build Lucide
-on:
-  push:
-    branches: [ master ]
-
-  pull_request:
-    branches: [ master ]
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  Build:
-    runs-on: ubuntu-latest
-    steps:
-
-    - name: Clone 'Lucide'
-      uses: actions/checkout@v2
-
-    - name: Update repos
-      run: sudo apt-get update
-
-    - name: Install FontForge
-      run: sudo apt-get install zlib1g-dev fontforge
-
-    - name: Clone sfnt2woff-zopfli repo
-      run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
-
-    - name: Install and move sfnt2woff-zopfli
-      run: |
-          cd sfnt2woff-zopfli
-          make
-          sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
-
-    - name: Clone woff2
-      run: git clone --recursive https://github.com/google/woff2.git
-
-    - name: Install woff2
-      run: |
-          cd woff2
-          sudo make clean all
-          sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
-
-    - name: Install Font Custom dependency
-      run: sudo gem install fontcustom
-
-    - name: Install "outline-stroke"
-      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
-
-    - name: 'Upload to Artifacts'
-      uses: actions/upload-artifact@v1.0.0
-      with:
-        name: Lucide
-        path: build

.github/workflows/release.yml

@@ -3,21 +3,20 @@ name: Release Packages
 on:
   push:
     tags:
-    - 'v*'
+      - "v*"
 
   workflow_dispatch:
     inputs:
       version:
-        description: 'Version'
+        description: Version
         required: true
 
 jobs:
   pre-build:
-    if: github.repository == 'lucide-icons/lucide'
+    if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey"]', github.actor)
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.get_version.outputs.VERSION }}
-      YARN_CACHE_DIR: ${{ steps.yarn_cache.outputs.YARN_CACHE_DIR }}
 
     steps:
       - name: Get the version
@@ -28,25 +27,19 @@ jobs:
         env:
           VERSION_REF: ${{ github.event.inputs.version || github.ref }}
 
-      - 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
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          node-version: "14"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          cache: yarn
-          restore-keys: |
-            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn --pure-lockfile
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -75,15 +68,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          node-version: "14"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          cache: yarn
-          restore-keys: |
-            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn --pure-lockfile
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -112,19 +103,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '12.x'
+          node-version: "14"
-
+          cache: yarn
-      - 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
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -153,19 +138,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '12.x'
+          node-version: "14"
-
+          cache: yarn
-      - 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
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -194,15 +173,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          node-version: "14"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          cache: yarn
-          restore-keys: |
-            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn --pure-lockfile
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -231,15 +208,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          node-version: "14"
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          cache: yarn
-          restore-keys: |
-            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn --pure-lockfile
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -262,16 +237,156 @@ jobs:
           name: lucide-preact-package-json
           path: packages/lucide-preact/package.json
 
-  upload-package-jsons:
+  lucide-font:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: [pre-build, lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact]
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install FontForge
+        run: sudo apt-get install zlib1g-dev fontforge
+
+      - name: Clone sfnt2woff-zopfli repo
+        run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
+
+      - name: Install and move sfnt2woff-zopfli
+        run: |
+          cd sfnt2woff-zopfli
+          make
+          sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
+
+      - name: Clone woff2
+        run: git clone --recursive https://github.com/google/woff2.git
+
+      - name: Install woff2
+        run: |
+          cd woff2
+          sudo make clean all
+          sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
+
+      - name: Install Font Custom dependency
+        run: sudo gem install fontcustom
+
+      - name: Install
+        run: yarn --prefer-offline
+
+      - name: Build Icon Font
+        run: |
+          mkdir build
+          list=(-200 -300 "" -500 -600)
+          command=''
+          for name in "${list[@]}"
+          do
+            subcommand="(yarn build:outline-icons --outputDir=converted_icons${name} && fontcustom compile "./converted_icons${name}" -h -n "lucide${name}" -o ./build -F)"
+            if [ -z "$command" ]
+            then
+              command="$subcommand";
+            else
+              command="$command & $subcommand";
+            fi
+          done
+
+          eval $command
+
+      - name: "Upload to Artifacts"
+        uses: actions/upload-artifact@v1
+        with:
+          name: lucide-font
+          path: build
+
+  lucide-flutter:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: [pre-build, lucide-font]
+    container:
+      image: cirrusci/flutter:latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/download-artifact@v2
+      - uses: actions/cache@v2
+        with:
+          path: ~/.pub-cache
+          key: ${{ runner.os }}-pub-${{ hashFiles('~/.pub-cache') }}
+          restore-keys: |
+            ${{ runner.os }}-pub-
+
+      - name: Setup credentials
+        run: |
+          mkdir -p ~/.pub-cache
+          cat <<EOF > ~/.pub-cache/credentials.json
+          {
+            "accessToken": "${{ secrets.GOOGLE_OAUTH_ACCESS_TOKEN }}",
+            "refreshToken": "${{ secrets.GOOGLE_OAUTH_REFRESH_TOKEN }}",
+            "idToken": "${{ secrets.GOOGLE_OAUTH_ID_TOKEN }}",
+            "tokenEndpoint":"https://accounts.google.com/o/oauth2/token",
+            "scopes": [ "openid", "https://www.googleapis.com/auth/userinfo.email" ],
+            "expiration": 1629835569218
+          }
+          EOF
+
+      - name: Get packages
+        run: flutter pub get
+        working-directory: packages/lucide-flutter
+
+      - name: List lucide-font folder
+        run: ls lucide-font
+
+      - name: Copy assets from lucide-font directory
+        run: |
+          mkdir packages/lucide-flutter/assets
+          cp lucide-font/lucide.ttf packages/lucide-flutter/assets/lucide.ttf
+          cp lucide-font/lucide-preview.html packages/lucide-flutter/assets/lucide-preview.html
+
+      - name: Generate exports file
+        run: |
+          dart tool/generate_fonts.dart assets/lucide-preview.html
+          flutter format .
+        working-directory: packages/lucide-flutter
+
+      - name: Test
+        run: flutter test
+        working-directory: packages/lucide-flutter
+
+      - name: Update yaml
+        run: sed -E 's/(version:)[^\n]*/\1 ${{ needs.pre-build.outputs.VERSION }}/;' pubspec.yaml > pubspec && mv pubspec pubspec.yaml
+        working-directory: packages/lucide-flutter
+
+      - name: Flutter publish
+        run: flutter pub publish -f
+        working-directory: packages/lucide-flutter
+
+      - name: Upload pubspec.yaml
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-flutter-pubspec-yaml
+          path: packages/lucide-flutter/pubspec.yaml
+
+  post-release:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs:
+      [
+        pre-build,
+        lucide,
+        lucide-react,
+        lucide-vue,
+        lucide-vue-next,
+        lucide-angular,
+        lucide-preact,
+        lucide-flutter,
+        lucide-font,
+      ]
 
     steps:
       - uses: actions/checkout@v2
       - uses: actions/download-artifact@v2
 
-    - name: Commit package.jsons
+      - name: Commit package files
         run: |
           mv lucide-package-json/package.json packages/lucide/package.json
           mv lucide-react-package-json/package.json packages/lucide-react/package.json
@@ -279,11 +394,27 @@ jobs:
           mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
           mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
           mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
+          mv lucide-flutter-pubspec-yaml/pubspec.yaml packages/lucide-flutter/pubspec.yaml
 
       - name: Commit package.jsons
         run: |
-        git add packages/*/package.json
+          git add packages/*/package.json packages/lucide-flutter/pubspec.yaml
           git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
             commit -m ":package: Bump lucide package versions to ${{ needs.pre-build.outputs.VERSION }}" --no-verify --quiet
           git remote set-url --push origin https://lucide-bot:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git
           git push origin HEAD:master
+
+      - name: Zip font and icons
+        run: |
+          zip -r lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip lucide-font
+          zip -r lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip icons
+
+      - name: Release zip and fonts
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
+        with:
+          tag_name: v${{ needs.pre-build.outputs.VERSION }}
+          files: |
+            lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip
+            lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip

CONTRIBUTING.md

@@ -1,3 +1,4 @@
+
 # Contribution Guidelines
 
 :+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
@@ -22,8 +23,23 @@ Guidelines for pull requests:
 
 #### Guidelines
 
-Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide
+Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
-Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md)
+
+Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md).
+
+### Templates
+
+Here you can find templates and instructions on how to implement the guidelines with different programs.
+
+#### Adobe Illustrator
+
+`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`.
+`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`.
+
+#### Inkscape
+
+`Template`: None
+`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
 
 #### Submitting Mulitple Icons
 

README.md

@@ -17,7 +17,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
 
 ### 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.
+- Lucide already expanded the icon set by 130+ in less then a year, so more icons to work with.
 - Well maintained code base.
 - Active community.
 
@@ -34,6 +34,8 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
   * [Angular](#angular)
   * [Preact](#preact)
   * [Figma](#figma)
+  * [Laravel](#laravel)
+  * [Flutter](#flutter)
 * [Contributing](#contributing)
 * [Community](#community)
 * [License](#license)
@@ -111,7 +113,7 @@ yarn add lucide-angular
 npm install lucide-angular
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/packages/lucide-angular#lucide-angular).
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular#lucide-angular).
 
 ### Preact
 
@@ -135,6 +137,26 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
 
 <img width="420" src="https://www.figma.com/community/plugin/939567362549682242/thumbnail" alt="Figma Lucide Cover">
 
+### Laravel
+
+Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
+
+```sh
+composer require mallardduck/blade-lucide-icons
+```
+
+For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
+
+### Flutter
+
+Implementation of Lucide icon library for Flutter applications.
+
+```sh
+flutter pub add lucide_icons
+```
+
+For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
+
 ## Contributing
 
 For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).

docs/ICON_DESIGN_GUIDE.md

@@ -5,7 +5,7 @@ Here are rules that should be followed to keep quality and consistency when maki
 ## Summary of the rules we have
 
 1. Icons must be designed on a **24 by 24 pixels** canvas.
-2. Icons must have a **1 pixel padding** within the canvas.
+2. Icons must have at least **1 pixel padding** within the canvas.
 3. Icons must have a **stroke width of 2 pixels**.
 4. Icons must use **round joins**.
 5. Icons must use **round caps**.
@@ -19,7 +19,7 @@ Here are rules that should be followed to keep quality and consistency when maki
 
 ![24px-24px](images/24px-24px.png?raw=true "24px-24px")
 
-### 2. Icons must have a 1 pixel padding within the canvas.
+### 2. Icons must have at least 1 pixel padding within the canvas.
 
 ![1px-padding](images/1px-padding.png?raw=true "1px-padding")
 

docs/ILLUSTRATOR_GUIDE.md

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

docs/index.md

@@ -0,0 +1,116 @@
+---
+title: Introduction
+---
+
+# Introduction
+
+## What is Lucide?
+
+Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+
+It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+
+Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
+
+### Why choose Lucide over Feather Icons
+
+- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
+- Well maintained code base.
+- Active community.
+
+## Getting Started
+
+At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
+
+### Using Lucide packages
+
+### Web
+
+Implementation of the lucide icon library for web applications.
+
+```sh
+npm install lucide
+
+#or
+
+yarn add lucide
+```
+
+For more details, see the [documentation](lucide).
+
+### React
+
+Implementation of the lucide icon library for react applications.
+
+```sh
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+For more details, see the [documentation](lucide-react).
+
+### Vue 2
+
+Implementation of the lucide icon library for vue applications.
+
+```sh
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+For more details, see the [documentation](lucide-vue).
+
+### Vue 3
+
+Implementation of the lucide icon library for vue applications.
+
+```sh
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+For more details, see the [documentation](lucide-vue-next).
+
+### Angular
+
+```sh
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+For more details, see the [documentation](lucide-angular).
+
+### Preact
+
+Implementation of the lucide icon library for preact applications.
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+For more details, see the [documentation](lucide-preact).
+
+### Figma
+
+The lucide figma plugin.
+
+Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
+
+![Figma Lucide Cover](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+

docs/installation.md

@@ -0,0 +1,13 @@
+---
+title: Installation
+---
+
+# Installation
+
+Hello
+
+> hello
+
+```js
+console.log('asdadfasdf')
+```

docs/packages/lucide-angular.md

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

docs/packages/lucide-flutter.md

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

docs/packages/lucide-preact.md

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

docs/packages/lucide-react.md

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

docs/packages/lucide-vue-next.md

@@ -0,0 +1,105 @@
+# Lucide Vue Next
+
+Implementation of the lucide icon library for Vue 3 applications.
+
+> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue)
+
+## Installation
+
+```sh
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` vue
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from 'lucide-vue-next';
+
+export default {
+  name: "My Component",
+  components: { Camera }
+}
+
+</script>
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *String* | lucide-icon
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from "lucide-vue-next";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    },
+  },
+};
+</script>
+```
+
+##### Then you can use it like this
+
+``` vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

docs/packages/lucide-vue.md

@@ -0,0 +1,105 @@
+# Lucide Vue
+
+Implementation of the lucide icon library for Vue applications.
+
+> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next)
+
+## Installation
+
+```sh
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` vue
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from 'lucide-vue';
+
+export default {
+  name: "My Component",
+  components: { Camera }
+}
+
+</script>
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *String* | lucide-icon
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from "lucide-vue";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    },
+  },
+};
+</script>
+```
+
+##### Then you can use it like this
+
+``` vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

docs/packages/lucide.md

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

icons/alarm-clock-off.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"
+>
+  <path d="M19.94 14A8 8 0 0 0 10 5.25m8.13 12.89A8 8 0 1 1 6.87 6.86" />
+  <path d="m22 6-3-3" />
+  <path d="m6 19-2 2" />
+  <path d="m2 2 20 20" />
+  <path d="M4 4 2 6" />
+</svg>

icons/archive.svg

@@ -9,7 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="21 8 21 21 3 21 3 8" />
+  <path d="M20 9v9a2 2 0 01-2 2H6a2 2 0 01-2-2V9m16-5H4a2 2 0 00-2 2v1a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm-10 9h4" />
-  <rect x="1" y="3" width="22" height="5" />
-  <line x1="10" y1="12" x2="14" y2="12" />
 </svg>

icons/battery-charging.svg

@@ -9,7 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 7H3.78A1.73 1.73 0 002 8.67v6.66A1.73 1.73 0 003.78 17H6m8-10h2.22A1.73 1.73 0 0118 8.67v6.66A1.73 1.73 0 0116.22 17H13" />
+  <path d="M14 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-3" />
+  <path d="M7 7H4a2 2 0 00-2 2v6a2 2 0 002 2h2" />
   <polyline points="11 7 8 12 12 12 9 17" />
   <line x1="22" x2="22" y1="11" y2="13" />
 </svg>

icons/bookmark-minus.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="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
+  <line x1="15" x2="9" y1="10" y2="10" />
+</svg>

icons/bookmark-plus.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="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
+  <line x1="12" x2="12" y1="7" y2="13" />
+  <line x1="15" x2="9" y1="10" y2="10" />
+</svg>

icons/bookmark.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" />
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
 </svg>

icons/chevron-first.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"
+>
+  <polyline points="17 18 11 12 17 6" />
+  <path d="M7 6V18" />
+</svg>

icons/chevron-last.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"
+>
+  <polyline points="7 18 13 12 7 6" />
+  <path d="M17 6V18" />
+</svg>

icons/flag-triangle-left.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="M17 22V2L7 7l10 5" />
+</svg>

icons/flag-triangle-right.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="M7 22V2l10 5-10 5" />
+</svg>

icons/gem.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"
+>
+  <polygon points="6 3 18 3 22 9 12 22 2 9" />
+  <path d="M12 22l4-13-3-6" />
+  <path d="M12 22L8 9l3-6" />
+  <path d="M2 9h20" />
+</svg>

icons/graduation-cap.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="M22 10v6M2 10l10-5 10 5-10 5z" />
+  <path d="M6 12v5c3 3 9 3 12 0v-5" />
+</svg>

icons/import.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

icons/landmark.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"
+>
+  <line x1="3" y1="22" x2="21" y2="22" />
+  <line x1="6" y1="18" x2="6" y2="11" />
+  <line x1="10" y1="18" x2="10" y2="11" />
+  <line x1="14" y1="18" x2="14" y2="11" />
+  <line x1="18" y1="18" x2="18" y2="11" />
+  <polygon points="12 2 20 7 4 7" />
+</svg>

icons/list-minus.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="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M21 12h-6" />
+</svg>

icons/list-plus.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"
+>
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9V15" />
+  <path d="M21 12H15" />
+</svg>

icons/list-x.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"
+>
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M19 10l-4 4" />
+  <path d="M15 10l4 4" />
+</svg>

icons/megaphone.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="M3 11l18-5v12L3 14v-3z" />
+  <path d="M11.6 16.8a3 3 0 11-5.8-1.6" />
+</svg>

icons/mountain-snow.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="M8 3l4 8 5-5 5 15H2L8 3z" />
+  <path d="M4.14 15.08c2.62-1.57 5.24-1.43 7.86.42 2.74 1.94 5.49 2 8.23.19" />
+</svg>

icons/mountain.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="M8 3l4 8 5-5 5 15H2L8 3z" />
+</svg>

icons/piggy-bank.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="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2h0V5Z" />
+  <path d="M2 9v1c0 1.1.9 2 2 2h1"/>
+  <path d="M16 11h0" />
+</svg>

icons/quote.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="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" />
+  <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
+</svg>

icons/rocking-chair.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"
+>
+  <polyline points="3.5 2 6.5 12.5 18 12.5" />
+  <line x1="9.5" y1="12.5" x2="5.5" y2="20" />
+  <line x1="15" y1="12.5" x2="18.5" y2="20" />
+  <path d="M2.75 18a13 13 0 0018.5 0" />
+</svg>

icons/settings-2.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 7h-9" />
+  <path d="M14 17H5" />
+  <circle cx="17" cy="17" r="3" />
+  <circle cx="7" cy="7" r="3" />
+</svg>

icons/smartphone.svg

@@ -10,5 +10,5 @@
   stroke-linejoin="round"
 >
   <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
-  <line x1="12" y1="18" x2="12.01" y2="18" />
+  <path d="M12 18h.01" />
 </svg>

icons/sort-asc.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h10" />
+  <path d="M11 5h4" />
   <path d="M11 9h7" />
-  <path d="M11 13h4" />
+  <path d="M11 13h10" />
   <path d="M3 17l3 3 3-3" />
   <path d="M6 18V4" />
 </svg>

icons/sort-desc.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h4" />
+  <path d="M11 5h10" />
   <path d="M11 9h7" />
-  <path d="M11 13h10" />
+  <path d="M11 13h4" />
   <path d="M3 17l3 3 3-3" />
   <path d="M6 18V4" />
 </svg>

icons/timer-reset.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="M10 2h4" />
+  <path d="M12 14v-4" />
+  <path d="M4 13a8 8 0 018-7 8 8 0 11-5.3 14L4 17.6" />
+  <path d="M9 17H4v5" />
+</svg>

icons/twitter.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5 0-.28-.03-.56-.08-.83A7.72 7.72 0 0023 3z" />
 </svg>

icons/verified.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="M12 3a3.6 3.6 0 00-3.05 1.68 3.6 3.6 0 00-.9-.1 3.6 3.6 0 00-2.42 1.06 3.6 3.6 0 00-.94 3.32A3.6 3.6 0 003 12a3.6 3.6 0 001.69 3.05 3.6 3.6 0 00.95 3.32 3.6 3.6 0 003.35.96A3.6 3.6 0 0012 21a3.6 3.6 0 003.04-1.67 3.6 3.6 0 004.3-4.3A3.6 3.6 0 0021 12a3.6 3.6 0 00-1.67-3.04v0a3.6 3.6 0 00-4.3-4.3A3.6 3.6 0 0012 3z" />
+  <path d="M15 10l-4 4" />
+  <path d="M9 12l2 2" />
+</svg>

icons/wand.svg

@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 4V2" />
+  <path d="M15 16v-2" />
+  <path d="M8 9h2" />
+  <path d="M20 9h2" />
+  <path d="M17.8 11.8 19 13" />
+  <path d="M15 9h0" />
+  <path d="M17.8 6.2 19 5" />
+  <path d="M3 21 12 12" />
+  <path d="M12.2 6.2 11 5" />
+</svg>

package.json

@@ -5,13 +5,20 @@
       "packages/*"
     ],
     "nohoist": [
-      "**/jest", "**/jest/**",
+      "**/jest",
-      "**/jasmine", "**/jasmine/**",
+      "**/jest/**",
-      "**/react", "**/react/**",
+      "**/jasmine",
-      "**/testing-library__jest-dom", "**/testing-library__jest-dom/**",
+      "**/jasmine/**",
-      "**/testing-library__react-hooks", "**/testing-library__react-hooks/**",
+      "**/react",
-      "**/react-dom", "**/react-dom/**",
+      "**/react/**",
-      "**/react-test-renderer", "**/react-test-renderer/**"
+      "**/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/**"
     ]
   },
   "scripts": {
@@ -24,6 +31,7 @@
     "lucide-vue": "yarn workspace lucide-vue",
     "lucide-vue-next": "yarn workspace lucide-vue-next",
     "build:icons": "babel-node ./scripts/buildIcons.js --presets @babel/env",
+    "build:outline-icons": "babel-node ./scripts/outlineSvg.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"
@@ -68,5 +76,8 @@
   },
   "lint-staged": {
     "icons/*.svg": "npx babel-node ./scripts/optimizeStagedSvgs.js --presets @babel/env"
+  },
+  "dependencies": {
+    "svg-outline-stroke": "^1.3.1"
   }
 }

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
-  "description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for Angular applications",
-  "version": "0.15.25",
+  "version": "0.16.12",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",

packages/lucide-figma/manifest.json

@@ -3,5 +3,6 @@
   "id": "939567362549682242",
   "api": "1.0.0",
   "ui": "build/ui.html",
-  "main": "build/main.js"
+  "main": "build/main.js",
+  "editorType": ["figma"]
 }

packages/lucide-figma/package.json

@@ -15,7 +15,7 @@
     "css-loader": "^3.0.0",
     "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^3.2.0",
-    "lucide-react": "0.15.11",
+    "lucide-react": "0.16.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "style-loader": "^0.23.1",

packages/lucide-figma/yarn.lock

@@ -2495,9 +2495,9 @@ path-key@^2.0.1:
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
 path-parse@^1.0.6:
-  version "1.0.6"
+  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-type@^4.0.0:
   version "4.0.0"

packages/lucide-flutter/.gitignore

@@ -0,0 +1,76 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+build/
+pubspec.lock
+
+# Android related
+**/android/**/gradle-wrapper.jar
+**/android/.gradle
+**/android/captures/
+**/android/gradlew
+**/android/gradlew.bat
+**/android/local.properties
+**/android/**/GeneratedPluginRegistrant.java
+
+# iOS/XCode related
+**/ios/**/*.mode1v3
+**/ios/**/*.mode2v3
+**/ios/**/*.moved-aside
+**/ios/**/*.pbxuser
+**/ios/**/*.perspectivev3
+**/ios/**/*sync/
+**/ios/**/.sconsign.dblite
+**/ios/**/.tags*
+**/ios/**/.vagrant/
+**/ios/**/DerivedData/
+**/ios/**/Icon?
+**/ios/**/Pods/
+**/ios/**/.symlinks/
+**/ios/**/profile
+**/ios/**/xcuserdata
+**/ios/.generated/
+**/ios/Flutter/App.framework
+**/ios/Flutter/Flutter.framework
+**/ios/Flutter/Flutter.podspec
+**/ios/Flutter/Generated.xcconfig
+**/ios/Flutter/ephemeral
+**/ios/Flutter/app.flx
+**/ios/Flutter/app.zip
+**/ios/Flutter/flutter_assets/
+**/ios/Flutter/flutter_export_environment.sh
+**/ios/ServiceDefinitions.json
+**/ios/Runner/GeneratedPluginRegistrant.*
+
+# Exceptions to above rules.
+!**/ios/**/default.mode1v3
+!**/ios/**/default.mode2v3
+!**/ios/**/default.pbxuser
+!**/ios/**/default.perspectivev3

packages/lucide-flutter/CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.15.30
+
+* Initial release

packages/lucide-flutter/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/lucide-flutter/README.md

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

packages/lucide-flutter/analysis_option.yaml

@@ -0,0 +1,18 @@
+include: package:lint/analysis_options.yaml
+
+linter:
+  rules:
+    omit_local_variable_types: true
+    avoid_classes_with_only_static_members: false
+    prefer_single_quotes: true
+
+    file_names: false
+
+    avoid_setters_without_getters: false
+
+    sort_pub_dependencies: false
+
+    prefer_relative_imports: true
+
+    # only for debug
+    avoid_print: false

packages/lucide-flutter/example/README.md

@@ -0,0 +1,9 @@
+```dart
+
+Icon(LucideIcons.activity);
+Icon(LucideIcons.airplay);
+// ...
+// for full list see
+// https://lucide.dev
+
+```

packages/lucide-flutter/lib/lucide_icons.dart

@@ -0,0 +1,12 @@
+library lucide_icons;
+
+import "package:flutter/widgets.dart";
+import "src/icon_data.dart";
+
+// THIS FILE IS AUTOMATICALLY GENERATED!
+
+class LucideIcons {
+  // Icons will be generated here..
+  // static const IconData {icon_name} = const LucideIconData({icon_hex});
+  // ...
+}

packages/lucide-flutter/lib/src/icon_data.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/widgets.dart';
+
+class LucideIconData extends IconData {
+  const LucideIconData(int codePoint)
+      : super(
+          codePoint,
+          fontFamily: 'Lucide',
+          fontPackage: 'lucide_icons',
+        );
+}

packages/lucide-flutter/pubspec.yaml

@@ -0,0 +1,26 @@
+name: lucide_icons
+description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
+version: 0.16.12
+homepage: https://lucide.dev
+repository: https://github.com/lucide-icons/lucide
+
+environment:
+  sdk: ">=2.12.0 <3.0.0"
+  flutter: ">=1.17.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  html: ^0.15.0
+  recase: ^4.0.0
+  lint: ^1.5.3
+
+flutter:
+  fonts:
+    - family: Lucide
+      fonts:
+        - asset: assets/lucide.ttf

packages/lucide-flutter/test/icon_test.dart

@@ -0,0 +1,147 @@
+// Tests adapted from https://github.com/fluttercommunity/font_awesome_flutter/blob/master/test/fa_icon_test.dart
+// Copyright 2014 The Flutter Authors. All rights reserved.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter/widgets.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+
+void main() {
+  testWidgets('Can set opacity for an Icon', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: IconTheme(
+          data: IconThemeData(
+            color: Color(0xFF666666),
+            opacity: 0.5,
+          ),
+          child: Icon(LucideIcons.bot),
+        ),
+      ),
+    );
+    final RichText text = tester.widget(find.byType(RichText));
+    expect(text.text.style!.color, const Color(0xFF666666).withOpacity(0.5));
+  });
+
+  testWidgets('Icon sizing - no theme, default size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(LucideIcons.bot),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(24.0)));
+  });
+
+  testWidgets('Icon sizing - no theme, explicit size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(
+            LucideIcons.bot,
+            size: 96.0,
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(96.0)));
+  });
+
+  testWidgets('Icon sizing - sized theme', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: IconTheme(
+            data: IconThemeData(size: 36.0),
+            child: Icon(LucideIcons.bot),
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(36.0)));
+  });
+
+  testWidgets('Icon sizing - sized theme, explicit size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: IconTheme(
+            data: IconThemeData(size: 36.0),
+            child: Icon(
+              LucideIcons.bot,
+              size: 48.0,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(48.0)));
+  });
+
+  testWidgets('Icon sizing - sizeless theme, default size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: IconTheme(
+            data: IconThemeData(),
+            child: Icon(LucideIcons.bot),
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(24.0)));
+  });
+
+  testWidgets("Changing semantic label from null doesn't rebuild tree ",
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(LucideIcons.bot),
+        ),
+      ),
+    );
+
+    final Element richText1 = tester.element(find.byType(RichText));
+
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(
+            LucideIcons.bot,
+            semanticLabel: 'a label',
+          ),
+        ),
+      ),
+    );
+
+    final Element richText2 = tester.element(find.byType(RichText));
+
+    // Compare a leaf Element in the Icon subtree before and after changing the
+    // semanticLabel to make sure the subtree was not rebuilt.
+    expect(richText2, same(richText1));
+  });
+}

packages/lucide-flutter/tool/generate_fonts.dart

@@ -0,0 +1,49 @@
+import "dart:io";
+
+import 'package:html/parser.dart' show parse;
+import 'package:recase/recase.dart';
+
+void main(List<String> args) {
+  File fontsPreviewFile = File(args[0]);
+
+  if (!fontsPreviewFile.existsSync()) {
+    print('lucide preview file not found');
+    exit(0);
+  }
+
+  String content = fontsPreviewFile.readAsStringSync();
+  final c = parse(content);
+  final list = c.getElementsByClassName('glyph');
+
+  List<String> generatedOutput = [
+    "library lucide_icons;\n",
+    "import \"package:flutter/widgets.dart\";\n",
+    "import \"src/icon_data.dart\";\n\n",
+    "// THIS FILE IS AUTOMATICALLY GENERATED!\n\n",
+    "class LucideIcons {\n"
+  ];
+
+  for (final icon in list) {
+    final name = icon
+        .getElementsByClassName('class')
+        .first
+        .attributes['value']!
+        .replaceFirst('.icon-', '');
+    final val = icon
+        .getElementsByClassName('point')
+        .first
+        .attributes['value']!
+        .replaceFirst('&#x', '')
+        .replaceFirst(';', '');
+
+    generatedOutput.add(
+        "static const IconData ${ReCase(name).camelCase} = const LucideIconData(0x$val);\n");
+
+    print('$val $name');
+  }
+
+  generatedOutput.add("}\n");
+
+  File output = File('./lib/lucide_icons.dart');
+  output.writeAsStringSync(generatedOutput.join());
+}

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
-  "description": "Lucide Preact package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for Preact applications",
-  "version": "0.15.25",
+  "version": "0.16.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,7 +19,7 @@
   "typings": "dist/lucide-preact.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-preact/src --templateSrc=../packages/lucide-preact/scripts/exportTemplate --renderUniqueKey",
     "build:es": "babel src -d dist/esm",

packages/lucide-preact/src/createPreactComponent.js

@@ -1,6 +1,16 @@
 import { h } from 'preact';
 import defaultAttributes from './defaultAttributes';
 
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => {
   const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
     h(
@@ -11,6 +21,7 @@ export default (iconName, iconNode) => {
         height: size,
         stroke: color,
         'stroke-width': strokeWidth,
+        class: `lucide lucide-${toKebabCase(iconName)}`,
         ...rest,
       },
       iconNode.map(([tag, attrs]) => h(tag, attrs)),

packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
 
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should render an component 1`] = `"<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\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
-  "description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for React applications",
-  "version": "0.15.25",
+  "version": "0.16.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,7 +19,7 @@
   "typings": "dist/lucide-react.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/src --templateSrc=../packages/lucide-react/scripts/exportTemplate --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
@@ -37,6 +37,6 @@
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",
-    "react": "^16.5.1"
+    "react": "^16.5.1 || ^17.0.0"
   }
 }

packages/lucide-react/scripts/buildTypes.js

@@ -1,30 +1,22 @@
-import path from 'path';
+import path from "path";
-import {
+import {appendFile, readSvgDirectory, resetFile, toPascalCase, writeFile} from "../../../scripts/helpers";
-  writeFile,
-  readSvgDirectory,
-  resetFile,
-  toPascalCase,
-  appendFile,
-} from '../../../scripts/helpers';
 
-const srcDirectory = path.join(__dirname, '../dist');
+const srcDirectory=path.join(__dirname, "../dist");
 
 // Declare type definitions
-const typeDefinitions = `\
+const typeDefinitions=`\
-/// <reference types="vue" />
+/// <reference types="react" />
-import { SVGAttributes } from 'vue'
+import { SVGAttributes } from 'react'
 
-declare module 'lucide-vue-next'
+declare module 'lucide-react'
 
-// Create interface extending SVGAttributes
+// Create interface extending SVGProps
 export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
-    color?: string
     size?: string | number
-    stroke?: string | number
-    strokeWidth?: string | number
 }
 
 export type Icon = React.FC<LucideProps>;
+
 // Generated icons
 `;
 

packages/lucide-react/src/createReactComponent.js

@@ -2,6 +2,16 @@ import { forwardRef, createElement } from 'react';
 import PropTypes from 'prop-types';
 import defaultAttributes from './defaultAttributes';
 
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => {
   const Component = forwardRef(
     ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
@@ -14,6 +24,7 @@ export default (iconName, iconNode) => {
           height: size,
           stroke: color,
           strokeWidth,
+          className: `lucide lucide-${toKebabCase(iconName)}`,
           ...rest,
         },
         iconNode.map(([tag, attrs]) => createElement(tag, attrs)),

packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
 
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should render an component 1`] = `"<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\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-vue-next/package.json

@@ -1,8 +1,8 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.15.25",
+  "version": "0.16.12",
   "author": "Eric Fennis",
-  "description": "Lucide Vue 3 Package",
+  "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -20,9 +20,9 @@
   "typings": "dist/lucide-vue-next.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue-next/src --templateSrc=../packages/lucide-vue-next/scripts/exportTemplate",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue-next/src --templateSrc=../packages/lucide-vue-next/scripts/exportTemplate  --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "yarn --cwd ../../ babel-node packages/lucide-vue-next/scripts/buildTypes.js",
     "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-vue-next/rollup.config.js",

packages/lucide-vue-next/scripts/buildTypes.js

@@ -1,7 +1,6 @@
 import path from 'path';
 
 import { readSvgDirectory, resetFile, appendFile, toPascalCase } from '../../../scripts/helpers';
-import defaultAttributes from '../src/defaultAttributes';
 
 const TARGET_DIR = path.join(__dirname, '../dist');
 const ICONS_DIR = path.resolve(__dirname, '../../../icons');
@@ -9,11 +8,13 @@ const TYPES_FILE_NAME = 'lucide-vue-next.d.ts';
 
 // Generates header of d.ts file include some types and functions
 const typeDefinitions = `\
-import { Component } from 'vue';
+import { SVGAttributes, VNode } from 'vue';
 declare module 'lucide-vue-next'
 
 // Create interface extending SVGAttributes
-export interface SVGProps extends Partial<SVGElement> ${JSON.stringify(defaultAttributes, null, 2)}
+export interface SVGProps extends Partial<SVGAttributes> {
+  size?: 24 | number
+}
 
 // Generated icons
 `;
@@ -28,7 +29,7 @@ svgFiles.forEach(svgFile => {
   const componentName = toPascalCase(nameSvg);
 
   appendFile(
-    `export declare const ${componentName}: (props: SVGProps) => Component;\n`,
+    `export declare const ${componentName}: (props: SVGProps) => FunctionalComponent<SVGProps>;\n`,
     TYPES_FILE_NAME,
     TARGET_DIR,
   );

packages/lucide-vue-next/src/createVueComponent.js

@@ -1,15 +1,24 @@
 import { h } from 'vue';
 import defaultAttributes from './defaultAttributes';
 
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 const createVueComponent = (iconName, iconNode) => (props, context) =>
   h(
     'svg',
     {
       ...defaultAttributes,
-      ...{
       width: props.size || defaultAttributes.width,
       height: props.size || defaultAttributes.height,
-      },
+      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
       ...context.attrs,
       ...props,
     },

packages/lucide-vue-next/tests/__snapshots__/lucide-vue-next.spec.js.snap

@@ -160,6 +160,7 @@ VueWrapper {
       data-v-app=""
     >
       <svg
+        class="lucide lucide-smile-icon"
         fill="none"
         height="24"
         stroke="currentColor"
@@ -253,6 +254,7 @@ VueWrapper {
   },
   "rootVM": Object {},
   "wrapperElement": <svg
+    class="lucide lucide-smile-icon"
     fill="none"
     height="24"
     stroke="currentColor"
@@ -304,6 +306,7 @@ VueWrapper {
       data-v-app=""
     >
       <svg
+        class="lucide lucide-smile-icon"
         fill="none"
         height="48"
         size="48"
@@ -398,6 +401,7 @@ VueWrapper {
   },
   "rootVM": Object {},
   "wrapperElement": <svg
+    class="lucide lucide-smile-icon"
     fill="none"
     height="48"
     size="48"
@@ -450,6 +454,7 @@ VueWrapper {
       data-v-app=""
     >
       <svg
+        class="lucide lucide-smile-icon"
         fill="none"
         height="24"
         stroke="currentColor"
@@ -542,6 +547,7 @@ VueWrapper {
   },
   "rootVM": Object {},
   "wrapperElement": <svg
+    class="lucide lucide-smile-icon"
     fill="none"
     height="24"
     stroke="currentColor"

packages/lucide-vue/README.md

@@ -105,3 +105,21 @@ export default {
   </div>
 </template>
 ```
+
+## Use with [@nuxt/components](https://github.com/nuxt/components#readme)
+
+### Setup
+In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules`
+```js
+export default {
+  buildModules: ['lucide-vue/nuxt']
+}
+```
+
+### How to use
+Icon components are prefixed with `Icon`. Use icon components without importing them.
+
+### Example
+```html
+<IconCamera color="red" :size="32" />
+```

packages/lucide-vue/babel.config.js

@@ -1,12 +1,14 @@
+const mainConfig = require('../../babel.config');
+
 module.exports = {
   presets: [
     [
-      '@babel/preset-env',
+      '@babel/env',
       {
-        targets: {
+        loose: true,
-          node: 'current',
+        modules: false,
-        },
       },
     ],
   ],
+  env: mainConfig.env,
 };

packages/lucide-vue/nuxt.js

@@ -0,0 +1,11 @@
+import { join } from 'path';
+
+export default function() {
+  this.nuxt.hook('components:dirs', dirs => {
+    dirs.push({
+      path: join(__dirname, 'dist', 'esm', 'icons'),
+      prefix: 'Icon',
+      ignore: ['**/index.js'],
+    });
+  });
+}

packages/lucide-vue/package.json

@@ -1,8 +1,8 @@
 {
   "name": "lucide-vue",
-  "version": "0.15.25",
+  "version": "0.16.12",
   "author": "Eric Fennis",
-  "description": "Lucide Vue Package",
+  "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,7 +19,7 @@
   "unpkg": "dist/umd/lucide-vue.min.js",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-vue/src --templateSrc=../packages/lucide-vue/scripts/exportTemplate",
     "build:es": "babel src -d dist/esm",

packages/lucide-vue/src/createVueComponent.js

@@ -1,5 +1,15 @@
 import defaultAttributes from './defaultAttributes';
 
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => ({
   name: iconName,
   functional: true,
@@ -18,7 +28,7 @@ export default (iconName, iconNode) => ({
     },
     defaultClass: {
       type: String,
-      default: 'lucide-icon',
+      default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`,
     },
   },
   render(
@@ -42,6 +52,7 @@ export default (iconName, iconNode) => ({
           'stroke-width': strokeWidth,
           ...data.attrs,
         },
+        on: data?.on || {}
       },
       iconNode.map(([tag, attrs]) => createElement(tag, { attrs })),
     );

packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Using lucide icon components should add a class to the element 1`] = `
-<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" class="lucide-icon my-icon">
+<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" class="lucide-icon lucide lucide-smile my-icon">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>
@@ -10,7 +10,7 @@ exports[`Using lucide icon components should add a class to the element 1`] = `
 `;
 
 exports[`Using lucide icon components should add a style attribute to the element 1`] = `
-<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" style="position: absolute" class="lucide-icon">
+<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" style="position: absolute" class="lucide-icon lucide lucide-smile">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>
@@ -19,7 +19,7 @@ exports[`Using lucide icon components should add a style attribute to the elemen
 `;
 
 exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon">
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-smile">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>
@@ -28,7 +28,7 @@ exports[`Using lucide icon components should adjust the size, stroke color and s
 `;
 
 exports[`Using lucide icon components should render an component 1`] = `
-<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" class="lucide-icon">
+<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" class="lucide-icon lucide lucide-smile">
   <circle cx="12" cy="12" r="10"></circle>
   <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
   <line x1="9" y1="9" x2="9.01" y2="9"></line>

packages/lucide-vue/tests/lucide-vue.spec.js

@@ -28,7 +28,7 @@ describe('Using lucide icon components', () => {
     })
 
     expect(wrapper).toMatchSnapshot();
-    expect(String(wrapper.classes())).toBe(String(['lucide-icon', 'my-icon']))
+    expect(String(wrapper.classes())).toBe(String(['lucide-icon','lucide','lucide-smile', 'my-icon']))
   });
 
   it('should add a style attribute to the element', () => {
@@ -36,10 +36,21 @@ describe('Using lucide icon components', () => {
       attrs: {
         style: 'position: absolute',
       }
-
     })
 
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.attributes('style')).toContain('position: absolute')
   });
+
+  it('should call the onClick event', () => {
+    const onClick = jest.fn()
+    const wrapper = mount(Smile, {
+      listeners: {
+        click: onClick
+      }
+    })
+
+    wrapper.trigger('click')
+    expect(onClick).toHaveBeenCalled()
+  });
 });

packages/lucide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide",
-  "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.15.25",
+  "version": "0.16.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,7 +19,7 @@
   "typings": "dist/lucide.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide/src",
     "build:es": "babel src -d dist/esm",

packages/lucide/src/replaceElement.js

@@ -73,7 +73,7 @@ export default (element, { nameAttr, icons, attrs }) => {
     ...attrs,
   };
 
-  const classNames = combineClassNames(['lucide', elementAttrs, attrs]);
+  const classNames = combineClassNames(['lucide', `lucide-${iconName}`, elementAttrs, attrs]);
 
   if (classNames) {
     iconAttrs.class = classNames;

packages/lucide/tests/__snapshots__/lucide.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createIcons should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
+exports[`createIcons should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
 
-exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<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\\" icon-name=\\"volume-2\\" class=\\"lucide\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;
+exports[`createIcons should read elements from DOM and replace it with icons 1`] = `"<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\\" icon-name=\\"volume-2\\" class=\\"lucide lucide-volume-2\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07\\"></path></svg>"`;

packages/lucide/tests/lucide.spec.js

@@ -11,7 +11,7 @@ const getOriginalSvg = (iconName) => {
   const svgParsed = parseSync(svgContent);
 
   svgParsed.attributes['icon-name'] = iconName;
-  svgParsed.attributes['class'] = 'lucide';
+  svgParsed.attributes['class'] = `lucide lucide-${iconName}`;
 
   return stringify(svgParsed, { selfClose: false });
 };
@@ -45,7 +45,7 @@ describe('createIcons', () => {
     document.body.innerHTML = `<i icon-name="volume-2" class="lucide"></i>`;
 
     const attrs = {
-      class: 'lucide icon custom-class',
+      class: 'lucide lucide-volume-2 icon custom-class',
       fill: 'black',
     };
 

scripts/build/generateIconFiles.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import prettier from 'prettier';
+import { promises } from 'stream';
 import { toPascalCase } from '../helpers';
 
 export default function({ iconNodes, outputDirectory, template, showLog = true, iconFileExtention = '.js' }) {
@@ -12,7 +13,7 @@ export default function({ iconNodes, outputDirectory, template, showLog = true,
     fs.mkdirSync(iconsDistDirectory);
   }
 
-  icons.forEach(iconName => {
+  const writeIconFiles = icons.map(async iconName => {
     const location = path.join(iconsDistDirectory, `${iconName}${iconFileExtention}`);
     const componentName = toPascalCase(iconName);
 
@@ -21,11 +22,16 @@ export default function({ iconNodes, outputDirectory, template, showLog = true,
 
     const elementTemplate = template({ componentName, iconName, children });
 
-
+    await fs.promises.writeFile(location, prettier.format(elementTemplate, { singleQuote: true, trailingComma: 'all', parser: 'babel' }), 'utf-8');
-    fs.writeFileSync(location, prettier.format(elementTemplate, { singleQuote: true, trailingComma: 'all', parser: 'babel' }), 'utf-8');
-
-    if(showLog) {
-      console.log('Successfully built', componentName);
-    }
   });
+
+  Promise.all(writeIconFiles)
+  .then(() => {
+    if(showLog) {
+      console.log('Successfully built', icons.length, 'icons.');
+    }
+  })
+  .catch((error) => {
+    throw new Error(`Something went wrong generating icon files,\n ${error}`)
+  })
 }

scripts/outlineSvg.js

@@ -0,0 +1,81 @@
+import { promises as fs } from 'fs';
+import outlineStroke from 'svg-outline-stroke';
+import { parse, stringify } from 'svgson'; // eslint-disable-line import/no-extraneous-dependencies
+import getArgumentOptions from 'minimist';
+
+const inputDir = `./icons/`;
+const cliArguments = getArgumentOptions(process.argv.slice(2));
+const { outputDir } = cliArguments;
+
+const widthMap = {
+  'converted_icons-200': '1',
+  'converted_icons-300': '1.5',
+  converted_icons: '2',
+  'converted_icons-500': '2.5',
+  'converted_icons-600': '3',
+};
+
+function transformForward(node) {
+  if (node.name === 'svg') {
+    return {
+      ...node,
+      attributes: {
+        ...node.attributes,
+        width: 960,
+        height: 960,
+      },
+    };
+  }
+  return node;
+}
+
+function transformBackwards(node) {
+  if (node.name === 'svg') {
+    const { width, height, ...attributes } = node.attributes;
+    return {
+      ...node,
+      attributes,
+    };
+  }
+  return node;
+}
+
+async function init() {
+  console.time('icon outliner');
+  try {
+    await fs.mkdir(`./${outputDir}`);
+
+    const icons = await fs.readdir(inputDir);
+    const parsedIconNodes = await Promise.all(
+      icons.map(async file => {
+        const iconContent = await fs.readFile(`${inputDir}${file}`);
+        const iconNode = await parse(iconContent.toString(), {
+          transformNode: transformForward,
+        });
+        return [file, iconNode];
+      }),
+    );
+
+    if (widthMap?.[outputDir] === undefined) {
+      throw new Error(`Could not find the directory: ${outputDir}.`)
+    }
+
+    await Promise.all(
+      parsedIconNodes.map(async ([file, iconNode]) => {
+        iconNode.attributes['stroke-width'] = widthMap[outputDir];
+        const outlined = await outlineStroke(stringify(iconNode));
+        const outlinedWithoutAttrs = await parse(outlined, {
+          transformNode: transformBackwards,
+        });
+
+        await fs.writeFile(`./${outputDir}/${file}`, stringify(outlinedWithoutAttrs));
+      }),
+    );
+
+    console.timeEnd('icon outliner');
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+init();

scripts/outline_svg.js

@@ -1,52 +0,0 @@
-const { promises: fs } = require('fs');
-const outlineStroke = require('svg-outline-stroke');
-const { parse, stringify } = require('svgson');
-
-const inputDir = `./icons/`;
-const outputDir = `./converted_icons/`;
-
-async function init() {
-  try {
-    const files = await fs.readdir(inputDir);
-    for (const file of files) {
-      const icon = await fs.readFile(`${inputDir}${file}`);
-      const scaled = await parse(icon.toString(), {
-        transformNode: transformForward,
-      });
-      const outlined = await outlineStroke(stringify(scaled));
-      const outlinedWithoutAttrs = await parse(outlined, {
-        transformNode: transformBackwards,
-      });
-      await fs.writeFile(`${outputDir}${file}`, stringify(outlinedWithoutAttrs));
-    }
-  } catch (err) {
-    console.log(err);
-  }
-}
-
-init();
-
-function transformForward(node) {
-  if (node.name === 'svg') {
-    return {
-      ...node,
-      attributes: {
-        ...node.attributes,
-        width: 960,
-        height: 960,
-      },
-    };
-  }
-  return node;
-}
-
-function transformBackwards(node) {
-  if (node.name === 'svg') {
-    const { width, height, ...attributes } = node.attributes;
-    return {
-      ...node,
-      attributes,
-    };
-  }
-  return node;
-}

site/.eslintrc.js

@@ -1,4 +1,21 @@
-const { builtinModules } = require('module')
+/* eslint-disable no-undef */
-const rootConfig = require('../.eslintrc.js')
+module.exports = {
-
+  root: true,
-module.exports = rootConfig;
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'import', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@next/next/recommended',
+    'prettier',
+  ],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+      },
+    ],
+  },
+};

site/next-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
 
-declare module "*.svg" {
+// NOTE: This file should not be edited
-  const content: any;
+// see https://nextjs.org/docs/basic-features/typescript for more information.
-  export default content;
-}

site/next.config.js

@@ -0,0 +1,21 @@
+/* eslint-disable no-undef */
+module.exports = {
+  webpack: (config, options) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: 'babel-loader',
+        },
+        {
+          loader: 'react-svg-loader',
+          options: {
+            jsx: true,
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+};

site/package.json

@@ -8,24 +8,33 @@
     "build": "next build",
     "export": "next export -o build",
     "deploy": "yarn build && yarn export",
+    "lint": "eslint .",
     "test": "jest"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.6.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@next/mdx": "^11.0.0",
     "downloadjs": "^1.4.7",
     "framer-motion": "^4",
-    "jszip": "^3.4.0",
+    "gray-matter": "^4.0.3",
+    "js-yaml": "^4.1.0",
+    "jszip": "^3.7.0",
     "lodash": "^4.17.20",
     "lucide-react": "0.14.0",
-    "next": "^10.0.4",
+    "next": "^11.1.1",
+    "next-mdx-remote": "^3.0.2",
+    "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",
     "react-svg-loader": "^3.0.3"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^11.1.0",
     "@testing-library/dom": "^7.24.4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.4",
@@ -33,10 +42,14 @@
     "@types/node": "^14.0.11",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
     "babel-jest": "^26.5.2",
     "babel-loader": "^8.1.0",
     "cheerio": "^1.0.0-rc.3",
+    "eslint": "^7.32.0",
     "jest": "^26.5.2",
-    "typescript": "^4.2.4"
+    "prettier": "^2.3.2",
+    "typescript": "^4.3.5"
   }
 }

site/public/framework-logos/angular.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="33" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 0 0 3.57l1.53 13.22 8.47 4.7 8.47-4.7L20 3.57 10 0Z" fill="#DD0031"/>
+  <path d="M10 0v21.48l8.47-4.7L20 3.58 10 0Z" fill="#C3002F"/>
+  <path d="M10 2.37 3.75 16.4h2.33l1.26-3.14h5.3l1.26 3.14h2.33L10 2.37Zm1.83 8.95H8.17L10 6.92l1.83 4.4Z" fill="#fff"/>
+</svg>

site/public/framework-logos/flutter.svg

@@ -0,0 +1,6 @@
+<svg width="26.25" height="30" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.15 9.23H10l-5.38 5.39 3.07 3.07 8.46-8.46Z" fill="#54C5F8"/>
+  <path d="M3.08 13.08 0 10 10 0h6.15L3.08 13.08Z" fill="#54C5F8"/>
+  <path d="M7.7 17.7 10 20h6.15l-5.38-5.38-3.08 3.07Z" fill="#01579B"/>
+  <path d="m7.7 11.54-3.08 3.08 3.07 3.07 3.08-3.07-3.08-3.08Z" fill="#29B6F6"/>
+</svg>

site/public/framework-logos/js.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0h20v20H0V0Z" fill="#F7DF1E"/>
+  <path d="M13.43 15.62c.41.67.92 1.14 1.87 1.14.76 0 1.27-.38 1.27-.92 0-.63-.5-.89-1.36-1.24l-.48-.22c-1.37-.57-2.25-1.3-2.25-2.82 0-1.4 1.08-2.48 2.73-2.48 1.2 0 2.06.41 2.7 1.5l-1.47.94c-.34-.57-.7-.79-1.23-.79-.54 0-.9.35-.9.8 0 .57.36.79 1.18 1.14l.45.19c1.62.7 2.5 1.4 2.5 2.95 0 1.68-1.33 2.63-3.1 2.63-1.75 0-2.9-.85-3.44-1.93l1.53-.9Zm-6.64.16c.29.54.58.98 1.21.98s1.02-.25 1.02-1.17V9.17h1.87v6.42c0 1.97-1.14 2.85-2.8 2.85a2.9 2.9 0 0 1-2.82-1.74l1.52-.92Z" fill="#000"/>
+</svg>

site/public/framework-logos/preact.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="36" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m10 0 10 5.77v11.55l-10 5.77-10-5.77V5.77L10 0Z" fill="#673AB8"/>
+  <path d="M2.72 17.22c1.33 1.7 5.56.41 9.55-2.7 3.99-3.12 6.27-6.9 4.94-8.61-1.33-1.7-5.56-.4-9.55 2.71-3.99 3.12-6.27 6.9-4.94 8.6Zm.57-.44c-.44-.56-.25-1.67.6-3.07A17.8 17.8 0 0 1 8.1 9.2a17.8 17.8 0 0 1 5.41-3c1.56-.48 2.68-.4 3.12.16.44.57.25 1.68-.6 3.07a17.8 17.8 0 0 1-4.22 4.53 17.8 17.8 0 0 1-5.4 3c-1.57.48-2.69.4-3.13-.17Z" fill="#fff"/>
+  <path d="M17.2 17.22c1.34-1.7-.94-5.48-4.93-8.6-4-3.12-8.22-4.41-9.55-2.71-1.33 1.7.95 5.49 4.94 8.6 4 3.12 8.22 4.42 9.55 2.71Zm-.56-.44c-.44.57-1.56.65-3.12.17a17.8 17.8 0 0 1-5.41-3 17.8 17.8 0 0 1-4.23-4.53c-.84-1.4-1.03-2.5-.59-3.07.44-.56 1.56-.64 3.12-.16a17.8 17.8 0 0 1 5.41 3 17.8 17.8 0 0 1 4.23 4.52c.84 1.4 1.03 2.5.59 3.07Z" fill="#fff"/>
+  <path d="M9.96 13.1a1.53 1.53 0 1 0 0-3.06 1.53 1.53 0 0 0 0 3.06Z" fill="#fff"/>
+</svg>

site/public/framework-logos/react.svg

@@ -0,0 +1,6 @@
+<svg width="35" height="32" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.5 12.3a2 2 0 1 0 0-4.1 2 2 0 0 0 0 4Z" fill="#61DAFB"/>
+  <path d="M11.5 14.4c6 0 11-1.8 11-4.2 0-2.3-5-4.2-11-4.2s-11 2-11 4.2c0 2.4 5 4.2 11 4.2Z" stroke="#61DAFB"/>
+  <path d="M7.9 12.3c3 5.3 7 8.6 9.1 7.5 2-1.2 1.2-6.4-1.9-11.7C12.1 3 8.1-.5 6 .7 4 2 4.8 7.1 7.9 12.3Z" stroke="#61DAFB"/>
+  <path d="M7.9 8.1c-3 5.3-4 10.5-1.9 11.7 2 1.1 6.1-2.2 9.1-7.5 3-5.2 4-10.4 1.9-11.6C15-.5 10.9 3 7.9 8.1Z" stroke="#61DAFB"/>
+</svg>