Add icon check-check (#809)

* add icon check check

* Update icons/check-check.svg

Co-authored-by: Karsa <contact@karsa.org>

Co-authored-by: Karsa <contact@karsa.org>

.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

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-angular test
-

.github/workflows/lucide-preact.yml

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-preact test
-

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

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react-native test
-

.github/workflows/lucide-react.yml

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react test
-

.github/workflows/lucide-solid.yml

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-solid test
-

.github/workflows/lucide-static.yml

@@ -12,8 +12,8 @@ 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 +42,3 @@ jobs:
 
       - name: Build
         run: pnpm --filter lucide-static build
-

.github/workflows/lucide-svelte.yml

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-svelte test
-

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

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue-next test
-

.github/workflows/lucide-vue.yml

@@ -12,8 +12,8 @@ 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 +45,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue test
-

.github/workflows/lucide.yml

@@ -12,8 +12,8 @@ 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 +45,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
 
@@ -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
 
@@ -582,8 +582,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
 
@@ -639,7 +639,7 @@ jobs:
           mkdir lucide-font
           pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
 
-      - name: "Upload to Artifacts"
+      - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v1
         with:
           name: lucide-font
@@ -652,7 +652,7 @@ jobs:
     container:
       image: cirrusci/flutter:latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
       - uses: actions/cache@v2
         with:
@@ -735,13 +735,14 @@ jobs:
       ]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
 
       - name: Commit package files
         run: |
           mv lucide-package-json/package.json packages/lucide/package.json
           mv lucide-react-package-json/package.json packages/lucide-react/package.json
+          mv lucide-react-native-package-json/package.json packages/lucide-react-native/package.json
           mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
           mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
           mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json

README.md

@@ -56,9 +56,11 @@ Implementation of the lucide icon library for web applications.
 
 ```sh
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
@@ -70,9 +72,11 @@ Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -84,9 +88,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 +104,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -112,9 +120,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 +134,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 +150,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -157,9 +171,11 @@ NPM package
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
@@ -197,9 +213,11 @@ Implementation of the lucide icon library for Svelte applications.
 
 ```sh
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -211,9 +229,11 @@ Implementation of the lucide icon library for solid applications.
 
 ```sh
 yarn add lucide-solid
+```
 
-#or
+or
 
+```sh
 npm install lucide-solid
 ```
 
@@ -245,4 +265,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

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

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
 ```
 
@@ -25,13 +27,13 @@ Each icon can be imported as a preact component.
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-preact';
 // Returns PreactComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -39,20 +41,20 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| 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
 
 You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
 
-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -66,13 +68,13 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` js
+```js
 import * as icons from 'lucide-preact';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

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

@@ -4,11 +4,13 @@ Implementation of the lucide icon library for react applications
 
 ## Installation
 
-``` bash
+```bash
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -21,13 +23,13 @@ Each icon can be imported as a react component.
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-react';
 // Returns ReactComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -35,20 +37,20 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
+| name          | type     | default      |
-| ------------ | -------- | --------
+| ------------- | -------- | ------------ |
-| `size`       | *Number* | 24
+| `size`        | _Number_ | 24           |
-| `color`      | *String* | currentColor
+| `color`       | _String_ | currentColor |
-| `strokeWidth`| *Number* | 2
+| `strokeWidth` | _Number_ | 2            |
 
 ### Custom props
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -60,13 +62,13 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` js
+```js
 import * as icons from 'lucide-react';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

docs/packages/lucide-static.md

@@ -19,23 +19,25 @@ This package is suitable for very specific use cases for example if you want to
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
 ### CDN
 
-``` html
+```html
 <!-- Svg File -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
 <!-- Icon Font -->
 <style>
   @font-face {
-    font-family: "LucideIcons";
+    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>
 ```
@@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
 
 To use it in for example html:
 
-``` html
+```html
 <!-- Svg File -->
-<img src="~lucide-static/icons/home.svg">
+<img src="~lucide-static/icons/home.svg" />
 ```
 
-``` css
+```css
 .home-icon {
-  background-image: url(~lucide-static/icons/home.svg)
+  background-image: url(~lucide-static/icons/home.svg);
 }
 ```
 
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
 To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
 
 ```js
-import arrowRightIcon from 'lucide-static/icons/arrow-right'
+import arrowRightIcon from 'lucide-static/icons/arrow-right';
 
 // return string of a svg
 ```
@@ -80,7 +82,7 @@ You may need additional loader for this.
 
 ```html
 <!-- Icon Sprite, not recommended for production! -->
-<img src="lucide-static/sprite.svg#home">
+<img src="lucide-static/sprite.svg#home" />
 
 <!-- or -->
 <svg
@@ -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,17 +24,17 @@ Default usage:
 
 ```html
 <script>
-import { Skull } from 'lucide-svelte'
+  import { Skull } from 'lucide-svelte';
 </script>
 
-<Skull/>
+<Skull />
 ```
 
 You can pass additional props to adjust the icon.
 
 ```html
 <script>
-import { Camera } from 'lucide-svelte'
+  import { Camera } from 'lucide-svelte';
 </script>
 
 <Camera 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,10 +55,10 @@ import { Camera } from 'lucide-svelte'
 
 ```html
 <script>
-import { Phone } from 'lucide-svelte'
+  import { Phone } from 'lucide-svelte';
 </script>
 
-<Phone fill="#333"/>
+<Phone fill="#333" />
 ```
 
 This results a filled phone icon.
@@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` html
+```html
 <script>
-  import * as icons from "lucide-svelte";
+  import * as icons from 'lucide-svelte';
   export let name;
 </script>
 
-<svelte:component this={icons[name]} {...$$props}/>
+<svelte:component this="{icons[name]}" {...$$props} />
 ```
 
 ##### Then you can use it like this
 
-``` html
+```html
 <script>
-  import LucideIcon from "./LucideIcon";
+  import LucideIcon from './LucideIcon';
 </script>
 
 <LucideIcon name="Menu" />

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
 ```
 
@@ -23,40 +25,36 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` html
+```html
 <template>
-  <Camera
+  <Camera color="red" :size="32" />
-    color="red"
-    :size="32"
-  />
 </template>
 
 <script>
-// Returns Vue component
+  // Returns Vue component
-import { Camera } from 'lucide-vue';
+  import { Camera } from 'lucide-vue';
 
-export default {
+  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
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` html
+```html
 <template>
   <Camera fill="red" />
 </template>
@@ -70,33 +68,33 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` html
+```html
 <template>
   <component :is="icon" />
 </template>
 
 <script>
-import * as icons from "lucide-vue";
+  import * as icons from 'lucide-vue';
 
-export default {
+  export default {
     props: {
       name: {
         type: String,
-      required: true,
+        required: true
-    },
+      }
     },
     computed: {
       icon() {
         return icons[this.name];
-    },
+      }
-  },
+    }
-};
+  };
 </script>
 ```
 
 ##### Then you can use it like this
 
-``` html
+```html
 <template>
   <div id="app">
     <Icon name="Airplay" />

docs/packages/lucide.md

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

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/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/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>

package.json

@@ -17,7 +17,8 @@
     "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"
   },
   "devDependencies": {
     "@atomico/rollup-plugin-sizes": "^1.1.4",
@@ -39,7 +40,7 @@
     "eslint-config-prettier": "^2.10.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^2.7.0",
-    "husky": "^4.3.8",
+    "husky": "^8.0.0",
     "jest": "^28.1.3",
     "lint-staged": "^10.5.4",
     "minimist": "^1.2.6",
@@ -62,5 +63,6 @@
   },
   "lint-staged": {
     "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
-  }
+  },
+  "packageManager": "pnpm@7.14.0"
 }

packages/lucide-angular/README.md

@@ -6,11 +6,13 @@ Implementation of the lucide icon library for angular applications.
 
 ## Installation
 
-``` sh
+```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -22,12 +24,12 @@ There are three ways for use this library.
 
 After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
 
-``` html
+```html
 <!-- app.component.html -->
 <div id="lucide-icon"></div>
 ```
 
-``` js
+```js
 // app.component.ts
 
 import { Component, OnInit } from '@angular/core';
@@ -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,11 +54,11 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### Method 2: User __Tag__ with __name__ property
+### Method 2: User **Tag** with **name** property
 
 After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
 
-``` js
+```js
 // app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -67,9 +68,7 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
-  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
@@ -78,20 +77,20 @@ import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
-``` html
+```html
 <!-- app.component.html -->
 <lucide-icon name="alarm-check" class="myicon"></lucide-icon>
 <lucide-icon name="edit" class="myicon"></lucide-icon>
 ```
 
-### Method 3: User __Tag__ with __img__ property
+### Method 3: User **Tag** with **img** property
 
 After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
 
-``` js
+```js
 // app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -101,27 +100,21 @@ 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 { }
+export class AppModule {}
 ```
 
-``` xml
+```xml
 <!-- app.component.html -->
 <lucide-icon [img]="ico1" class="myicon"></lucide-icon>
 <lucide-icon [img]="ico2" class="myicon"></lucide-icon>
 ```
 
-``` js
+```js
 // app.component.ts
 import { Component } from '@angular/core';
 import { Airplay, Circle } from 'lucide-angular';
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent {
   ico1 = Airplay;
   ico2 = Circle;
@@ -144,7 +136,7 @@ export class AppComponent {
 
 In `Method 2`: import all icons in `app.module.ts` by:
 
-``` js
+```js
 ...
 import { icons } from 'lucide-angular/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.93.0",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",
@@ -34,34 +34,35 @@
     "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-core": "~4.4.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.14",
+    "karma": "~6.4.1",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.1.1",
-    "karma-coverage": "~2.0.3",
+    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~4.0.1",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^1.7.0",
+    "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^14.2.1",
     "protractor": "~7.0.0",
-    "puppeteer": "^8.0.0",
+    "puppeteer": "^19.1.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-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.93.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
 ```
 
@@ -23,13 +25,13 @@ Each icon can be imported as a preact component.
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-preact';
 // Returns PreactComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,20 +39,20 @@ 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
 
 You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
 
-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -64,13 +66,13 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` js
+```js
 import * as icons from 'lucide-preact';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

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.93.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

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
 ```
 
@@ -25,11 +27,11 @@ Each icon can be imported as a react component.
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-react-native';
 
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,19 +39,19 @@ 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
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` js
+```js
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -59,13 +61,13 @@ It is possible to create a generic icon component to load icons.
 
 > :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
 
-``` js
+```js
 import * as icons from 'lucide-react-native';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-react-native/package.json

@@ -19,7 +19,9 @@
   "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",
@@ -38,12 +40,12 @@
     "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/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
 ```
 
@@ -23,11 +25,11 @@ Each icon can be imported as a react component.
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-react';
 
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -35,19 +37,19 @@ 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
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` js
+```js
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -57,13 +59,13 @@ It is possible to create a generic icon component to load icons.
 
 > :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
 
-``` js
+```js
 import * as icons from 'lucide-react';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

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.93.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

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
 ```
 
@@ -23,13 +25,13 @@ Each icon can be imported as a solid component.
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-solid';
 // Returns SolidComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,20 +39,20 @@ 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
 
 You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
 
-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -62,7 +64,7 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` tsx
+```tsx
 import * as icons from 'lucide-solid';
 import type { LucideProps } from 'lucide-solid';
 import { splitProps } from 'solid-js';

packages/lucide-static/README.md

@@ -21,23 +21,25 @@ This package is suitable for very specific use cases for example if you want to
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
 ### CDN
 
-``` html
+```html
 <!-- Svg File -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
 <!-- Icon Font -->
 <style>
   @font-face {
-    font-family: "LucideIcons";
+    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,16 +54,17 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
 
 To use it in for example html:
 
-``` html
+```html
 <!-- Svg File -->
-<img src="~lucide-static/icons/home.svg">
+<img src="~lucide-static/icons/home.svg" />
 ```
 
-``` css
+```css
 .home-icon {
-  background-image: url(~lucide-static/icons/home.svg)
+  background-image: url(~lucide-static/icons/home.svg);
 }
 ```
+
 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
 
@@ -71,7 +73,7 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` svelte
+```svelte
 <script>
   import * as icons from "lucide-svelte";
   export let name;
@@ -82,7 +84,7 @@ It is possible to create one generic icon component to load icons.
 
 ##### Then you can use it like this
 
-``` svelte
+```svelte
 <script>
   import LucideIcon from "./LucideIcon";
 </script>

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.93.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

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
 ```
 
@@ -25,12 +27,9 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` vue
+```vue
 <template>
-  <Camera
+  <Camera color="red" :size="32" />
-    color="red"
-    :size="32"
-  />
 </template>
 
 <script>
@@ -38,27 +37,26 @@ 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
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` vue
+```vue
 <template>
   <Camera fill="red" />
 </template>
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` vue
+```vue
 <template>
   <component :is="icon" />
 </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>
 ```
 
 ##### Then you can use it like this
 
-``` vue
+```vue
 <template>
   <div id="app">
     <Icon name="Airplay" />

packages/lucide-vue-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.92.0",
+  "version": "0.93.0",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",

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
 ```
 
@@ -25,12 +27,9 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` vue
+```vue
 <template>
-  <Camera
+  <Camera color="red" :size="32" />
-    color="red"
-    :size="32"
-  />
 </template>
 
 <script>
@@ -38,27 +37,26 @@ 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
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` vue
+```vue
 <template>
   <Camera fill="red" />
 </template>
@@ -72,33 +70,33 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` vue
+```vue
 <template>
   <component :is="icon" />
 </template>
 
 <script>
-import * as icons from "lucide-vue";
+import * as icons from 'lucide-vue';
 
 export default {
   props: {
     name: {
       type: String,
-      required: true,
+      required: true
-    },
+    }
   },
   computed: {
     icon() {
       return icons[this.name];
-    },
+    }
-  },
+  }
 };
 </script>
 ```
 
 ##### Then you can use it like this
 
-``` vue
+```vue
 <template>
   <div id="app">
     <Icon name="Airplay" />
@@ -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.93.0",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",

packages/lucide/README.md

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

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.93.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

site/package.json

@@ -16,8 +16,6 @@
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^11.0.0",

site/src/components/Header.tsx

@@ -1,6 +1,5 @@
 import { Button, Flex, Link, WrapItem, Text, Wrap, Heading } from '@chakra-ui/react';
 import download from 'downloadjs';
-import JSZip from 'jszip';
 import { Download, Github } from 'lucide-react';
 import NextLink from 'next/link';
 import { IconCustomizerDrawer } from './IconCustomizerDrawer';
@@ -12,7 +11,6 @@ import PreactLogo from '../../public/framework-logos/preact.svg';
 import AngularLogo from '../../public/framework-logos/angular.svg';
 import FlutterLogo from '../../public/framework-logos/flutter.svg';
 import SvelteLogo from '../../public/framework-logos/svelte.svg';
-import LaravelLogo from '../../public/framework-logos/laravel.svg';
 import { useState } from 'react';
 import { useCustomizeIconContext } from './CustomizeIconContext';
 import { IconEntity } from '../types';
@@ -20,6 +18,8 @@ import { IconEntity } from '../types';
 type IconContent = [icon: string, src:string];
 
 async function generateZip(icons: IconContent[]) {
+  const JSZip = (await import('jszip')).default
+
   const zip = new JSZip();
 
   const addingZipPromises = icons.map(([name, src]) =>
@@ -73,6 +73,12 @@ const Header = ({ data }: HeaderProps) => {
       href: '/docs/lucide-react',
       label: 'Lucide documentation for React',
     },
+    {
+      name: 'lucide-react-native',
+      Logo: ReactLogo,
+      href: '/docs/lucide-react-native',
+      label: 'Lucide documentation for React Native',
+    },
     {
       name: 'lucide-vue',
       Logo: VueLogo,
@@ -109,12 +115,6 @@ const Header = ({ data }: HeaderProps) => {
       href: '/docs/lucide-flutter',
       label: 'Lucide documentation for Flutter',
     },
-    {
-      name: 'lucide-laravel',
-      Logo: LaravelLogo,
-      href: 'https://github.com/mallardduck/blade-lucide-icons',
-      label: 'Lucide documentation for Laravel',
-    },
   ];
 
   return (
@@ -159,6 +159,13 @@ const Header = ({ data }: HeaderProps) => {
             </NextLink>
           </WrapItem>
         ))}
+        <WrapItem>
+          <NextLink href="/packages" passHref>
+            <Link _hover={{ opacity: 0.8 }} marginX="auto">
+              <Text fontSize="md" opacity={0.5}>More options</Text>
+            </Link>
+          </NextLink>
+        </WrapItem>
       </Wrap>
       <Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
         <WrapItem>

site/src/components/IconDetailOverlay.tsx

@@ -6,7 +6,7 @@ import {useContext, useEffect, useRef} from "react";
 import {IconStyleContext} from "./CustomizeIconContext";
 import {IconWrapper} from "./IconWrapper";
 import ModifiedTooltip from "./ModifiedTooltip";
-import { IconData } from "../lib/icons";
+import { IconEntity } from "../types";
 
 type IconDownload = {
   src: string;
@@ -16,7 +16,7 @@ type IconDownload = {
 interface IconDetailOverlayProps {
   open: boolean
   close: () => void
-  icon?: IconData
+  icon?: IconEntity
 }
 
 const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps) => {
@@ -152,7 +152,7 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
                     className="icon-large"
                   >
                     <IconWrapper
-                      content={icon.content}
+                      src={icon.src}
                       stroke={color}
                       strokeWidth={strokeWidth}
                       height={size}
@@ -229,8 +229,8 @@ const IconDetailOverlay = ({ open = true, close, icon }: IconDetailOverlayProps)
                       </Heading>
                       <AvatarGroup size="md">
                         { icon.contributors.map((commit, index) => (
-                          <Link href={`https://github.com/${commit.author}`} isExternal key={`${index}_${commit.commit}`}>
+                          <Link href={`https://github.com/${commit.author}`} isExternal key={`${index}_${commit.author}`}>
-                            <Tooltip label={commit.author} key={commit.commit}>
+                            <Tooltip label={commit.author} key={commit.author}>
                               <Avatar name={commit.author} src={`https://github.com/${commit.author}.png?size=88`} />
                             </Tooltip>
                           </Link>

site/src/components/IconList.tsx

@@ -2,8 +2,8 @@ import { Grid } from '@chakra-ui/react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { memo } from 'react';
-import { IconEntity } from '../types';
 import IconListItem from './IconListItem';
+import { IconEntity } from '../types';
 
 interface IconListProps {
   icons: IconEntity[];

site/src/components/IconListItem.tsx

@@ -1,19 +1,16 @@
 import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
 import download from 'downloadjs';
 import { memo } from 'react';
-import { Contributor } from '../lib/fetchAllContributors';
 import { useCustomizeIconContext } from './CustomizeIconContext';
 import { IconWrapper } from './IconWrapper';
 
 interface IconListItemProps {
   name: string;
-  content: string;
-  contributors: Contributor[]
-  src: string;
   onClick?: ButtonProps['onClick']
+  src: string;
 }
 
-const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) => {
+const IconListItem = ({ name, onClick, src: svg }: IconListItemProps) => {
   const toast = useToast();
   const { color, size, strokeWidth, iconsRef } = useCustomizeIconContext();
 
@@ -53,7 +50,7 @@ const IconListItem = ({ name, content, onClick, src: svg }: IconListItemProps) =
       <Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
         <Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
           <IconWrapper
-            content={content}
+            src={svg}
             stroke={color}
             strokeWidth={strokeWidth}
             height={size}

site/src/components/IconOverview.tsx

@@ -1,9 +1,9 @@
 import { Box, Text } from '@chakra-ui/react';
 import React, { useState } from 'react';
 import useSearch from '../lib/useSearch';
-import { IconEntity } from '../types';
 import IconList from './IconList';
 import { SearchInput } from './SearchInput';
+import { IconEntity } from '../types';
 
 interface IconOverviewProps {
   data: IconEntity[];

site/src/components/IconWrapper.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, SVGProps } from 'react';
 
 interface IconWrapperProps extends SVGProps<SVGSVGElement> {
-  content: string;
+  src: string;
 }
 
 export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, ref) => {
@@ -17,11 +17,12 @@ export const IconWrapper = forwardRef<SVGSVGElement, IconWrapperProps>((props, r
     strokeLinejoin: 'round',
   };
 
-  const { content, ...rest } = props;
+  const { src, ...rest } = props;
   const attrs = {
     ...defaultAttrs,
     ...rest,
   };
+  const content = src.replace(/<svg[^>]*>|<\/svg>/g, '');
 
   return <svg ref={ref} {...attrs} dangerouslySetInnerHTML={{ __html: content }} />;
 });

site/src/components/Package.tsx

@@ -87,7 +87,7 @@ const Package = ({ name, description, icon, shields, source, documentation }: Pa
           <Text mb={3}>{description}</Text>
           <ButtonGroup spacing={2}>
             {shields.map(({ alt, src, href }, index) => (
-              <Link href={href} passHref>
+              <Link key={index} href={href} passHref>
                 <a target="_blank">
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img {...{ alt, src }} key={index} />

site/src/lib/docsMenuTree.ts

@@ -76,6 +76,10 @@ const docsMenuTree = [
         title: 'Lucide React',
         href: 'lucide-react'
       },
+      {
+        title: 'Lucide React Native',
+        href: 'lucide-react-native'
+      },
       {
         title: 'Lucide Vue',
         href: 'lucide-vue'

site/src/lib/fetchAllContributors.ts

@@ -1,17 +1,13 @@
 import crypto from 'crypto';
 import fs from 'fs';
 import path from 'path';
-
+import { Contributor } from '../types';
-export interface Contributor {
-  author: string
-  commit: string
-}
 
 const IGNORE_COMMIT_MESSAGES = ['fork', 'optimize'];
 
 function getContentHashOfFile(path) {
   return new Promise((resolve, reject) => {
-    const hash = crypto.createHash('md4');
+    const hash = crypto.createHash('sha256');
     const stream = fs.createReadStream(path);
     stream.on('error', err => reject(err));
     stream.on('data', chunk => hash.update(chunk));
@@ -22,11 +18,12 @@ function getContentHashOfFile(path) {
 const fetchCommitsOfIcon = async (name) =>{
     try {
       const headers = new Headers();
-      const username = 'ericfennis';
+      const token = process.env.GITHUB_TOKEN;
+      const username = process.env.GITHUB_USERNAME;
       const password = process.env.GITHUB_API_KEY;
       headers.set(
         'Authorization',
-        `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
+        token ? `Bearer ${token}` : `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`,
       );
 
       const res = await fetch(
@@ -54,9 +51,8 @@ export const filterCommits = (commits) =>
     !IGNORE_COMMIT_MESSAGES.some(ignoreItem =>
       commit.message.toLowerCase().includes(ignoreItem),
     ))
-  .map(({ sha, author }) => ({
+  .map(({ author }) => ({
     author: author && author.login ? author.login : null,
-    commit: sha,
   }))
   .filter(({ author }, index, self) => self.findIndex((commit) => commit.author === author) === index);
 

site/src/lib/icons.tsx

@@ -2,7 +2,8 @@ import fs from "fs";
 import path from "path";
 import { parseSync, stringify } from 'svgson';
 import tags from '../../../tags.json';
-import { Contributor, getContributors } from "./fetchAllContributors";
+import { IconEntity } from "../types";
+import { getContributors } from "./fetchAllContributors";
 
 const directory = path.join(process.cwd(), "../icons");
 
@@ -28,20 +29,11 @@ export async function getData(name: string) {
     name,
     tags: tags[name] || [],
     contributors,
-    src: fileContent,
+    src: fileContent
-    content: svgContent
   };
 }
 
-export interface IconData {
+export async function getAllData(): Promise<IconEntity[]> {
-  name: string
-  tags: string[]
-  contributors: Contributor[]
-  src: string
-  content: string
-}
-
-export async function getAllData(): Promise<IconData[]> {
   const names = getAllNames();
 
   return Promise.all(names.map((name) => getData(name)));

site/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import Layout from '../components/Layout';
-import { getAllData, IconData } from '../lib/icons';
+import { getAllData } from '../lib/icons';
 
 import IconOverview from '../components/IconOverview';
 import IconDetailOverlay from '../components/IconDetailOverlay';
@@ -8,9 +8,10 @@ import Header from '../components/Header';
 import MobileMenu from '../components/MobileMenu';
 import { useMemo } from 'react';
 import { GetStaticPropsResult, NextPage } from 'next';
+import { IconEntity } from '../types';
 
 interface HomePageProps {
-  data: IconData[]
+  data: IconEntity[]
 }
 
 const HomePage: NextPage<HomePageProps> = ({ data }) => {

site/src/pages/packages/index.tsx

@@ -23,14 +23,18 @@ const PackagesPage = ({ packages, thirdPartyPackages }: PackagesPageProps): JSX.
           Packages
         </Heading>
         <Stack spacing={8} align="center">
-          {packages.length ? packages.map(packageItem => <Package {...packageItem} />) : null}
+          {packages.length
+            ? packages.map((packageItem) => <Package key={packageItem.name} {...packageItem} />)
+            : null}
         </Stack>
 
         <Heading as="h1" marginBottom={6} marginTop={12} textAlign="center">
           Third party packages
         </Heading>
         <Stack spacing={8} marginBottom={6} align="center">
-          {thirdPartyPackages.length ? thirdPartyPackages.map(packageItem => <Package {...packageItem} />) : null}
+          {thirdPartyPackages.length
+            ? thirdPartyPackages.map((packageItem) => (<Package key={packageItem.name} {...packageItem} />))
+            : null}
         </Stack>
       </Layout>
     </HeadingNavigationProvider>

site/src/types.ts

@@ -1,5 +1,4 @@
 export interface IconEntity {
-  content: string;
   contributors: Contributor[];
   name: string;
   src: string;
@@ -8,5 +7,4 @@ export interface IconEntity {
 
 export interface Contributor {
   author: string;
-  commit: string;
 }

tags.json

@@ -763,9 +763,20 @@
     "chromecast",
     "airplay"
   ],
+  "cat": [
+    "animal",
+    "pet",
+    "kitten",
+    "feline"
+  ],
   "check": [
     "done"
   ],
+  "check-check": [
+    "done",
+    "received",
+    "double"
+  ],
   "check-circle": [
     "done"
   ],
@@ -845,7 +856,8 @@
     "vertical"
   ],
   "chrome": [
-    "browser"
+    "browser",
+    "logo"
   ],
   "cigarette": [
     "smoking"
@@ -857,7 +869,8 @@
   "circle": [
     "off",
     "zero",
-    "record"
+    "record",
+    "shape"
   ],
   "circle-dot": [
     "pending",
@@ -875,7 +888,8 @@
     "zero",
     "Ø",
     "null",
-    "nothing"
+    "nothing",
+    "maths"
   ],
   "citrus": [
     "lemon",
@@ -1239,7 +1253,8 @@
     "square",
     "rectangle",
     "oblique",
-    "rhombus"
+    "rhombus",
+    "shape"
   ],
   "dice-1": [
     "dice",
@@ -1301,7 +1316,8 @@
     "difference",
     "plus",
     "minus",
-    "plus-minus"
+    "plus-minus",
+    "maths"
   ],
   "disc": [
     "album",
@@ -1310,13 +1326,23 @@
     "music"
   ],
   "divide": [
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "divide-circle": [
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "divide-square": [
-    "calculate"
+    "calculate",
+    "maths"
+  ],
+  "dog": [
+    "animal",
+    "pet",
+    "puppy",
+    "hound",
+    "canine"
   ],
   "dollar-sign": [
     "currency",
@@ -1379,11 +1405,13 @@
     "breakfast"
   ],
   "equal": [
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "equal-not": [
     "calculate",
-    "off"
+    "off",
+    "maths"
   ],
   "eraser": [
     "pencil",
@@ -1996,7 +2024,8 @@
   "function-square": [
     "programming",
     "code",
-    "automation"
+    "automation",
+    "maths"
   ],
   "joystick": [
     "game",
@@ -2272,7 +2301,8 @@
   "infinity": [
     "unlimited",
     "forever",
-    "loop"
+    "loop",
+    "maths"
   ],
   "info": [
     "help"
@@ -2287,6 +2317,7 @@
   ],
   "instagram": [
     "logo",
+    "social",
     "camera"
   ],
   "italic": [
@@ -2451,7 +2482,7 @@
   ],
   "linkedin": [
     "logo",
-    "social media"
+    "social"
   ],
   "list": [
     "options"
@@ -2771,15 +2802,18 @@
   ],
   "minus": [
     "subtract",
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "minus-circle": [
     "subtract",
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "minus-square": [
     "subtract",
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "monitor": [
     "tv",
@@ -2915,7 +2949,8 @@
     "headline"
   ],
   "octagon": [
-    "stop"
+    "stop",
+    "shape"
   ],
   "option": [
     "key",
@@ -3103,15 +3138,18 @@
   ],
   "plus": [
     "add",
-    "new"
+    "new",
+    "maths"
   ],
   "plus-circle": [
     "add",
-    "new"
+    "new",
+    "maths"
   ],
   "plus-square": [
     "add",
-    "new"
+    "new",
+    "maths"
   ],
   "pocket": [
     "logo",
@@ -3169,13 +3207,15 @@
     "rectangle",
     "aspect ratio",
     "16:9",
-    "horizontal"
+    "horizontal",
+    "shape"
   ],
   "rectangle-vertical": [
     "rectangle",
     "aspect ratio",
     "9:16",
-    "vertical"
+    "vertical",
+    "shape"
   ],
   "recycle": [
     "sustainability",
@@ -3211,7 +3251,8 @@
   ],
   "regex": [
     "search",
-    "text"
+    "text",
+    "code"
   ],
   "repeat": [
     "loop",
@@ -3479,7 +3520,8 @@
   ],
   "sigma": [
     "sum",
-    "calculate"
+    "calculate",
+    "maths"
   ],
   "signal": [
     "connection",
@@ -3644,7 +3686,8 @@
   "square": [
     "rectangle",
     "aspect ratio",
-    "1:1"
+    "1:1",
+    "shape"
   ],
   "star": [
     "bookmark",
@@ -3958,7 +4001,9 @@
     "park",
     "nature"
   ],
-  "trello": [],
+  "trello": [
+    "logo"
+  ],
   "trending-down": [
     "statistics"
   ],
@@ -3966,7 +4011,8 @@
     "statistics"
   ],
   "triangle": [
-    "delta"
+    "delta",
+    "shape"
   ],
   "trophy": [
     "prize",
@@ -3993,7 +4039,8 @@
     "display"
   ],
   "twitch": [
-    "logo"
+    "logo",
+    "social"
   ],
   "twitter": [
     "logo",
@@ -4237,7 +4284,8 @@
     "delete",
     "remove",
     "times",
-    "clear"
+    "clear",
+    "maths"
   ],
   "x-circle": [
     "cancel",
@@ -4245,7 +4293,8 @@
     "delete",
     "remove",
     "times",
-    "clear"
+    "clear",
+    "maths"
   ],
   "x-octagon": [
     "delete",
@@ -4253,7 +4302,8 @@
     "alert",
     "warning",
     "times",
-    "clear"
+    "clear",
+    "maths"
   ],
   "x-square": [
     "cancel",
@@ -4261,10 +4311,12 @@
     "delete",
     "remove",
     "times",
-    "clear"
+    "clear",
+    "maths"
   ],
   "youtube": [
     "logo",
+    "social",
     "video",
     "play"
   ],