Add Pilcrow Icon (paragraph) (#884)

* add pilcrow icon
* add tags

.eslintignore

@@ -3,3 +3,4 @@ build
 coverage
 lib
 tests
+node_modules

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   extends: ['airbnb-base', 'prettier'],
   plugins: ['import', 'prettier'],
@@ -14,12 +14,26 @@ module.exports = {
       'error',
       {
         singleQuote: true,
-        trailingComma: 'all'
+        trailingComma: 'all',
-      }
+      },
-    ]
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
+    ],
+    'import/extensions': [
+      'error',
+      {
+        pattern: {
+          mjs: 'always',
+          json: 'always',
+        },
+      },
+    ],
   },
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
+    ecmaVersion: 2020,
   },
 };

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 

.github/workflows/lucide-angular.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-angular/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-angular/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-angular:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-angular test
-

.github/workflows/lucide-font.yml

@@ -0,0 +1,59 @@
+name: Lucide font checks
+
+on:
+  pull_request:
+    paths:
+      - icons/**
+      - pnpm-lock.yaml
+  push:
+    paths:
+      - icons/**
+      - pnpm-lock.yaml
+
+jobs:
+  lucide-font:
+    runs-on: ubuntu-latest
+    container: ericfennis/lucide-font:latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2.0.1
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-lucide-font-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-lucide-font-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --filter outline-svg
+
+      - name: Outline svg Icons
+        run: pnpm build:outline-icons
+
+      - name: Create directory
+        run: mkdir lucide-font
+
+      - name: Build font
+        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
+
+      - name: "Upload to Artifacts"
+        uses: actions/upload-artifact@v1
+        with:
+          name: lucide-font
+          path: lucide-font

.github/workflows/lucide-preact.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-preact/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-preact/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-preact:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-preact test
-

.github/workflows/lucide-react-native.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-react-native/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-react-native/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-react-native:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react-native test
-

.github/workflows/lucide-react.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-react/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-react/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-react:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react test
-

.github/workflows/lucide-solid.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-solid/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-solid/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-solid:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-solid test
-

.github/workflows/lucide-static.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-static/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-static/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-static:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -42,4 +44,3 @@ jobs:
 
       - name: Build
         run: pnpm --filter lucide-static build
-

.github/workflows/lucide-svelte.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-svelte/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-svelte/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-svelte:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-svelte test
-

.github/workflows/lucide-vue-next.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue-next/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-vue-next/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-vue-next:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue-next test
-

.github/workflows/lucide-vue.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-vue/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-vue:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue test
-

.github/workflows/lucide.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide test
-

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release Packages
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
   workflow_dispatch:
     inputs:
@@ -32,8 +32,8 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -86,9 +86,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -141,9 +141,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -196,9 +196,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -251,9 +251,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -306,9 +306,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -348,7 +348,7 @@ jobs:
         run: pnpm --filter lucide-angular test
 
       - name: Publish
-        run: pnpm --filter lucide-angular publish dist --no-git-checks --ignore-scripts
+        run: pnpm --filter lucide-angular publish --no-git-checks --ignore-scripts
 
       - name: Upload package.json
         uses: actions/upload-artifact@v2
@@ -361,9 +361,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -416,9 +416,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -471,9 +471,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -526,10 +526,10 @@ jobs:
     runs-on: ubuntu-latest
     needs: [pre-build, lucide-font]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -581,8 +581,9 @@ jobs:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
+    container: ericfennis/lucide-font:latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3.4.1
         with:
           node-version: 16
@@ -607,37 +608,17 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - name: Install FontForge
-        run: sudo apt-get install zlib1g-dev fontforge
-
-      - name: Clone sfnt2woff-zopfli repo
-        run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
-
-      - name: Install and move sfnt2woff-zopfli
-        run: |
-          cd sfnt2woff-zopfli
-          make
-          sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
-
-      - name: Clone woff2
-        run: git clone --recursive https://github.com/google/woff2.git
-
-      - name: Install woff2
-        run: |
-          cd woff2
-          sudo make clean all
-          sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
-
-      - name: Install Font Custom dependency
-        run: sudo gem install fontcustom
-
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --filter outline-svg
 
-      - name: Build Icon Font
+      - name: Outline svg Icons
-        run: |
+        run: pnpm build:outline-icons
-          mkdir lucide-font
+
-          pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
+      - name: Create directory
+        run: mkdir lucide-font
+
+      - name: Build font
+        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
 
       - name: "Upload to Artifacts"
         uses: actions/upload-artifact@v1
@@ -652,7 +633,7 @@ jobs:
     container:
       image: cirrusci/flutter:latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
       - uses: actions/cache@v2
         with:
@@ -735,13 +716,14 @@ jobs:
       ]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
 
       - name: Commit package files
         run: |
           mv lucide-package-json/package.json packages/lucide/package.json
           mv lucide-react-package-json/package.json packages/lucide-react/package.json
+          mv lucide-react-native-package-json/package.json packages/lucide-react-native/package.json
           mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
           mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
           mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json

.gitignore

@@ -12,6 +12,7 @@ stash
 coverage
 stats
 *.log
+outlined
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/LICENSE

README.md

@@ -17,9 +17,10 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
 
 ### Why choose Lucide over Feather Icons
 
-- Lucide already expanded the icon set by 130+ in less than a year, so more icons to work with.
+- More icons to work with: Lucide already has hundreds of icons more than Feather does.
+- Official librairies and integrations with popular frameworks and design tools.
 - Well maintained code base.
-- Active community.
+- Active community, regularly growing and improving the set.
 
 ## Table of Contents
 
@@ -37,6 +38,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
   - [Flutter](#flutter)
   - [Svelte](#svelte)
   - [Solid](#solid)
+  - [Hyva](#hyva)
 - [Contributing](#contributing)
 - [Community](#community)
 - [License](#license)
@@ -56,9 +58,11 @@ Implementation of the lucide icon library for web applications.
 
 ```sh
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
@@ -70,9 +74,11 @@ Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -84,9 +90,11 @@ Implementation of the lucide icon library for React Native applications.
 
 ```sh
 yarn add lucide-react-native
+```
 
-# or
+or
 
+```sh
 npm install lucide-react-native
 ```
 
@@ -98,9 +106,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -112,9 +122,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue-next
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue-next
 ```
 
@@ -124,9 +136,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
 
 ```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -138,9 +152,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -157,9 +173,11 @@ NPM package
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
@@ -197,9 +215,11 @@ Implementation of the lucide icon library for Svelte applications.
 
 ```sh
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -211,14 +231,26 @@ Implementation of the lucide icon library for solid applications.
 
 ```sh
 yarn add lucide-solid
+```
 
-#or
+or
 
+```sh
 npm install lucide-solid
 ```
 
 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-solid#lucide-solid).
 
+### Hyva
+
+Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.
+
+```sh
+composer require siteation/magento2-hyva-icons-lucide
+```
+
+For more details, see the [documentation](https://github.com/Siteation/magento2-hyva-icons-lucide/blob/main/README.md).
+
 ## Contributing
 
 For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
@@ -245,4 +277,3 @@ Thank you to all the people who contributed to Lucide!
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
   <img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>
-

docs/installation.md

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
 
 ```bash
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
 
 ```bash
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-vue-next
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue-next
 ```
 
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
 
 ```bash
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```bash
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -106,7 +120,7 @@ The lucide figma plugin.
 
 Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
 
-![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')
 
 ## Laravel
 

docs/packages/lucide-angular.md

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for angular applications.
 
 ```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent implements OnInit {
   ngOnInit(): void {
     const div = document.getElementById('lucide-icon');
@@ -51,7 +52,7 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### Method 2: User __Tag__ with __name__ property
+### Method 2: User **Tag** with **name** property
 
 After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
 
@@ -65,9 +66,7 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
-  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -76,7 +75,6 @@ import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
   providers: [],
   bootstrap: [AppComponent]
 })
-
 export class AppModule {}
 ```
 
@@ -86,7 +84,7 @@ export class AppModule { }
 <lucide-icon name="edit" class="myicon"></lucide-icon>
 ```
 
-### Method 3: User __Tag__ with __img__ property
+### Method 3: User **Tag** with **img** property
 
 After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
 
@@ -100,18 +98,11 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
+  imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
   providers: [],
   bootstrap: [AppComponent]
 })
-
 export class AppModule {}
 ```
 
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent {
   ico1 = Airplay;
   ico2 = Circle;
@@ -146,7 +136,7 @@ In `Method 2`: import all icons in `app.module.ts` by:
 
 ```js
 
-import { icons } from 'lucide-angular/icons';
+import { icons } from 'lucide-angular';
 
 LucideAngularModule.pick(icons)
 

docs/packages/lucide-preact.md

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -31,7 +33,7 @@ import { Camera } from 'lucide-preact';
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -39,11 +41,11 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props / svg attributes
 
@@ -52,7 +54,7 @@ You can also pass custom props that will be added in the as attributes. With tha
 ```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -72,7 +74,7 @@ import * as icons from 'lucide-preact';
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

docs/packages/lucide-react-native.md

@@ -8,9 +8,11 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install
 
 ```bash
 yarn add lucide-react-native
+```
 
-# or
+or
 
+```sh
 npm install lucide-react-native
 ```
 

docs/packages/lucide-react.md

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for react applications
 
 ```bash
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -27,7 +29,7 @@ import { Camera } from 'lucide-react';
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -35,11 +37,11 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props
 
@@ -48,7 +50,7 @@ You can also pass custom props that will be added in the svg as attributes.
 ```js
 // Usage
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -66,7 +68,7 @@ import * as icons from 'lucide-react';
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

docs/packages/lucide-static.md

@@ -19,9 +19,11 @@ This package is suitable for very specific use cases for example if you want to
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
@@ -29,13 +31,13 @@ npm install lucide-static
 
 ```html
 <!-- Svg File -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
 <!-- Icon Font -->
 <style>
   @font-face {
-    font-family: "LucideIcons";
+    font-family: 'LucideIcons';
-    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
+    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
   }
 </style>
 ```
@@ -52,12 +54,12 @@ To use it in for example html:
 
 ```html
 <!-- Svg File -->
-<img src="~lucide-static/icons/home.svg">
+<img src="~lucide-static/icons/home.svg" />
 ```
 
 ```css
 .home-icon {
-  background-image: url(~lucide-static/icons/home.svg)
+  background-image: url(~lucide-static/icons/home.svg);
 }
 ```
 
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
 To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
 
 ```js
-import arrowRightIcon from 'lucide-static/icons/arrow-right'
+import arrowRightIcon from 'lucide-static/icons/arrow-right';
 
 // return string of a svg
 ```
@@ -80,7 +82,7 @@ You may need additional loader for this.
 
 ```html
 <!-- Icon Sprite, not recommended for production! -->
-<img src="lucide-static/sprite.svg#home">
+<img src="lucide-static/sprite.svg#home" />
 
 <!-- or -->
 <svg
@@ -133,20 +135,19 @@ and update the svg as follows
 ### Icon Font
 
 ```css
-@import("~lucide-static/font/Lucide.css")
+@import ('~lucide-static/font/Lucide.css');
 ```
 
 ```html
 <div class="icon-home"></div>
 ```
 
-
 ### Node.js
 
 To use lucide icons in your Nodejs project you can import each icon as:
 
 ```js
-const { messageSquare } = require('lucide-static/lib')
+const { messageSquare } = require('lucide-static/lib');
 ```
 
 > Note: Each icon name is in camelCase.
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
 #### Example in node.js project
 
 ```js
-const express = require('express')
+const express = require('express');
-const { messageSquare } = require('lucide-static/lib')
+const { messageSquare } = require('lucide-static/lib');
-const app = express()
+const app = express();
-const port = 3000
+const port = 3000;
 
 app.get('/', (req, res) => {
   res.send(`
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
 
       </body>
     </html>
-  `)
+  `);
-})
+});
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
+  console.log(`Example app listening at http://localhost:${port}`);
-})
+});
 ```

docs/packages/lucide-svelte.md

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications.
 
 ```bash
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -22,7 +24,7 @@ Default usage:
 
 ```html
 <script>
-import { Skull } from 'lucide-svelte'
+  import { Skull } from 'lucide-svelte';
 </script>
 
 <Skull />
@@ -32,7 +34,7 @@ You can pass additional props to adjust the icon.
 
 ```html
 <script>
-import { Camera } from 'lucide-svelte'
+  import { Camera } from 'lucide-svelte';
 </script>
 
 <Camera color="#ff3e98" />
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
 
 ### Available props
 
-|  name          |   type   |  default
+| name          | type     | default      |
-| -------------- | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`         | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`        | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`  | *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
-| `*<SVGProps>`  | *String* | -
+| `*<SVGProps>` | _String_ | -            |
 
 \* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
 
@@ -53,7 +55,7 @@ import { Camera } from 'lucide-svelte'
 
 ```html
 <script>
-import { Phone } from 'lucide-svelte'
+  import { Phone } from 'lucide-svelte';
 </script>
 
 <Phone fill="#333" />
@@ -71,18 +73,18 @@ It is possible to create one generic icon component to load icons.
 
 ```html
 <script>
-  import * as icons from "lucide-svelte";
+  import * as icons from 'lucide-svelte';
   export let name;
 </script>
 
-<svelte:component this={icons[name]} {...$$props}/>
+<svelte:component this="{icons[name]}" {...$$props} />
 ```
 
 ##### Then you can use it like this
 
 ```html
 <script>
-  import LucideIcon from "./LucideIcon";
+  import LucideIcon from './LucideIcon';
 </script>
 
 <LucideIcon name="Menu" />

docs/packages/lucide-vue-next.md

@@ -35,15 +35,8 @@ You can pass additional props to adjust the icon.
   />
 </template>
 
-<script>
+<script setup>
-// Returns Vue component
 import { Camera } from 'lucide-vue-next';
-
-export default {
-  name: "My Component",
-  components: { Camera }
-}
-
 </script>
 ```
 
@@ -53,8 +46,8 @@ export default {
 | ------------ | -------- | --------
 | `size`       | *Number* | 24
 | `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| `stroke-width`| *Number* | 2
-| `defaultClass`| *String* | lucide-icon
+| `default-class`| *String* | lucide-icon
 
 ### Custom props
 
@@ -76,25 +69,25 @@ It is possible to create one generic icon component to load icons.
 
 ``` html
 <template>
-  <component :is="icon" />
+    <component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
 import * as icons from "lucide-vue-next";
 
-export default {
+const props = defineProps({
-  props: {
   name: {
     type: String,
-      required: true,
+    required: true
   },
-  },
+  size: Number,
-  setup(props) {
+  color: String,
-    const icon = computed(() => icons[props.name])
+  strokeWidth: Number,
+  defaultClass: String
+})
 
-    return { icon }
+const icon = computed(() => icons[props.name]);
-  }
-};
 </script>
 ```
 
@@ -107,3 +100,4 @@ export default {
   </div>
 </template>
 ```
+All other props listed above also work on the `Icon` Component.

docs/packages/lucide-vue.md

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for Vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -25,10 +27,7 @@ You can pass additional props to adjust the icon.
 
 ```html
 <template>
-  <Camera
+  <Camera color="red" :size="32" />
-    color="red"
-    :size="32"
-  />
 </template>
 
 <script>
@@ -36,21 +35,20 @@ You can pass additional props to adjust the icon.
   import { Camera } from 'lucide-vue';
 
   export default {
-  name: "My Component",
+    name: 'My Component',
     components: { Camera }
-}
+  };
-
 </script>
 ```
 
 ### Props
 
-|  name        |   type   |  default
+| name           | type     | default      |
-| ------------ | -------- | --------
+| -------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`         | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`        | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth`  | _Number_ | 2            |
-| `defaultClass`| *String* | lucide-icon
+| `defaultClass` | _String_ | lucide-icon  |
 
 ### Custom props
 
@@ -76,20 +74,20 @@ It is possible to create one generic icon component to load icons.
 </template>
 
 <script>
-import * as icons from "lucide-vue";
+  import * as icons from 'lucide-vue';
 
   export default {
     props: {
       name: {
         type: String,
-      required: true,
+        required: true
-    },
+      }
     },
     computed: {
       icon() {
         return icons[this.name];
-    },
+      }
-  },
+    }
   };
 </script>
 ```

docs/packages/lucide.md

@@ -6,9 +6,13 @@ Implementation of the lucide icon library for web applications.
 
 ### Package Managers
 
-``` bash
+```sh
 npm install lucide
-#or
+```
+
+or
+
+```sh
 yarn add lucide
 ```
 
@@ -65,8 +69,8 @@ createIcons({
   icons: {
     Menu,
     ArrowRight,
-    Globe,
+    Globe
-  },
+  }
 });
 ```
 
@@ -83,9 +87,9 @@ createIcons({
   attrs: {
     class: ['my-custom-class', 'icon'],
     'stroke-width': 1,
-    stroke: '#333',
+    stroke: '#333'
   },
-  nameAttr: 'icon-name', // attribute for the icon name.
+  nameAttr: 'icon-name' // attribute for the icon name.
 });
 ```
 
@@ -98,8 +102,8 @@ createIcons({
   icons: {
     Menu,
     ArrowRight,
-    Globe,
+    Globe
-  },
+  }
 });
 ```
 

icons/baby.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9 12h0" />
+  <path d="M9 12h0.01" />
-  <path d="M15 12h0" />
+  <path d="M15 12h0.01" />
   <path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" />
   <path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1" />
 </svg>

icons/bean-off.svg

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

icons/bean.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="M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z" />
+  <path d="M5.341 10.62A4 4 0 1 0 10.62 5.34" />
+</svg>

icons/candy-off.svg

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

icons/candy.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="m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z" />
+  <path d="M14 6.5v10" />
+  <path d="M10 7.5v10" />
+  <path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1" />
+  <path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1" />
+</svg>

icons/cat.svg

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

icons/check-check.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="M18 6 7 17l-5-5" />
+  <path d="m22 10-7.5 7.5L13 16" />
+</svg>

icons/dna-off.svg

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

icons/dna.svg

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

icons/dog.svg

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

icons/dumbbell.svg

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

icons/egg-off.svg

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

icons/flask-conical-off.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 10 4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-1.272-2.542" />
+  <path d="M10 2v2.343" />
+  <path d="M14 2v6.343" />
+  <path d="M8.5 2h7" />
+  <path d="M7 16h9" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/flask-conical.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M10 2v8L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45L14 10V2" />
+  <path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" />
   <path d="M8.5 2h7" />
   <path d="M7 16h10" />
 </svg>

icons/hop-off.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M17.5 5.5C19 7 20.5 9 21 11c-1.323.265-2.646.39-4.118.226" />
+  <path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
+  <path d="M17.5 17.5c-2.5 0-4 0-6-1" />
+  <path d="M20 11.5c1 1.5 2 3.5 2 4.5" />
+  <path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
+  <path d="M22 22c-2 0-3.5-.5-5.5-1.5" />
+  <path d="M4.783 4.782C1.073 8.492 1 14.5 5 18c1-1 2-4.5 1.5-6.5 1.5 1 4 1 5.5.5M8.227 2.57C11.578 1.335 15.453 2.089 18 5c-.88.88-3.7 1.761-5.726 1.618" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/hop.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M17.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1" />
+  <path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
+  <path d="M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1" />
+  <path d="M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5" />
+  <path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
+  <path d="M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5" />
+  <path d="M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z" />
+  <path d="M4.5 4.5 3 3c-.184-.185-.184-.816 0-1" />
+</svg>

icons/milk-off.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M8 2h8" />
+  <path d="M9 2v1.343M15 2v2.789a4 4 0 0 0 .672 2.219l.656.984a4 4 0 0 1 .672 2.22v1.131M7.8 7.8l-.128.192A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3" />
+  <path d="M7 15a6.47 6.47 0 0 1 5 0 6.472 6.472 0 0 0 3.435.435" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/milk.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="M8 2h8" />
+  <path d="M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" />
+  <path d="M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
+</svg>

icons/monitor-smartphone.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="M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" />
+  <path d="M10 19v-3.96 3.15" />
+  <path d="M7 19h5" />
+  <rect x="16" y="12" width="6" height="10" rx="2" />
+</svg>

icons/nut-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="M12 4V2" />
+  <path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592a7.01 7.01 0 0 0 4.125-2.939" />
+  <path d="M19 10v3.343" />
+  <path d="M12 12c-1.349-.573-1.905-1.005-2.5-2-.546.902-1.048 1.353-2.5 2-1.018-.644-1.46-1.08-2-2-1.028.71-1.69.918-3 1 1.081-1.048 1.757-2.03 2-3 .194-.776.84-1.551 1.79-2.21m11.654 5.997c.887-.457 1.28-.891 1.556-1.787 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4-.74 0-1.461.068-2.15.192" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/nut.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 4V2" />
+  <path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592A7.003 7.003 0 0 0 19 14v-4" />
+  <path d="M12 4C8 4 4.5 6 4 8c-.243.97-.919 1.952-2 3 1.31-.082 1.972-.29 3-1 .54.92.982 1.356 2 2 1.452-.647 1.954-1.098 2.5-2 .595.995 1.151 1.427 2.5 2 1.31-.621 1.862-1.058 2.5-2 .629.977 1.162 1.423 2.5 2 1.209-.548 1.68-.967 2-2 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4Z" />
+</svg>

icons/pilcrow.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="M13 4v16" />
+  <path d="M17 4v16" />
+  <path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13" />
+</svg>

icons/spline.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 6V4c0-.6-.4-1-1-1h-2a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
+  <path d="M7 20v-2c0-.6-.4-1-1-1H4a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
+  <path d="M5 17A12 12 0 0 1 17 5" />
+</svg>

icons/vegan.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="M2 2c4.056 3.007 9.232 9.337 10 20 .897-6.818 1.5-9.5 4-14" />
+  <path d="M20.375 6.533A9.953 9.953 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c2.003 0 3.869.589 5.433 1.603" />
+  <path d="M17.104 4c-1.002 1.274-1.146 2.586-1.1 4 1.9-.1 3.003-.201 4.3-1.4 1.406-1.3 1.6-2.3 1.7-4.6-2.7.1-3.623.375-4.9 2Z" />
+</svg>

icons/wheat-off.svg

@@ -0,0 +1,22 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m2 22 10-10" />
+  <path d="m16 8-1.17 1.17" />
+  <path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97" />
+  <path d="M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62" />
+  <path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
+  <path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+  <path d="m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98" />
+  <path d="M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/wheat.svg

@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M2 22 16 8" />
+  <path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
+  <path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+  <path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+  <path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+</svg>

icons/wine-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="M8 22h8" />
+  <path d="M7 10h3m7 0h-1.343" />
+  <path d="M12 15v7" />
+  <path d="M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

package.json

@@ -13,47 +13,48 @@
     "lucide-svelte": "pnpm --filter lucide-svelte",
     "lucide-static": "pnpm --filter lucide-static",
     "build:icons": "node ./scripts/buildIcons.mjs --templateSrc ./packages/lucide/scripts/exportTemplate.mjs",
-    "build:outline-icons": "node ./scripts/outlineSvg.mjs",
+    "build:outline-icons": "pnpm --filter outline-svg start",
     "generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
     "optimize": "node ./scripts/optimizeSvgs.mjs",
     "addtags": "node ./scripts/addMissingKeysToTags.mjs",
-    "generate:changelog": "node ./scripts/generateChangelog.mjs"
+    "generate:changelog": "node ./scripts/generateChangelog.mjs",
+    "postinstall": "husky install",
+    "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}"
   },
   "devDependencies": {
     "@atomico/rollup-plugin-sizes": "^1.1.4",
-    "@babel/cli": "^7.18.9",
+    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.19.6",
-    "@babel/node": "^7.18.9",
+    "@babel/node": "^7.20.0",
-    "@babel/plugin-transform-runtime": "^7.18.9",
+    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/preset-env": "^7.19.4",
-    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-babel": "^6.0.2",
-    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^2.4.2",
+    "@rollup/plugin-replace": "^5.0.1",
-    "babel-jest": "^26.6.3",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "babel-jest": "^29.2.2",
     "babel-plugin-add-import-extension": "^1.6.0",
-    "core-js": "^3.24.0",
+    "core-js": "^3.26.0",
-    "esbuild": "^0.14.51",
+    "esbuild": "^0.15.12",
-    "eslint": "^4.19.1",
+    "eslint": "^8.26.0",
-    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^2.10.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^2.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "husky": "^4.3.8",
+    "husky": "^8.0.1",
-    "jest": "^28.1.3",
+    "jest": "^29.2.2",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^13.0.3",
-    "minimist": "^1.2.6",
+    "minimist": "^1.2.7",
-    "node-fetch": "^2.6.7",
+    "node-fetch": "^3.2.10",
-    "prettier": "1.17.1",
+    "prettier": "2.7.1",
-    "rollup": "^2.77.2",
+    "rollup": "^3.2.4",
-    "rollup-plugin-license": "^2.8.1",
+    "rollup-plugin-license": "^3.0.1",
-    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-terser": "^5.3.1",
+    "rollup-plugin-visualizer": "^5.8.3",
-    "rollup-plugin-visualizer": "^4.2.2",
-    "@rollup/plugin-typescript": "^8.3.4",
     "svg-outline-stroke": "^1.3.1",
-    "svgo": "^2.8.0",
+    "svgo": "^3.0.0",
-    "svgson": "^4.1.0"
+    "svgson": "^5.2.1"
   },
   "husky": {
     "hooks": {
@@ -62,5 +63,6 @@
   },
   "lint-staged": {
     "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
-  }
+  },
+  "packageManager": "pnpm@7.14.0"
 }

packages/lucide-angular/README.md

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for angular applications.
 
 ```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent implements OnInit {
   ngOnInit(): void {
     const div = document.getElementById('lucide-icon');
@@ -53,7 +54,7 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### Method 2: User __Tag__ with __name__ property
+### Method 2: User **Tag** with **name** property
 
 After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
 
@@ -67,9 +68,7 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
-  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -87,7 +86,7 @@ export class AppModule { }
 <lucide-icon name="edit" class="myicon"></lucide-icon>
 ```
 
-### Method 3: User __Tag__ with __img__ property
+### Method 3: User **Tag** with **img** property
 
 After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
 
@@ -101,14 +100,8 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
+  imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
   providers: [],
   bootstrap: [AppComponent]
 })
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent {
   ico1 = Airplay;
   ico2 = Circle;
@@ -146,7 +138,7 @@ In `Method 2`: import all icons in `app.module.ts` by:
 
 ```js
 ...
-import { icons } from 'lucide-angular/icons';
+import { icons } from 'lucide-angular';
 ....
 LucideAngularModule.pick(icons)
 ....

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
   "description": "A Lucide icon library package for Angular applications",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",
@@ -11,6 +11,9 @@
     "url": "https://github.com/lucide-icons/lucide.git",
     "directory": "packages/lucide-angular"
   },
+  "publishConfig": {
+    "directory": "dist"
+  },
   "keywords": [
     "Lucide",
     "Angular",
@@ -34,19 +37,19 @@
     "version": "pnpm version --git-tag-version=false"
   },
   "dependencies": {
-    "tslib": "^2.3.1"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.5",
+    "@angular-devkit/build-angular": "~14.2.6",
-    "@angular/cli": "~11.2.15",
+    "@angular/cli": "~14.2.6",
-    "@angular/common": "~11.2.14",
+    "@angular/common": "~14.2.7",
-    "@angular/compiler": "~11.2.14",
+    "@angular/compiler": "~14.2.7",
-    "@angular/compiler-cli": "~11.2.14",
+    "@angular/compiler-cli": "~14.2.7",
-    "@angular/core": "~11.2.14",
+    "@angular/core": "~14.2.7",
-    "@angular/platform-browser": "~11.2.14",
+    "@angular/platform-browser": "~14.2.7",
-    "@angular/platform-browser-dynamic": "~11.2.14",
+    "@angular/platform-browser-dynamic": "~14.2.7",
-    "@types/jasmine": "~3.10.2",
+    "@types/jasmine": "~4.3.0",
-    "@types/node": "^16.11.7",
+    "@types/node": "^18.11.4",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
@@ -55,13 +58,13 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^14.2.1",
     "protractor": "~7.0.0",
     "puppeteer": "^8.0.0",
-    "rxjs": "6.5.3",
+    "rxjs": "7.5.7",
-    "ts-node": "~10.4.0",
+    "ts-node": "~10.9.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.1.5",
+    "typescript": "~4.8.4",
-    "zone.js": "^0.11.7"
+    "zone.js": "^0.11.8"
   }
 }

packages/lucide-figma/package.json

@@ -13,7 +13,6 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
     "minimist": "^1.2.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"

packages/lucide-figma/src/api/fetchIcons.ts

@@ -66,3 +66,24 @@ export const getIcons = () => new Promise<LucideIcons>(async (resolve, reject)=>
     }
   }
 });
+
+type EventCallback = (lucideIcons: LucideIcons) => void
+
+export const iconFetchListener = (callback: EventCallback) => {
+  fetchIcons()
+
+  const handleEvent = (event: MessageEvent) => {
+    if (event.type === 'message' && event?.data?.pluginMessage.type === 'cachedIcons') {
+
+      const lucideIcons = event?.data?.pluginMessage?.cachedIcons
+      callback(lucideIcons)
+    }
+  }
+
+  window.addEventListener('message', handleEvent)
+
+  const removeListener = () => {
+    window.removeEventListener('message', handleEvent)
+  }
+  return removeListener
+}

packages/lucide-figma/src/components/IconButton/IconButton.scss

@@ -6,9 +6,11 @@
   border-radius: 2px;
   appearance: none;
   outline: 0;
+
   &:hover {
     background: rgba(0, 0, 0, 0.06);
   }
+
   &:focus,
   &:active {
     box-shadow: inset 0 0 0 2px var(--color-blue);

packages/lucide-figma/src/components/SearchInput/SearchInput.tsx

@@ -6,9 +6,10 @@ interface SearchInputProps extends React.HTMLProps<HTMLDivElement> {
   value: string,
   iconCount: number,
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  placeholder: string
 }
 
-function SearchInput({ value, onChange, iconCount, className, ...props }: SearchInputProps) {
+function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps) {
   return (
     <div
       className="search-input"
@@ -20,7 +21,7 @@ function SearchInput({ value, onChange, iconCount, className, ...props }: Search
         type="search"
         value={value}
         onChange={onChange}
-        placeholder={`Search ${iconCount} icons`}
+        placeholder={placeholder}
         className="input__field"
       />
     </div>

packages/lucide-figma/src/components/Skeleton/Skeleton.scss

@@ -0,0 +1,25 @@
+@keyframes load {
+  to {
+    background-position: 200% 0;
+  }
+}
+
+.skeleton {
+  --block: rgba(0, 0, 0, 0.06);
+  --loader: hsl(0 0% 89%);
+
+  background: linear-gradient(
+    -75deg,
+    transparent 40%,
+    var(--loader),
+    transparent 60%
+  ) 0 0 / 200% 100%,
+    var(--block);
+
+  border-radius: calc(var(--padding) * 0.5);
+  animation: load 2s infinite linear;
+  background-attachment: fixed;
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+}

packages/lucide-figma/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,13 @@
+import './Skeleton.scss'
+
+const Skeleton = () => {
+  return (
+    <>
+      {Array.from({length: 48 }, () => (
+        <div className="skeleton"/>
+      ))}
+    </>
+  )
+}
+
+export default Skeleton

packages/lucide-figma/src/interface/interface.tsx

@@ -6,7 +6,7 @@ type Views = typeof views
 
 import useSearch, { Icon } from '../hooks/useSearch'
 
-import { getIcons } from '../api/fetchIcons'
+import { getIcons, iconFetchListener, LucideIcons } from '../api/fetchIcons'
 import './interface.scss'
 import Menu from '../components/Menu'
 
@@ -19,21 +19,19 @@ function App() {
 
   const searchResults = useMemo(() => useSearch(icons, tags, query), [icons, query])
 
-  const getLatestIcons = async () => {
+  const handleFetchResponse = async (lucideIcons: LucideIcons) => {
-    const lucideIcons = await getIcons()
+    const icons = Object.entries(lucideIcons.iconNodes)
 
-    setIcons(Object.entries(lucideIcons.iconNodes))
+    setIcons(icons)
     setTags(lucideIcons.tags)
     setVersion(lucideIcons.version)
   }
 
   useEffect(() => {
-    getLatestIcons()
+    const removeListener = iconFetchListener(handleFetchResponse)
-  }, [])
 
-  if(!icons.length) {
+    return removeListener
-    return null
+  }, [])
-  }
 
   const View = views?.[page as keyof Views] ?? views.icons
 

packages/lucide-figma/src/views/Icons.tsx

@@ -2,6 +2,7 @@ import IconButton from '../components/IconButton'
 import SearchInput from '../components/SearchInput'
 import createIconComponent from '../helpers/createIconComponent'
 import { Icon } from '../hooks/useSearch'
+import Skeleton from '../components/Skeleton/Skeleton'
 
 interface PageProps {
   query: string
@@ -24,16 +25,22 @@ const Icons = ({
         value={query}
         iconCount={icons.length}
         onChange={(event)  => setQuery(event.target.value)}
+        placeholder={icons.length ? `Search ${icons.length} icons`: 'Loading icons ..'}
       />
         <main>
           <div className='icon-grid'>
-            {searchResults.map(([name, iconNode] :any) => (
+            {icons.length ? (
+              searchResults.map(([name, iconNode]: any) => (
                 <IconButton
                   name={name}
                   key={name}
                   component={createIconComponent(name, iconNode)}
                 />
-            ))}
+              ))
+            ) : (
+              <Skeleton />
+            )}
+
           </div>
           <footer>
             <a

packages/lucide-flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.92.0
+version: 0.100.0
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
 

packages/lucide-preact/README.md

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -29,7 +31,7 @@ import { Camera } from 'lucide-preact';
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,11 +39,11 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props / svg attributes
 
@@ -50,7 +52,7 @@ You can also pass custom props that will be added in the as attributes. With tha
 ```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -70,7 +72,7 @@ import * as icons from 'lucide-preact';
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
   "description": "A Lucide icon library package for Preact applications",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -28,7 +28,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   },

packages/lucide-preact/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: "json" };
 
 const packageName = 'LucidePreact';
 const outputFileName = 'lucide-preact';

packages/lucide-react-native/README.md

@@ -6,13 +6,15 @@ Implementation of the lucide icon library for React Native applications.
 
 ## Installation
 
-First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
+First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0.0` installed. Then, install the package:
 
 ```sh
 yarn add lucide-react-native
+```
 
-# or
+or
 
+```sh
 npm install lucide-react-native
 ```
 
@@ -29,7 +31,7 @@ You can pass additional props to adjust the icon.
 import { Camera } from 'lucide-react-native';
 
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,11 +39,11 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props
 
@@ -49,7 +51,7 @@ You can also pass custom props that will be added in the svg as attributes.
 
 ```js
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -65,7 +67,7 @@ import * as icons from 'lucide-react-native';
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-react-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react-native",
   "description": "A Lucide icon library package for React Native applications",
-  "version": "0.48.0-alpha.5",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,31 +19,33 @@
   "typings": "dist/lucide-react-native.d.ts",
   "react-native": "dist/esm/lucide-react-native.js",
   "sideEffects": false,
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "^13.4.0",
     "babel-preset-react-app": "^10.0.0",
     "jest": "^26.6.3",
     "prop-types": "^15.7.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-native": "^0.69.0",
-    "react-native-svg": "^12.0.0"
+    "react-native-svg": "^13.0.0"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.5.1 || ^17.0.0 || ^18.0.0",
-    "react-native": ">=0.50.0",
+    "react-native": "*",
-    "react-native-svg": "^12.0.0"
+    "react-native-svg": "^12.0.0 || ^13.0.0"
   }
 }

packages/lucide-react-native/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react-native';

packages/lucide-react/README.md

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -27,7 +29,7 @@ You can pass additional props to adjust the icon.
 import { Camera } from 'lucide-react';
 
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -35,11 +37,11 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props
 
@@ -47,7 +49,7 @@ You can also pass custom props that will be added in the svg as attributes.
 
 ```js
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -63,7 +65,7 @@ import * as icons from 'lucide-react';
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
   "description": "A Lucide icon library package for React applications",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -28,7 +28,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   },

packages/lucide-react/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react';

packages/lucide-solid/README.md

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for solid applications.
 
 ```sh
 yarn add lucide-solid
+```
 
-# or
+or
 
+```sh
 npm install lucide-solid
 ```
 
@@ -29,7 +31,7 @@ import { Camera } from 'lucide-solid';
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,11 +39,11 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props / svg attributes
 
@@ -50,7 +52,7 @@ You can also pass custom props that will be added in the as attributes. With tha
 ```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 

packages/lucide-solid/package.json

@@ -28,7 +28,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test:jest": "jest",
     "test": "vitest",
     "version": "pnpm version --git-tag-version=false"

packages/lucide-solid/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideSolid';
 const outputFileName = 'lucide-solid';

packages/lucide-solid/vitest.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
     setupFiles: './tests/setupVitest.js',
     threads: false,
     isolate: false,
+    watch: false,
   },
   resolve: {
     conditions: ['development', 'browser'],

packages/lucide-static/README.md

@@ -21,9 +21,11 @@ This package is suitable for very specific use cases for example if you want to
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
@@ -31,13 +33,13 @@ npm install lucide-static
 
 ```html
 <!-- Svg File -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
 <!-- Icon Font -->
 <style>
   @font-face {
-    font-family: "LucideIcons";
+    font-family: 'LucideIcons';
-    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
+    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
   }
 </style>
 ```
@@ -54,14 +56,15 @@ To use it in for example html:
 
 ```html
 <!-- Svg File -->
-<img src="~lucide-static/icons/home.svg">
+<img src="~lucide-static/icons/home.svg" />
 ```
 
 ```css
 .home-icon {
-  background-image: url(~lucide-static/icons/home.svg)
+  background-image: url(~lucide-static/icons/home.svg);
 }
 ```
+
 Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
 
 #### Svg file Inline
@@ -70,7 +73,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
 To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
 
 ```js
-import arrowRightIcon from 'lucide-static/icons/arrow-right'
+import arrowRightIcon from 'lucide-static/icons/arrow-right';
 
 // return string of a svg
 ```
@@ -81,7 +84,7 @@ You may need additional loader for this.
 
 ```html
 <!-- Icon Sprite, not recommended for production! -->
-<img src="lucide-static/sprite.svg#home">
+<img src="lucide-static/sprite.svg#home" />
 
 <!-- or -->
 <svg
@@ -96,9 +99,7 @@ You may need additional loader for this.
   <use href="#alert-triangle" />
 </svg>
 
-<svg>
+<svg>...sprite svg</svg>
-  ...sprite svg
-</svg>
 ```
 
 If you'd prefer, you can use CSS to hold your base SVG properties
@@ -134,20 +135,19 @@ and update the svg as follows
 ### Icon Font
 
 ```css
-@import("~lucide-static/font/Lucide.css")
+@import ('~lucide-static/font/Lucide.css');
 ```
 
 ```html
 <div class="icon-home"></div>
 ```
 
-
 ### Node.js
 
 To use lucide icons in your Nodejs project you can import each icon as:
 
 ```js
-const { messageSquare } = require('lucide-static/lib')
+const { messageSquare } = require('lucide-static/lib');
 ```
 
 > Note: Each icon name is in camelCase.
@@ -155,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
 #### Example in node.js project
 
 ```js
-const express = require('express')
+const express = require('express');
-const { messageSquare } = require('lucide-static/lib')
+const { messageSquare } = require('lucide-static/lib');
-const app = express()
+const app = express();
-const port = 3000
+const port = 3000;
 
 app.get('/', (req, res) => {
   res.send(`
@@ -173,12 +173,12 @@ app.get('/', (req, res) => {
 
       </body>
     </html>
-  `)
+  `);
-})
+});
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
+  console.log(`Example app listening at http://localhost:${port}`);
-})
+});
 ```
 
 ## Contributing

packages/lucide-svelte/README.md

@@ -8,9 +8,11 @@ Implementation of the lucide icon library for svelte applications.
 
 ```sh
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -42,14 +44,14 @@ import { Camera } from 'lucide-svelte'
 
 ### Available props
 
-|  name          |   type   |  default
+| name          | type     | default      |
-| -------------- | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`         | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`        | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`  | *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
-| `*<SVGProps>`  | *String* | -
+| `*<SVGProps>` | _String_ | -            |
 
-* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+- All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
 
 ### Example of custom props
 

packages/lucide-svelte/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-svelte",
   "description": "A Lucide icon library package for Svelte applications",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -29,7 +29,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --exportFileName=index.js --iconFileExtention=.svelte --pretty=false",
     "build:es": "babel src -d dist/esm --copy-files",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "test:watch": "jest --watch",
     "version": "pnpm version --git-tag-version=false"

packages/lucide-svelte/rollup.config.mjs

@@ -6,7 +6,7 @@ import { terser } from 'rollup-plugin-terser';
 import license from 'rollup-plugin-license';
 import resolve from '@rollup/plugin-node-resolve';
 import commonJS from '@rollup/plugin-commonjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideSvelte';
 const outputFileName = 'lucide-svelte';

packages/lucide-vue-next/README.md

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue 3 applications.
 
 ```sh
 yarn add lucide-vue-next
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue-next
 ```
 
@@ -27,10 +29,7 @@ You can pass additional props to adjust the icon.
 
 ```vue
 <template>
-  <Camera
+  <Camera color="red" :size="32" />
-    color="red"
-    :size="32"
-  />
 </template>
 
 <script>
@@ -38,21 +37,20 @@ You can pass additional props to adjust the icon.
 import { Camera } from 'lucide-vue-next';
 
 export default {
-  name: "My Component",
+  name: 'My Component',
   components: { Camera }
-}
+};
-
 </script>
 ```
 
 ### Props
 
-|  name        |   type   |  default
+| name           | type     | default      |
-| ------------ | -------- | --------
+| -------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`         | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`        | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth`  | _Number_ | 2            |
-| `defaultClass`| *String* | lucide-icon
+| `defaultClass` | _String_ | lucide-icon  |
 
 ### Custom props
 
@@ -78,20 +76,20 @@ It is possible to create one generic icon component to load icons.
 </template>
 
 <script>
-import * as icons from "lucide-vue-next";
+import * as icons from 'lucide-vue-next';
 
 export default {
   props: {
     name: {
       type: String,
-      required: true,
+      required: true
-    },
+    }
   },
   computed: {
     icon() {
       return icons[this.name];
-    },
+    }
-  },
+  }
 };
 </script>
 ```

packages/lucide-vue-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
@@ -30,7 +30,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs  --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "version": "pnpm version --git-tag-version=false"

packages/lucide-vue-next/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideVueNext';
 const outputFileName = 'lucide-vue-next';

packages/lucide-vue/README.md

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for Vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -27,10 +29,7 @@ You can pass additional props to adjust the icon.
 
 ```vue
 <template>
-  <Camera
+  <Camera color="red" :size="32" />
-    color="red"
-    :size="32"
-  />
 </template>
 
 <script>
@@ -38,21 +37,20 @@ You can pass additional props to adjust the icon.
 import { Camera } from 'lucide-vue';
 
 export default {
-  name: "My Component",
+  name: 'My Component',
   components: { Camera }
-}
+};
-
 </script>
 ```
 
 ### Props
 
-|  name        |   type   |  default
+| name           | type     | default      |
-| ------------ | -------- | --------
+| -------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`         | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`        | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth`  | _Number_ | 2            |
-| `defaultClass`| *String* | lucide-icon
+| `defaultClass` | _String_ | lucide-icon  |
 
 ### Custom props
 
@@ -78,20 +76,20 @@ It is possible to create one generic icon component to load icons.
 </template>
 
 <script>
-import * as icons from "lucide-vue";
+import * as icons from 'lucide-vue';
 
 export default {
   props: {
     name: {
       type: String,
-      required: true,
+      required: true
-    },
+    }
   },
   computed: {
     icon() {
       return icons[this.name];
-    },
+    }
-  },
+  }
 };
 </script>
 ```
@@ -109,17 +107,21 @@ export default {
 ## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",
@@ -27,7 +27,7 @@
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs",
     "build:es": "babel src -d dist/esm",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "version": "pnpm version --git-tag-version=false"

packages/lucide-vue/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideVue';
 const outputFileName = 'lucide-vue';

packages/lucide/README.md

@@ -6,9 +6,13 @@ Implementation of the lucide icon library for web applications.
 
 ### Package Managers
 
-``` bash
+```sh
 npm install lucide
-#or
+```
+
+or
+
+```sh
 yarn add lucide
 ```
 
@@ -65,8 +69,8 @@ createIcons({
   icons: {
     Menu,
     ArrowRight,
-    Globe,
+    Globe
-  },
+  }
 });
 ```
 
@@ -83,9 +87,9 @@ createIcons({
   attrs: {
     class: ['my-custom-class', 'icon'],
     'stroke-width': 1,
-    stroke: '#333',
+    stroke: '#333'
   },
-  nameAttr: 'icon-name', // attribute for the icon name.
+  nameAttr: 'icon-name' // attribute for the icon name.
 });
 ```
 
@@ -98,8 +102,8 @@ createIcons({
   icons: {
     Menu,
     ArrowRight,
-    Globe,
+    Globe
-  },
+  }
 });
 ```
 

packages/lucide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide",
   "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.92.0",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -28,7 +28,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c rollup.config.js",
+    "build:bundles": "rollup -c rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   }

packages/lucide/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
+import plugins from '../../rollup.plugins.mjs';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const outputFileName = pkg.name;
 const outputDir = 'dist';

packages/lucide/scripts/buildTypes.mjs

@@ -2,14 +2,13 @@ import path from 'path';
 
 import {
   readSvgDirectory,
-  resetFile,
   appendFile,
   writeFile,
   toPascalCase,
   getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';
 
-const currentDir = getCurrentDirPath(import.meta.url)
+const currentDir = getCurrentDirPath(import.meta.url);
 
 const defaultAttributes = {
   xmlns: 'http://www.w3.org/2000/svg',
@@ -77,7 +76,7 @@ writeFile(typeDefinitions, TYPES_FILE_NAME, TARGET_DIR);
 
 const svgFiles = readSvgDirectory(ICONS_DIR);
 
-svgFiles.forEach(svgFile => {
+svgFiles.forEach((svgFile) => {
   const nameSvg = path.basename(svgFile, '.svg');
   const namePascal = toPascalCase(nameSvg);
 

packages/lucide/src/createElement.js

@@ -8,12 +8,12 @@
 const createElement = (tag, attrs, children = []) => {
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
 
-  Object.keys(attrs).forEach(name => {
+  Object.keys(attrs).forEach((name) => {
     element.setAttribute(name, attrs[name]);
   });
 
   if (children.length) {
-    children = children.forEach(child => {
+    children = children.forEach((child) => {
       const childElement = createElement(...child);
 
       element.appendChild(childElement);

packages/lucide/src/lucide.js

@@ -18,7 +18,7 @@ const createIcons = ({ icons = {}, nameAttr = 'icon-name', attrs = {} } = {}) =>
 
   const elementsToReplace = document.querySelectorAll(`[${nameAttr}]`);
 
-  Array.from(elementsToReplace).forEach(element =>
+  Array.from(elementsToReplace).forEach((element) =>
     replaceElement(element, { nameAttr, icons, attrs }),
   );
 };

packages/lucide/src/replaceElement.js

@@ -5,7 +5,7 @@ import createElement from './createElement';
  * @param {HTMLElement} element
  * @returns {Object}
  */
-export const getAttrs = element =>
+export const getAttrs = (element) =>
   Array.from(element.attributes).reduce((attrs, attr) => {
     attrs[attr.name] = attr.value;
     return attrs;
@@ -16,7 +16,7 @@ export const getAttrs = element =>
  * @param {Object} attrs
  * @returns {Array}
  */
-export const getClassNames = attrs => {
+export const getClassNames = (attrs) => {
   if (typeof attrs === 'string') return attrs;
   if (!attrs || !attrs.class) return '';
   if (attrs.class && typeof attrs.class === 'string') {
@@ -33,17 +33,17 @@ export const getClassNames = attrs => {
  * @param {array} arrayOfClassnames
  * @returns {string}
  */
-export const combineClassNames = arrayOfClassnames => {
+export const combineClassNames = (arrayOfClassnames) => {
   const classNameArray = arrayOfClassnames.flatMap(getClassNames);
 
   return classNameArray
-    .map(classItem => classItem.trim())
+    .map((classItem) => classItem.trim())
     .filter(Boolean)
     .filter((value, index, self) => self.indexOf(value) === index)
     .join(' ');
 };
 
-const toPascalCase = string =>
+const toPascalCase = (string) =>
   string.replace(/(\w)(\w*)(_|-|\s*)/g, (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase());
 
 /**

pnpm-workspace.yaml

@@ -1,3 +1,4 @@
 packages:
   - 'packages/*'
+  - 'tools/*'
   - 'site'

rollup.plugins.mjs

@@ -1,8 +1,8 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import babel from '@rollup/plugin-babel';
+import { babel } from '@rollup/plugin-babel';
 import bundleSize from '@atomico/rollup-plugin-sizes';
 import { terser } from 'rollup-plugin-terser';
-import visualizer from 'rollup-plugin-visualizer';
+import { visualizer } from 'rollup-plugin-visualizer';
 import license from 'rollup-plugin-license';
 import replace from '@rollup/plugin-replace';
 import resolve from '@rollup/plugin-node-resolve';

scripts/Dockerfile

@@ -0,0 +1,21 @@
+## This Dockerfile is for building image for github actions
+FROM debian:stable-slim
+
+RUN apt-get update
+RUN apt-get install zlib1g-dev fontforge git build-essential ruby-full -y
+
+# sfnt2woff
+RUN git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
+WORKDIR /sfnt2woff-zopfli
+RUN make
+RUN cp sfnt2woff-zopfli /usr/local/bin/sfnt2woff
+
+# WOFF2
+WORKDIR /
+RUN git clone --recursive https://github.com/google/woff2.git
+WORKDIR /woff2
+RUN make clean all
+RUN mv woff2_compress /usr/local/bin/
+RUN mv woff2_decompress /usr/local/bin/
+
+RUN gem install fontcustom