Split commands in documentation to make it possible to use Copy to clipboard icon (#853)

GitHub adds Copy to clipboard button to all code snippets. By splitting npm and yarn specific snippets into two separate snippets we make it possible to copy the command dev is interested in in one click instead of manually selecting it and copying with Ctrl+C.
2025-12-16 13:17:42 +01:00 · 2022-10-27 08:19:45 +02:00
parent eb706417e6
commit 33be2c2430
20 changed files with 377 additions and 337 deletions
--- a/README.md
+++ b/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>
-
--- a/docs/installation.md
+++ b/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

--- a/docs/packages/lucide-angular.md
+++ b/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,32 +66,29 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';

@NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
  ],
  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: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
+  declarations: [AppComponent],
+  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';

--- a/docs/packages/lucide-preact.md
+++ b/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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |

 ### Custom props / svg attributes

 You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.

-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```

@@ -62,17 +64,17 @@ const App = () => {

 It is possible to create one generic icon component to load icons.

-> ⚠️ Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.

 #### Icon Component Example

-``` js
+```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;
--- a/docs/packages/lucide-react-native.md
+++ b/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
 ```

--- a/docs/packages/lucide-react.md
+++ b/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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |

 ### Custom props

 You can also pass custom props that will be added in the svg as attributes.

-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```

@@ -56,17 +58,17 @@ const App = () => {

 It is possible to create one generic icon component to load icons.

-> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.

 #### Icon Component Example

-``` js
+```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;
--- a/docs/packages/lucide-static.md
+++ b/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";
-    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
+    font-family: 'LucideIcons';
+    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
@@ -104,13 +106,13 @@ If you'd prefer, you can use CSS to hold your base SVG properties

 ```css
 .lucide-icon {
-    width: 24px;
-    height: 24px;
-    stroke: currentColor;
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 ```

@@ -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 { messageSquare } = require('lucide-static/lib')
-const app = express()
-const port = 3000
+const express = require('express');
+const { messageSquare } = require('lucide-static/lib');
+const app = express();
+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}`);
+});
 ```
--- a/docs/packages/lucide-svelte.md
+++ b/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
-| -------------- | -------- | --------
-| `size`         | *Number* | 24
-| `color`        | *String* | currentColor
-| `strokeWidth`  | *Number* | 2
-| `*<SVGProps>`  | *String* | -
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |
+| `*<SVGProps>` | _String_ | -            |

 \* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)

@@ -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" />
--- a/docs/packages/lucide-vue.md
+++ b/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
-    color="red"
-    :size="32"
-  />
+  <Camera color="red" :size="32" />
 </template>

 <script>
-// Returns Vue component
-import { Camera } from 'lucide-vue';
-
-export default {
-  name: "My Component",
-  components: { Camera }
-}
+  // Returns Vue component
+  import { Camera } from 'lucide-vue';

+  export default {
+    name: 'My Component',
+    components: { Camera }
+  };
 </script>
 ```

 ### Props

-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
-| `defaultClass`| *String* | lucide-icon
+| name           | type     | default      |
+| -------------- | -------- | ------------ |
+| `size`         | _Number_ | 24           |
+| `color`        | _String_ | currentColor |
+| `strokeWidth`  | _Number_ | 2            |
+| `defaultClass` | _String_ | lucide-icon  |

 ### Custom props

 You can also pass custom props that will be added in the svg as attributes.

-``` html
+```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 {
-  props: {
-    name: {
-      type: String,
-      required: true,
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true
+      }
    },
-  },
-  computed: {
-    icon() {
-      return icons[this.name];
-    },
-  },
-};
+    computed: {
+      icon() {
+        return icons[this.name];
+      }
+    }
+  };
 </script>
 ```

 ##### Then you can use it like this

-``` html
+```html
 <template>
  <div id="app">
    <Icon name="Airplay" />
--- a/docs/packages/lucide.md
+++ b/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
+  }
 });
 ```

--- a/packages/lucide-angular/README.md
+++ b/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,31 +68,29 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';

@NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
  ],
  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: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
+  declarations: [AppComponent],
+  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';
 ....
--- a/packages/lucide-preact/README.md
+++ b/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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |

 ### Custom props / svg attributes

 You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.

-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```

@@ -60,17 +62,17 @@ const App = () => {

 It is possible to create one generic icon component to load icons.

-> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.

 #### Icon Component Example

-``` js
+```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;
--- a/packages/lucide-react-native/README.md
+++ b/packages/lucide-react-native/README.md
@@ -10,9 +10,11 @@ First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0

 ```sh
 yarn add lucide-react-native
+```

-# or
+or

+```sh
 npm install lucide-react-native
 ```

--- a/packages/lucide-react/README.md
+++ b/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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |

 ### Custom props

 You can also pass custom props that will be added in the svg as attributes.

-``` js
+```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;
--- a/packages/lucide-solid/README.md
+++ b/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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |

 ### Custom props / svg attributes

 You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.

-``` js
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```

@@ -58,11 +60,11 @@ const App = () => {

 It is possible to create one generic icon component to load icons.

-> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.

 #### Icon Component Example

-``` tsx
+```tsx
 import * as icons from 'lucide-solid';
 import type { LucideProps } from 'lucide-solid';
 import { splitProps } from 'solid-js';
--- a/packages/lucide-static/README.md
+++ b/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";
-    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
+    font-family: 'LucideIcons';
+    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,22 +99,20 @@ You may need additional loader for this.
  <use href="#alert-triangle" />
 </svg>

-<svg>
-  ...sprite svg
-</svg>
+<svg>...sprite svg</svg>
 ```

 If you'd prefer, you can use CSS to hold your base SVG properties

 ```css
 .lucide-icon {
-    width: 24px;
-    height: 24px;
-    stroke: currentColor;
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 ```

@@ -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 { messageSquare } = require('lucide-static/lib')
-const app = express()
-const port = 3000
+const express = require('express');
+const { messageSquare } = require('lucide-static/lib');
+const app = express();
+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
--- a/packages/lucide-svelte/README.md
+++ b/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
-| -------------- | -------- | --------
-| `size`         | *Number* | 24
-| `color`        | *String* | currentColor
-| `strokeWidth`  | *Number* | 2
-| `*<SVGProps>`  | *String* | -
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |
+| `*<SVGProps>` | _String_ | -            |

-* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
+- 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>
--- a/packages/lucide-vue-next/README.md
+++ b/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
-    color="red"
-    :size="32"
-  />
+  <Camera 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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
-| `defaultClass`| *String* | lucide-icon
+| name           | type     | default      |
+| -------------- | -------- | ------------ |
+| `size`         | _Number_ | 24           |
+| `color`        | _String_ | currentColor |
+| `strokeWidth`  | _Number_ | 2            |
+| `defaultClass` | _String_ | lucide-icon  |

 ### Custom props

 You can also pass custom props that will be added in the svg as attributes.

-``` vue
+```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" />
--- a/packages/lucide-vue/README.md
+++ b/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
-    color="red"
-    :size="32"
-  />
+  <Camera 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
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
-| `defaultClass`| *String* | lucide-icon
+| name           | type     | default      |
+| -------------- | -------- | ------------ |
+| `size`         | _Number_ | 24           |
+| `color`        | _String_ | currentColor |
+| `strokeWidth`  | _Number_ | 2            |
+| `defaultClass` | _String_ | lucide-icon  |

 ### Custom props

 You can also pass custom props that will be added in the svg as attributes.

-``` vue
+```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" />
 ```
--- a/packages/lucide/README.md
+++ b/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
+  }
 });
 ```