Improve metadata for keys, and modify arrow-big-* icons to include shift key (#1002)

* Improve metadata for keys

* Modify `arrow-big-up` (`shift` key)

* Modify `arrow-big-right` to match `arrow-big-up` (`shift` key) icon

* Modify `arrow-big-down` to match `arrow-big-up` (`shift` key) icon

* Modify `arrow-big-left` to match `arrow-big-up` (`shift` key) icon

* Add `arrow-big-up-dash` (`caps lock` key) icon

* Fix `arrow-big-up` metadata

* Refine `arrow-big-up-dash` icon

* Add `arrow-big-down-dash` icon

* Fix `arrow-big-left` metadata

* Add `arrow-big-left-dash` icon

* Add `arrow-big-right-dash` icon

* Optimize `arrow-big-*` icons

---------

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

docs/index.md

@@ -16,7 +16,7 @@ When designing new icons, the community is working with a set of design rules. T
 
 Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the responsibility to keep their assets as small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you will only ship the icons you used, helps you to keep the software distribution size to a minimum.
 
-Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
+Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte), [Solid](https://lucide.dev/docs/lucide-solid), [Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
 
 Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
 

docs/packages/lucide-angular.md

@@ -1,154 +1,109 @@
 # Lucide Angular
 
-Implementation of the lucide icon library for angular applications.
+Implementation of the lucide icon library for Angular applications.
 
 ## Installation
 
-```sh
+```bash
 yarn add lucide-angular
 ```
 
 or
 
-```sh
+```bash
 npm install lucide-angular
 ```
 
 ## How to use
 
-There are three ways for use this library.
+### Step 1: Import `LucideAngularModule`
 
-### Method 1: createElement
-
-After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
-
-```html
-<!-- app.component.html -->
-<div id="lucide-icon"></div>
-```
+In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
 
 ```js
-// app.component.ts
-
-import { Component, OnInit } from '@angular/core';
-import { createElement } from 'lucide-angular';
-import { Activity } from 'lucide-angular/icons';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent implements OnInit {
-  ngOnInit(): void {
-    const div = document.getElementById('lucide-icon');
-    const elm = createElement(Activity);
-    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
-
-    if (div) {
-      div.appendChild(elm);
-    }
-  }
-}
-```
-
-### Method 2: User **Tag** with **name** property
-
-After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
-
-```js
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
+import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
 
 @NgModule({
-  declarations: [AppComponent],
   imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    LucideAngularModule.pick({File, Home, Menu, UserCheck})
+  ]
 })
 export class AppModule { }
 ```
 
+### Step 2: Use the icons in templates
+
+Within your templates you may now use one of the following component tags to insert an icon:
+
 ```html
-<!-- app.component.html -->
-<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
-<lucide-icon name="edit" class="myicon"></lucide-icon>
+<lucide-angular name="file" class="my-icon"></lucide-angular>
+<lucide-icon name="home" class="my-icon"></lucide-icon>
+<i-lucide name="menu" class="my-icon"></i-lucide>
+<span-lucide name="user-check" class="my-icon"></span-lucide>
 ```
 
-### Method 3: User **Tag** with **img** property
+### Props
 
-After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+You can pass additional props to adjust the icon appearance.
 
-```js
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+| name                  | type      | default      |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LucideAngularModule } from 'lucide-angular';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
+```html
+<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
 ```
 
-```xml
-<!-- app.component.html -->
-<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
-<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
-```
+### Global configuration
 
-```js
-// app.component.ts
-import { Component } from '@angular/core';
-import { Airplay, Circle } from 'lucide-angular';
+You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above.
 
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  ico1 = Airplay;
-  ico2 = Circle;
+### Styling using a custom CSS class
+
+Any extra HTML attribute is ignored, but the `class` attribute
+is passed onto the internal SVG image element and it can be used to style it:
+
+```css
+svg.my-icon {
+    width: 12px;
+    height: 12px;
+    stroke-width: 3;
 }
 ```
 
-## Notes
+## Injecting multiple icon providers
 
-### Import all icons
-
-In `Method 2`: import all icons in `app.module.ts` by:
+You may provide additional icons using the `LUCIDE_ICONS` injection token,
+which accepts multiple providers of the interface `LucideIconsProviderInterface`
+with the utility class `LucideIconsProvider` available for easier usage:
 
 ```js
+import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
+import { MyIcon } from './icons/my-icon';
 
+const myIcons = {MyIcon};
+
+@NgModule({
+  providers: [
+    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
+  ]
+})
+export class AppModule { }
+```
+
+To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
+
+## Loading all icons
+
+> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
+
+```js
 import { icons } from 'lucide-angular';
 
-LucideAngularModule.pick(icons)
-
 ...
+
+LucideAngularModule.pick(icons)
 ```
-
-### Tags
-
-You can use the following tags instead of `lucide-icon`:
-
-- lucide-angular
-- i-lucide
-- span-lucide
-
-All of the above are the same

docs/packages/lucide-preact.md

@@ -42,10 +42,11 @@ export default App;
 ### Props
 
 | name                  | type      | default      |
-| ------------- | -------- | ------------ |
-| `size`        | _Number_ | 24           |
-| `color`       | _String_ | currentColor |
-| `strokeWidth` | _Number_ | 2            |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
 ### Custom props / svg attributes
 

docs/packages/lucide-react-native.md

@@ -40,10 +40,11 @@ export default App;
 ### Props
 
 | name                  | type      | default      |
-| ------------- | -------- | ------------ |
-| `size`        | _Number_ | 24           |
-| `color`       | _String_ | currentColor |
-| `strokeWidth` | _Number_ | 2            |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
 ### Custom props
 

docs/packages/lucide-react.md

@@ -38,10 +38,11 @@ export default App;
 ### Props
 
 | name                  | type      | default      |
-| ------------- | -------- | ------------ |
-| `size`        | _Number_ | 24           |
-| `color`       | _String_ | currentColor |
-| `strokeWidth` | _Number_ | 2            |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
 ### Custom props
 

docs/packages/lucide-solid.md

@@ -0,0 +1,79 @@
+# Lucide Solid
+
+Implementation of the lucide icon library for solid applications.
+
+## Installation
+
+```sh
+yarn add lucide-solid
+```
+
+or
+
+```sh
+npm install lucide-solid
+```
+
+## How to use
+
+It's build with ESmodules so it's completely tree-shakable.
+Each icon can be imported as a solid component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+```js
+import { Camera } from 'lucide-solid';
+// Returns SolidComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48} />;
+};
+
+export default App;
+```
+
+### Props
+
+| name                  | type      | default      |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
+
+### Custom props / svg attributes
+
+You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+
+```js
+// Usage
+const App = () => {
+  return <Camera fill="red" stroke-linejoin="bevel" />;
+};
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+```tsx
+import * as icons from 'lucide-solid';
+import type { LucideProps } from 'lucide-solid';
+import { splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+
+const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
+  const [local, others] = splitProps(props, ["name"]);
+
+  return <Dynamic component={icons[local.name]} {...others} />
+};
+
+export default Icon;
+```

docs/packages/lucide-static.md

@@ -2,16 +2,16 @@
 
 This package include the following lucide implementations:
 
-- All svg files
-- Javascript library containing strings of svgs.
+- All SVG files
+- SVG sprite
 - Icon fonts
-- Svg sprite
+- JavaScript library containing strings of SVGs.
 
 ## Why lucide-static?
 
-This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
+This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.
 
-> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
+> ⚠️ While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and treeshaking to make sure only the icons you use are bundled with your app. Threeshaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
 
 ## Installation
 
@@ -30,10 +30,10 @@ npm install lucide-static
 ### CDN
 
 ```html
-<!-- Svg File -->
+<!-- SVG file for a single icon -->
 <img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
-<!-- Icon Font -->
+<!-- Icon font -->
 <style>
   @font-face {
     font-family: 'LucideIcons';
@@ -48,12 +48,12 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
 
 ### SVG Files
 
-#### Svg file as image
+#### SVG file as image
 
 To use it in for example html:
 
 ```html
-<!-- Svg File -->
+<!-- SVG file for a single icon -->
 <img src="~lucide-static/icons/home.svg" />
 ```
 
@@ -65,15 +65,15 @@ To use it in for example html:
 
 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
+#### SVG file as string
 
-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/).
+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';
 
-// return string of a svg
+// return string of an SVG
 ```
 
 ### SVG Sprite
@@ -116,7 +116,7 @@ If you'd prefer, you can use CSS to hold your base SVG properties
 }
 ```
 
-and update the svg as follows
+and update the SVG as follows
 
 ```svg
 <svg

docs/packages/lucide-svelte.md

@@ -43,11 +43,13 @@ You can pass additional props to adjust the icon.
 ### Available props
 
 | name                  | type      | default      |
-| ------------- | -------- | ------------ |
-| `size`        | _Number_ | 24           |
-| `color`       | _String_ | currentColor |
-| `strokeWidth` | _Number_ | 2            |
-| `*<SVGProps>` | _String_ | -            |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
+| `*<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)
 

docs/packages/lucide-vue-next.md

@@ -42,12 +42,13 @@ import { Camera } from 'lucide-vue-next';
 
 ### Props
 
-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `stroke-width`| *Number* | 2
-| `default-class`| *String* | lucide-icon
+|  name                   |   type    |  default     |
+| ----------------------- | --------- | ------------ |
+| `size`                  | *number*  | 24           |
+| `color`                 | *string*  | currentColor |
+| `stroke-width`          | *number*  | 2            |
+| `absolute-stroke-width` | *boolean* | false        |
+| `default-class`         | *string*  | lucide-icon  |
 
 ### Custom props
 
@@ -69,7 +70,12 @@ It is possible to create one generic icon component to load icons.
 
 ``` html
 <template>
-    <component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
+  <component
+    :is="icon"
+    :size="size"
+    :color="color"
+    :stroke-width="strokeWidth" :default-class="defaultClass"
+  />
 </template>
 
 <script setup>

docs/packages/lucide-vue.md

@@ -44,11 +44,12 @@ You can pass additional props to adjust the icon.
 ### Props
 
 |  name                   |   type    |  default     |
-| -------------- | -------- | ------------ |
-| `size`         | _Number_ | 24           |
-| `color`        | _String_ | currentColor |
-| `strokeWidth`  | _Number_ | 2            |
-| `defaultClass` | _String_ | lucide-icon  |
+| ----------------------- | --------- | ------------ |
+| `size`                  | *number*  | 24           |
+| `color`                 | *string*  | currentColor |
+| `stroke-width`          | *number*  | 2            |
+| `absolute-stroke-width` | *boolean* | false        |
+| `default-class`         | *string*  | lucide-icon  |
 
 ### Custom props
 

icons/arrow-big-down-dash.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "key",
+    "download"
+  ],
+  "categories": [
+    "arrows",
+    "files"
+  ]
+}

icons/arrow-big-down-dash.svg

@@ -9,9 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h10" />
-  <path d="M11 9h7" />
-  <path d="M11 13h4" />
-  <path d="m3 17 3 3 3-3" />
-  <path d="M6 18V4" />
+  <path d="M15 5H9" />
+  <path d="M15 9v3h4l-7 7-7-7h4V9h6z" />
 </svg>

icons/arrow-big-down.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9 3h6v11h4l-7 7-7-7h4z" />
+  <path d="M15 6v6h4l-7 7-7-7h4V6h6z" />
 </svg>

icons/arrow-big-left-dash.json

@@ -1,10 +1,10 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
-    "filter"
+    "key",
+    "back"
   ],
   "categories": [
-    "text",
-    "layout"
+    "arrows"
   ]
 }

icons/arrow-big-left-dash.svg

@@ -9,9 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 11h4" />
-  <path d="M11 15h7" />
-  <path d="M11 19h10" />
-  <path d="M9 7 6 4 3 7" />
-  <path d="M6 6v14" />
+  <path d="M19 15V9" />
+  <path d="M15 15h-3v4l-7-7 7-7v4h3v6z" />
 </svg>

icons/arrow-big-left.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
-    "key"
+    "key",
+    "back"
   ],
   "categories": [
     "arrows"

icons/arrow-big-left.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m3 12 7-7v4h11v6H10v4z" />
+  <path d="M18 15h-6v4l-7-7 7-7v4h6v6z" />
 </svg>

icons/arrow-big-right-dash.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "key",
+    "forward"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/arrow-big-right-dash.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="M5 9v6" />
+  <path d="M9 9h3V5l7 7-7 7v-4H9V9z" />
+</svg>

icons/arrow-big-right.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m21 12-7-7v4H3v6h11v4z" />
+  <path d="M6 9h6V5l7 7-7 7v-4H6V9z" />
 </svg>

icons/arrow-big-up-dash.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "keyboard",
+    "key",
+    "forward",
+    "caps lock",
+    "capitals",
+    "mac",
+    "button"
+  ],
+  "categories": [
+    "arrows",
+    "development"
+  ]
+}

icons/arrow-big-up-dash.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="M9 19h6" />
+  <path d="M9 15v-3H5l7-7 7 7h-4v3H9z" />
+</svg>

icons/arrow-big-up.json

@@ -1,10 +1,15 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
+    "keyboard",
     "key",
-    "forward"
+    "forward",
+    "shift",
+    "mac",
+    "button"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "development"
   ]
 }

icons/arrow-big-up.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9 21V10H5l7-7 7 7h-4v11z" />
+  <path d="M9 18v-6H5l7-7 7 7h-4v6H9z" />
 </svg>

icons/arrow-down-0-1.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "ascending",
+    "numerical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-down-0-1.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 20V4" />
+  <rect x="15" y="4" width="4" height="6" ry="2" />
+  <path d="M17 20v-6h-2" />
+  <path d="M15 20h4" />
+</svg>

icons/arrow-down-1-0.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "descending",
+    "numerical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-down-1-0.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 20V4" />
+  <path d="M17 10V4h-2" />
+  <path d="M15 10h4" />
+  <rect x="15" y="14" width="4" height="6" ry="2" />
+</svg>

icons/arrow-down-a-z.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "ascending",
+    "alphabetical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-down-a-z.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 20V4" />
+  <path d="M20 8h-5" />
+  <path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10" />
+  <path d="M15 14h5l-5 6h5" />
+</svg>

icons/arrow-down-narrow-wide.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "ascending"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-down-narrow-wide.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 20V4" />
+  <path d="M11 4h4" />
+  <path d="M11 8h7" />
+  <path d="M11 12h10" />
+</svg>

icons/arrow-down-up.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "bidirectional",
+    "direction",
+    "swap",
+    "switch",
+    "network",
+    "mobile data",
+    "internet",
+    "sort",
+    "reorder",
+    "move"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/arrow-down-up.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 20V4" />
+  <path d="m21 8-4-4-4 4" />
+  <path d="M17 4v16" />
+</svg>

icons/arrow-down-wide-narrow.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "descending"
+  ],
+  "aliases": [
+    "sort-desc"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-down-wide-narrow.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 20V4" />
+  <path d="M11 4h10" />
+  <path d="M11 8h7" />
+  <path d="M11 12h4" />
+</svg>

icons/arrow-down-z-a.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "descending",
+    "alphabetical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-down-z-a.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 16 4 4 4-4" />
+  <path d="M7 4v16" />
+  <path d="M15 4h5l-5 6h5" />
+  <path d="M15 20v-3.5a2.5 2.5 0 0 1 5 0V20" />
+  <path d="M20 18h-5" />
+</svg>

icons/arrow-left-right.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="17 11 21 7 17 3" />
-  <line x1="21" x2="9" y1="7" y2="7" />
-  <polyline points="7 21 3 17 7 13" />
-  <line x1="15" x2="3" y1="17" y2="17" />
+  <path d="M8 3 4 7l4 4" />
+  <path d="M4 7h16" />
+  <path d="m16 21 4-4-4-4" />
+  <path d="M20 17H4" />
 </svg>

icons/arrow-right-left.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "bidirectional",
+    "direction",
+    "swap",
+    "switch",
+    "transaction",
+    "reorder",
+    "move"
+  ],
+  "categories": [
+    "arrows"
+  ]
+}

icons/arrow-right-left.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m16 3 4 4-4 4" />
+  <path d="M20 7H4" />
+  <path d="m8 21-4-4 4-4" />
+  <path d="M4 17h16" />
+</svg>

icons/arrow-up-0-1.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "ascending",
+    "numerical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-up-0-1.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+  <rect x="15" y="4" width="4" height="6" ry="2" />
+  <path d="M17 20v-6h-2" />
+  <path d="M15 20h4" />
+</svg>

icons/arrow-up-1-0.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "descending",
+    "numerical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-up-1-0.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+  <path d="M17 10V4h-2" />
+  <path d="M15 10h4" />
+  <rect x="15" y="14" width="4" height="6" ry="2" />
+</svg>

icons/arrow-up-a-z.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "ascending",
+    "alphabetical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-up-a-z.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+  <path d="M20 8h-5" />
+  <path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10" />
+  <path d="M15 14h5l-5 6h5" />
+</svg>

icons/arrow-up-down.json

@@ -8,6 +8,7 @@
     "network",
     "mobile data",
     "internet",
+    "sort",
     "reorder",
     "move"
   ],

icons/arrow-up-down.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="11 17 7 21 3 17" />
-  <line x1="7" x2="7" y1="21" y2="9" />
-  <polyline points="21 7 17 3 13 7" />
-  <line x1="17" x2="17" y1="15" y2="3" />
+  <path d="m21 16-4 4-4-4" />
+  <path d="M17 20V4" />
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
 </svg>

icons/arrow-up-narrow-wide.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "ascending"
+  ],
+  "aliases": [
+    "sort-asc"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-up-narrow-wide.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+  <path d="M11 12h4" />
+  <path d="M11 16h7" />
+  <path d="M11 20h10" />
+</svg>

icons/arrow-up-wide-narrow.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "descending"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-up-wide-narrow.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+  <path d="M11 12h10" />
+  <path d="M11 16h7" />
+  <path d="M11 20h4" />
+</svg>

icons/arrow-up-z-a.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrow",
+    "filter",
+    "sort",
+    "descending",
+    "alphabetical"
+  ],
+  "categories": [
+    "text",
+    "layout",
+    "arrows"
+  ]
+}

icons/arrow-up-z-a.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m3 8 4-4 4 4" />
+  <path d="M7 4v16" />
+  <path d="M15 4h5l-5 6h5" />
+  <path d="M15 20v-3.5a2.5 2.5 0 0 1 5 0V20" />
+  <path d="M20 18h-5" />
+</svg>

icons/ban.json

@@ -6,7 +6,9 @@
     "stop",
     "forbidden",
     "prohibited",
-    "error"
+    "error",
+    "circle",
+    "slash"
   ],
   "categories": [
     "account"

icons/chevron-up.json

@@ -1,9 +1,17 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
-    "arrow"
+    "arrow",
+    "caret",
+    "keyboard",
+    "key",
+    "mac",
+    "control",
+    "ctrl",
+    "button"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "coding"
   ]
 }

icons/command.json

@@ -2,9 +2,10 @@
   "$schema": "../icon.schema.json",
   "tags": [
     "keyboard",
+    "key",
+    "mac",
     "cmd",
-    "terminal",
-    "prompt"
+    "button"
   ],
   "categories": [
     "development"

icons/moon-star.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "dark",
+    "night",
+    "star"
+  ],
+  "categories": [
+    "accessibility",
+    "weather"
+  ]
+}

icons/moon-star.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3a6.364 6.364 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+  <path d="M19 3v4" />
+  <path d="M21 5h-4" />
+</svg>

icons/option.json

@@ -1,8 +1,10 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
+    "keyboard",
     "key",
     "mac",
+    "alt",
     "button"
   ],
   "categories": [

icons/repeat-2.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "arrows",
+    "retweet",
+    "repost",
+    "share",
+    "repeat",
+    "loop"
+  ],
+  "categories": [
+    "arrows",
+    "social",
+    "multimedia"
+  ]
+}

icons/repeat-2.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m2 9 3-3 3 3" />
+  <path d="M13 18H7a2 2 0 0 1-2-2V6" />
+  <path d="m22 15-3 3-3-3" />
+  <path d="M11 6h6a2 2 0 0 1 2 2v10" />
+</svg>

icons/save-all.json

@@ -1,10 +1,11 @@
 {
   "$schema": "../icon.schema.json",
   "tags": [
-    "filter"
+    "floppy disks",
+    "copy"
   ],
   "categories": [
     "text",
-    "layout"
+    "files"
   ]
 }

icons/save-all.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 4a2 2 0 0 1 2-2h10l4 4v10.2a2 2 0 0 1-2 1.8H8a2 2 0 0 1-2-2Z" />
+  <path d="M10 2v4h6" />
+  <path d="M18 18v-7h-8v7" />
+  <path d="M18 22H4a2 2 0 0 1-2-2V6" />
+</svg>

icons/save.json

@@ -4,6 +4,7 @@
     "floppy disk"
   ],
   "categories": [
-    "text"
+    "text",
+    "files"
   ]
 }

icons/shield-question.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "security",
+    "secure",
+    "insecure"
+  ],
+  "categories": [
+    "security"
+  ]
+}

icons/shield-question.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 17h.01" />
+  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
+  <path d="M9.1 9a3 3 0 0 1 5.82 1c0 2-3 3-3 3" />
+</svg>

icons/stars.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "effect",
+    "filter",
+    "night",
+    "sparkles",
+    "magic"
+  ],
+  "categories": [
+    "shapes",
+    "cursors",
+    "multimedia",
+    "gaming",
+    "weather"
+  ]
+}

icons/stars.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+  <path d="M5 3v4" />
+  <path d="M19 17v4" />
+  <path d="M3 5h4" />
+  <path d="M17 19h4" />
+</svg>

package.json

@@ -3,6 +3,7 @@
   "scripts": {
     "build": "pnpm -r --filter './packages/**' build",
     "test": "pnpm -r --filter './packages/**' test",
+    "test:update": "pnpm -r --filter './packages/**' --filter !'./packages/lucide-angular' test -- -u",
     "lucide": "pnpm --filter lucide",
     "lucide-angular": "pnpm --filter lucide-angular",
     "lucide-react": "pnpm --filter lucide-react",

packages/lucide-angular/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+    "root": true,
+    "overrides": [
+        {
+            "files": [
+                "*.ts"
+            ],
+            "extends": [
+                "eslint:recommended",
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@angular-eslint/recommended",
+                "plugin:@angular-eslint/template/process-inline-templates"
+            ],
+            "rules": {
+                "@angular-eslint/directive-selector": [
+                    "error",
+                    {
+                        "type": "attribute",
+                        "prefix": "lucide",
+                        "style": "camelCase"
+                    }
+                ],
+                "@angular-eslint/component-selector": [
+                    "error",
+                    {
+                        "type": "element",
+                        "prefix": ["lucide", "i", "span"],
+                        "style": "kebab-case"
+                    }
+                ]
+            }
+        },
+        {
+            "files": [
+                "*.html"
+            ],
+            "extends": [
+                "plugin:@angular-eslint/template/recommended"
+            ],
+            "rules": {}
+        }
+    ]
+};

packages/lucide-angular/.gitignore

@@ -1,13 +1,13 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
-# compiled output
+# Compiled output
 /dist
 /tmp
 /out-tsc
 # Only exists if Bazel was run
 /bazel-out
 
-# dependencies
+# Node
 /node_modules
 
 # profiling files
@@ -23,7 +23,8 @@ speed-measure-plugin*.json
 .settings/
 *.sublime-workspace
 
-# IDE - VSCode
+# Visual Studio Code
+/.vscode
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
@@ -32,7 +33,7 @@ speed-measure-plugin*.json
 .history/*
 .editorconfig
 
-# misc
+# Miscellaneous
 /.sass-cache
 /connect.lock
 /coverage
@@ -42,7 +43,7 @@ yarn-error.log
 testem.log
 /typings
 
-# System Files
+# System files
 .DS_Store
 Thumbs.db
 

packages/lucide-angular/README.md

@@ -6,150 +6,106 @@ Implementation of the lucide icon library for angular applications.
 
 ## Installation
 
-```sh
+```bash
 yarn add lucide-angular
 ```
 
 or
 
-```sh
+```bash
 npm install lucide-angular
 ```
 
 ## How to use
 
-There are three ways for use this library.
+### Step 1: Import `LucideAngularModule`
 
-### Method 1: createElement
-
-After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
-
-```html
-<!-- app.component.html -->
-<div id="lucide-icon"></div>
-```
+In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
 
 ```js
-// app.component.ts
-
-import { Component, OnInit } from '@angular/core';
-import { createElement } from 'lucide-angular';
-import { Activity } from 'lucide-angular/icons';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent implements OnInit {
-  ngOnInit(): void {
-    const div = document.getElementById('lucide-icon');
-    const elm = createElement(Activity);
-    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
-
-    if (div) {
-      div.appendChild(elm);
-    }
-  }
-}
-```
-
-### Method 2: User **Tag** with **name** property
-
-After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
-
-```js
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
+import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
 
 @NgModule({
-  declarations: [AppComponent],
   imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    LucideAngularModule.pick({File, Home, Menu, UserCheck})
+  ]
 })
 export class AppModule { }
 ```
 
+### Step 2: Use the icons in templates
+
+Within your templates you may now use one of the following component tags to insert an icon:
+
 ```html
-<!-- app.component.html -->
-<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
-<lucide-icon name="edit" class="myicon"></lucide-icon>
+<lucide-angular name="file" class="my-icon"></lucide-angular>
+<lucide-icon name="home" class="my-icon"></lucide-icon>
+<i-lucide name="menu" class="my-icon"></i-lucide>
+<span-lucide name="user-check" class="my-icon"></span-lucide>
 ```
 
-### Method 3: User **Tag** with **img** property
+### Props
 
-After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+You can pass additional props to adjust the icon appearance.
 
-```js
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+| name               | type      | default      |
+| ------------------ | --------- | ------------ |
+| `size`             | _number_  | 24           |
+| `color`            | _string_  | currentColor |
+| `strokeWidth`      | _number_  | 2            |
+| `absoluteStrokeWidth` | _boolean_ | true         |
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LucideAngularModule } from 'lucide-angular';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
+```html
+<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
 ```
 
-```xml
-<!-- app.component.html -->
-<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
-<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
-```
+### Global configuration
 
-```js
-// app.component.ts
-import { Component } from '@angular/core';
-import { Airplay, Circle } from 'lucide-angular';
+You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above.
 
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  ico1 = Airplay;
-  ico2 = Circle;
+### Styling using a custom CSS class
+
+Any extra HTML attribute is ignored, but the `class` attribute
+is passed onto the internal SVG image element and it can be used to style it:
+
+```css
+svg.my-icon {
+    width: 12px;
+    height: 12px;
+    stroke-width: 3;
 }
 ```
 
-## Notes
+## Injecting multiple icon providers
 
-### Import all icons
-
-In `Method 2`: import all icons in `app.module.ts` by:
+You may provide additional icons using the `LUCIDE_ICONS` injection token,
+which accepts multiple providers of the interface `LucideIconsProviderInterface`
+with the utility class `LucideIconsProvider` available for easier usage:
 
 ```js
-...
-import { icons } from 'lucide-angular';
-....
-LucideAngularModule.pick(icons)
-....
+import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
+import { MyIcon } from './icons/my-icon';
+
+const myIcons = {MyIcon};
+
+@NgModule({
+  providers: [
+    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
+  ]
+})
+export class AppModule { }
 ```
 
-### Tags
+To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
 
-You can use the following tags instead of `lucide-icon`:
+## Loading all icons
 
-- lucide-angular
-- i-lucide
-- span-lucide
+> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
 
-All of the above are the same
+```js
+import { icons } from 'lucide-angular';
+
+...
+
+LucideAngularModule.pick(icons)
+```

packages/lucide-angular/angular.json

@@ -5,21 +5,24 @@
   "projects": {
     "lucide-angular": {
       "projectType": "library",
-      "root": "",
+      "root": ".",
       "sourceRoot": "src",
-      "prefix": "lib",
+      "prefix": "lucide",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "tsconfig.lib.json",
             "project": "ng-package.json"
           },
           "configurations": {
             "production": {
               "tsConfig": "tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.lib.json"
             }
-          }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -30,19 +33,19 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "tsconfig.lib.json",
-              "tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
         }
       }
     }
   },
+  "cli": {
+    "packageManager": "pnpm"
+  },
   "defaultProject": "lucide-angular"
 }

packages/lucide-angular/ng-package.json

@@ -2,6 +2,6 @@
   "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
   "dest": "dist",
   "lib": {
-    "entryFile": "src/index.ts"
+    "entryFile": "src/public-api.ts"
   }
 }

packages/lucide-angular/package.json

@@ -28,44 +28,56 @@
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:ng",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
-    "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --exportFileName=index.ts",
+    "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --exportFileName=lucide-icons.ts",
     "build:ng": "ng build --configuration production",
     "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "test:watch": "ng test",
-    "lint": "ng lint",
+    "lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --quiet --fix",
+    "format": "npx prettier 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --write",
     "e2e": "ng e2e",
     "version": "pnpm version --git-tag-version=false"
   },
-  "dependencies": {
-    "tslib": "^2.4.0"
-  },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~14.2.6",
-    "@angular/cli": "~14.2.6",
-    "@angular/common": "~14.2.7",
-    "@angular/compiler": "~14.2.7",
-    "@angular/compiler-cli": "~14.2.7",
-    "@angular/core": "~14.2.7",
-    "@angular/platform-browser": "~14.2.7",
-    "@angular/platform-browser-dynamic": "~14.2.7",
+    "@angular-devkit/build-angular": "~13.3.11",
+    "@angular-eslint/builder": "~13.0.0",
+    "@angular-eslint/eslint-plugin": "~13.0.0",
+    "@angular-eslint/eslint-plugin-template": "~13.0.0",
+    "@angular-eslint/schematics": "~13.0.0",
+    "@angular-eslint/template-parser": "~13.0.0",
+    "@angular/cli": "~13.3.11",
+    "@angular/common": "~13.3.0",
+    "@angular/compiler": "~13.3.0",
+    "@angular/compiler-cli": "~13.3.0",
+    "@angular/core": "~13.3.0",
+    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser-dynamic": "~13.3.0",
     "@lucide/build-icons": "workspace:*",
-    "@types/jasmine": "~4.3.0",
-    "@types/node": "^18.11.4",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~3.10.1",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "jasmine-core": "~4.0.0",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.14",
+    "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^14.2.1",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "ng-packagr": "^13.3.0",
+    "prettier": "^2.8.4",
     "protractor": "~7.0.0",
     "puppeteer": "^8.0.0",
-    "rxjs": "7.5.7",
+    "rxjs": "~7.5.0",
     "ts-node": "~10.9.1",
-    "tslint": "~6.1.0",
-    "typescript": "~4.8.4",
-    "zone.js": "^0.11.8"
+    "tslib": "^2.3.0",
+    "typescript": "~4.6.2",
+    "zone.js": "~0.11.4"
+  },
+  "peerDependencies": {
+    "@angular/common": "13.x - 15.x",
+    "@angular/core": "13.x - 15.x"
   }
 }

packages/lucide-angular/scripts/exportTemplate.mjs

@@ -1,8 +1,9 @@
 export default ({ componentName, children }) => `
-import { IconData } from './types';
+import { LucideIconData } from './types';
 import defaultAttributes from './constants/default-attributes';
 
-const ${componentName}: IconData  = [
+/* eslint-disable no-shadow-restricted-names */
+const ${componentName}: LucideIconData = [
     'svg',
     defaultAttributes,
     ${JSON.stringify(children)}

packages/lucide-angular/src/helpers/create-element.ts

@@ -1,26 +0,0 @@
-import { IconData } from '../icons/types'
-
-/**
- * Creates a new SVGElement from icon node
- * @param {string} tag
- * @param {object} attrs
- * @param {array} children
- * @returns {SVGElement}
- */
-export const createElement = ([tag, attrs, children = []]: IconData): SVGElement => {
-  const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
-
-  Object.keys(attrs).forEach(name => {
-    element.setAttribute(name, attrs[name]);
-  });
-
-  if (children.length) {
-    children.forEach((child: IconData) => {
-      const childElement = createElement(child);
-
-      element.appendChild(childElement);
-    });
-  }
-
-  return element;
-};

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

@@ -2,7 +2,7 @@
   "ngPackage": {
     "dest": "dist",
     "lib": {
-      "entryFile": "./index.ts"
+      "entryFile": "../public-api.ts"
     }
   }
 }

packages/lucide-angular/src/icons/types/index.ts

@@ -1,3 +1,13 @@
-export type IconNode = readonly [string, object];
-export type IconData = readonly [string, object, IconNode[]? ];
-export type Icons = { [key: string]: IconData }
+type HtmlAttributes = { [key: string]: string | number };
+export type LucideIconNode = readonly [string, HtmlAttributes];
+export type LucideIconData = readonly [string, HtmlAttributes, LucideIconNode[]?];
+export type LucideIcons = { [key: string]: LucideIconData };
+
+/** @deprecated Use LucideIconData instead. Will be removed in v1.0. */
+export type IconData = LucideIconData;
+
+/** @deprecated Use LucideIconNode instead. Will be removed in v1.0. */
+export type IconNode = LucideIconNode;
+
+/** @deprecated Use LucideIcons instead. Will be removed in v1.0. */
+export type Icons = LucideIcons;

packages/lucide-angular/src/index.ts

@@ -1,7 +0,0 @@
-import * as icons from './icons';
-
-export * from './lib/lucide-angular.component';
-export * from './lib/lucide-angular.module';
-export * from './helpers/create-element';
-export * from './icons';
-export { icons };

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

@@ -1,3 +1,4 @@
+/** @deprecated Use the injection token LUCIDE_ICONS instead. Will be removed in v1.0. */
 export class Icons {
     constructor(private icons: object) {}
 }

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

@@ -1,28 +1,103 @@
+import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {LucideAngularModule} from './lucide-angular.module';
-import { LucideAngularComponent } from './lucide-angular.component';
+import {formatFixed, LucideAngularComponent} from './lucide-angular.component';
+import defaultAttributes from '../icons/constants/default-attributes';
+import {LucideIcons} from '../icons/types';
 
 describe('LucideAngularComponent', () => {
-  let component: LucideAngularComponent;
-  let fixture: ComponentFixture<LucideAngularComponent>;
+    let testHostComponent: TestHostComponent;
+    let testHostFixture: ComponentFixture<TestHostComponent>;
+    const getSvgAttribute = (attr: string) =>
+        testHostFixture.nativeElement.querySelector('svg').getAttribute(attr);
+    const testIcons: LucideIcons = {
+        Demo: [
+            'svg',
+            defaultAttributes,
+            [['polyline', {points: '1 1 22 22'}]],
+        ],
+    };
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-      declarations: [ LucideAngularComponent ],
+            declarations: [LucideAngularComponent, TestHostComponent],
             imports: [
-        LucideAngularModule.pick({ })
-      ],
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(LucideAngularComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+                LucideAngularModule.pick(testIcons),
+            ]
+        }).compileComponents();
+        testHostFixture = TestBed.createComponent(TestHostComponent);
+        testHostComponent = testHostFixture.componentInstance;
     });
 
     it('should create', () => {
-    expect(component).toBeTruthy();
+        testHostFixture.detectChanges();
+        expect(testHostComponent).toBeTruthy();
     });
+
+    it('should set color', () => {
+        const color = 'red';
+        testHostComponent.setColor(color);
+        testHostFixture.detectChanges();
+        expect(getSvgAttribute('stroke')).toBe(color);
+    });
+
+    it('should set size', () => {
+        const size = 12;
+        testHostComponent.setSize(size);
+        testHostFixture.detectChanges();
+        expect(getSvgAttribute('width')).toBe(size.toString(10));
+    });
+
+    it('should set stroke width', () => {
+        const strokeWidth = 1.41;
+        testHostComponent.setStrokeWidth(strokeWidth);
+        testHostFixture.detectChanges();
+        expect(getSvgAttribute('stroke-width')).toBe(strokeWidth.toString(10));
+    });
+
+    it('should adjust stroke width', () => {
+        const strokeWidth = 2;
+        const size = 12;
+        testHostComponent.setStrokeWidth(strokeWidth);
+        testHostComponent.setSize(12);
+        testHostComponent.setAbsoluteStrokeWidth(true);
+        testHostFixture.detectChanges();
+        expect(getSvgAttribute('stroke-width')).toBe(
+            formatFixed(strokeWidth / (size / defaultAttributes.height))
+        );
+    });
+
+    @Component({
+        selector: 'lucide-spec-host-component',
+        template: `
+            <i-lucide
+                name="demo"
+                [color]="color"
+                [size]="size"
+                [strokeWidth]="strokeWidth"
+                [absoluteStrokeWidth]="absoluteStrokeWidth"
+            ></i-lucide>`,
+    })
+    class TestHostComponent {
+        color?: string;
+        size?: number;
+        strokeWidth?: number;
+        absoluteStrokeWidth = true;
+
+        setColor(color: string): void {
+            this.color = color;
+        }
+
+        setSize(size: number): void {
+            this.size = size;
+        }
+
+        setStrokeWidth(strokeWidth: number): void {
+            this.strokeWidth = strokeWidth;
+        }
+
+        setAbsoluteStrokeWidth(absoluteStrokeWidth: boolean): void {
+            this.absoluteStrokeWidth = absoluteStrokeWidth;
+        }
+    }
 });

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

@@ -1,72 +1,173 @@
-import { Component, ElementRef, Input, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
-import { Icons } from './icons.provider';
-import { IconData } from '../icons/types';
-import { createElement } from '../helpers/create-element';
+import {ChangeDetectorRef, Component, Renderer2, ElementRef, Inject, Input, OnChanges, SimpleChange} from '@angular/core';
+import {LucideIconData} from '../icons/types';
+import defaultAttributes from '../icons/constants/default-attributes';
+import {LUCIDE_ICONS, LucideIconProviderInterface} from './lucide-icon.provider';
+import {LucideIconConfig} from "./lucide-icon.config";
+
+interface TypedChange<T> extends SimpleChange {
+    previousValue: T;
+    currentValue: T;
+}
+
+type LucideAngularComponentChanges = {
+    name?: TypedChange<string|LucideIconData>;
+    img?: TypedChange<LucideIconData|undefined>;
+    color?: TypedChange<string>;
+    size?: TypedChange<number>;
+    strokeWidth?: TypedChange<number>;
+    absoluteStrokeWidth?: TypedChange<boolean>;
+};
+
+export function formatFixed(number: number, decimals = 3): string {
+    return parseFloat(number.toFixed(decimals)).toString(10);
+}
 
 @Component({
     selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
-  template: `<ng-content></ng-content>`,
-  styles: [`
-    :host {
-      display: inline-block;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 2;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      width: 24px;
-      height: 24px;
-    }
-  `]
+    template: '<ng-content></ng-content>',
 })
-
 export class LucideAngularComponent implements OnChanges {
-  @Input() name!: string;
-  @Input() img!: IconData;
+    @Input() class?: string;
+    @Input() name?: string|LucideIconData;
+    @Input() set img(img: LucideIconData) {
+        this.name = img;
+    };
+    @Input() color?: string;
+    _size?: number;
+    get size(): number {
+        return this._size ?? this.iconConfig.size;
+    }
+
+    @Input() set size(value: string | number) {
+        this._size = this.parseNumber(value);
+    }
+
+    _strokeWidth?: number;
+    get strokeWidth(): number {
+        return this._strokeWidth ?? this.iconConfig.strokeWidth;
+    }
+
+    @Input() set strokeWidth(value: string | number) {
+        this._strokeWidth = this.parseNumber(value);
+    }
+
+    @Input() absoluteStrokeWidth = false;
+    defaultSize: number;
 
     constructor(
         @Inject(ElementRef) private elem: ElementRef,
+        @Inject(Renderer2) private renderer: Renderer2,
         @Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
-    @Inject(Icons) private icons: Icons
-  ) { }
+        @Inject(LUCIDE_ICONS) private iconProviders: LucideIconProviderInterface[],
+        @Inject(LucideIconConfig) private iconConfig: LucideIconConfig,
+    ) {
+        this.defaultSize = defaultAttributes.height;
+    }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.name) {
-      // icons are provided as an array of objects because of "multi: true"
-      const icons = Object.assign({}, ...(this.icons as any as object[]));
-      const icoOfName = icons[this.toPascalCase(changes.name.currentValue)] || '';
-
-      if (!icoOfName) {
-        console.warn(
-          `Icon not found: ${changes.name.currentValue}\n` +
-          `Please check icon name or \'lucide icon list\'`
+    ngOnChanges(changes: LucideAngularComponentChanges): void {
+        this.color = this.color ?? this.iconConfig.color;
+        this.size = this.parseNumber(this.size ?? this.defaultSize);
+        this.strokeWidth = this.parseNumber(
+            this.strokeWidth ?? this.iconConfig.strokeWidth
         );
+        this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? false;
+        if (changes.name || changes.img) {
+            const name = changes.img?.currentValue ?? changes.name?.currentValue;
+            if (typeof name === 'string') {
+                const icoOfName = this.getIcon(this.toPascalCase(name));
+                if (icoOfName) {
+                    this.replaceElement(icoOfName);
                 } else {
-        const icoElement = createElement(icoOfName);
-        icoElement.setAttribute('stroke-width', 'inherit');
-        icoElement.setAttribute('fill', 'inherit');
-        icoElement.removeAttribute('width');
-        icoElement.removeAttribute('height');
-
-        this.elem.nativeElement.innerHTML = '';
-        this.elem.nativeElement.append(icoElement);
+                    throw new Error(`The "${name}" icon has not been provided by any available icon providers.`);
                 }
+            } else if (typeof name === 'object') {
+                this.replaceElement(name);
+            } else {
+                throw new Error(`No icon name or image has been provided.`);
             }
-    else if (changes.img) {
-      const icoElement = createElement(changes.img.currentValue);
-      icoElement.setAttribute('stroke-width', 'inherit');
-      icoElement.setAttribute('fill', 'inherit');
-      icoElement.removeAttribute('width');
-      icoElement.removeAttribute('height');
-
-      this.elem.nativeElement.innerHTML = '';
-      this.elem.nativeElement.append(icoElement);
         }
 
         this.changeDetector.markForCheck();
     }
 
+    replaceElement(img: LucideIconData): void {
+        const attributes = {
+            ...defaultAttributes,
+            ...img[1],
+            width:
+                typeof this.size === 'number'
+                    ? this.size.toString(10)
+                    : this.size,
+            height:
+                typeof this.size === 'number'
+                    ? this.size.toString(10)
+                    : this.size,
+            stroke: this.color ?? this.iconConfig.color,
+            'stroke-width': this.absoluteStrokeWidth
+                ? formatFixed(this.strokeWidth / (this.size / this.defaultSize))
+                : this.strokeWidth.toString(10),
+        };
+        const icoElement = this.createElement([img[0], attributes, img[2]]);
+        icoElement.classList.add('lucide');
+        if (typeof this.name === 'string') {
+            icoElement.classList.add(`lucide-${this.name.replace('_', '-')}`);
+        }
+        if (this.class) {
+            icoElement.classList.add(...this.class.split(/ /).map((a) => a.trim()).filter((a) => a.length > 0))
+        }
+        const childElements = this.elem.nativeElement.childNodes;
+        for (let child of childElements) {
+            this.renderer.removeChild(this.elem.nativeElement, child);
+        }
+        this.renderer.appendChild(this.elem.nativeElement, icoElement);
+    }
+
     toPascalCase(str: string): string {
-    return str.replace(/(\w)([a-z0-9]*)(_|-|\s*)/g, (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase());
+        return str.replace(
+            /(\w)([a-z0-9]*)(_|-|\s*)/g,
+            (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase()
+        );
+    }
+
+    private parseNumber(value: string | number): number {
+        if (typeof value === 'string') {
+            const parsedValue = parseInt(value, 10);
+            if (isNaN(parsedValue)) {
+                throw new Error(`${value} is not numeric.`);
+            }
+            return parsedValue;
+        }
+        return value;
+    }
+
+    private getIcon(name: string): LucideIconData|null {
+        for (const iconProvider of Array.isArray(this.iconProviders) ? this.iconProviders : [this.iconProviders]) {
+            if (iconProvider.hasIcon(name)) {
+                return iconProvider.getIcon(name);
+            }
+        }
+        return null;
+    }
+
+
+    private createElement([tag, attrs, children = []]: LucideIconData) {
+        const element = this.renderer.createElement(tag, 'http://www.w3.org/2000/svg');
+
+        Object.keys(attrs).forEach((name) => {
+            const attrValue: string =
+                typeof attrs[name] === 'string'
+                    ? (attrs[name] as string)
+                    : attrs[name].toString(10);
+            this.renderer.setAttribute(element, name, attrValue);
+        });
+
+        if (children.length) {
+            children.forEach((child: LucideIconData) => {
+                const childElement = this.createElement(child);
+                this.renderer.appendChild(element, childElement);
+            });
+        }
+
+        return element;
     }
 }

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

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

packages/lucide-angular/src/lib/lucide-icon.config.ts

@@ -0,0 +1,16 @@
+import {Injectable} from '@angular/core';
+import defaultAttributes from "../icons/constants/default-attributes";
+
+/**
+ * A configuration service for Lucide icon components.
+ *
+ * You can inject this service, typically in AppComponent, and customize its property values in
+ * order to provide default values for all the icons used in the application.
+ */
+@Injectable({ providedIn: 'root' })
+export class LucideIconConfig {
+    color: string = defaultAttributes.stroke;
+    size: number = defaultAttributes.width;
+    strokeWidth: number = defaultAttributes["stroke-width"];
+    absoluteStrokeWidth: boolean = false;
+}

packages/lucide-angular/src/lib/lucide-icon.provider.ts

@@ -0,0 +1,22 @@
+import {LucideIconData, LucideIcons} from '../icons/types';
+import {InjectionToken} from '@angular/core';
+
+export interface LucideIconProviderInterface {
+    hasIcon(name: string): boolean;
+    getIcon(name: string): LucideIconData|null;
+}
+
+export const LUCIDE_ICONS = new InjectionToken<LucideIconProviderInterface>('LucideIcons');
+
+export class LucideIconProvider implements LucideIconProviderInterface {
+    constructor(private icons: LucideIcons) {
+    }
+
+    getIcon(name: string): LucideIconData|null {
+        return this.hasIcon(name) ? this.icons[name] : null;
+    }
+
+    hasIcon(name: string): boolean {
+        return typeof this.icons === 'object' && name in this.icons;
+    }
+}

packages/lucide-angular/src/public-api.ts

@@ -0,0 +1,7 @@
+import * as icons from './icons/lucide-icons';
+
+export * from './lib/lucide-angular.component';
+export * from './lib/lucide-angular.module';
+export * from './lib/lucide-icon.config';
+export * from './icons/lucide-icons';
+export { icons };

packages/lucide-angular/src/test.ts

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

packages/lucide-angular/tsconfig.json

@@ -4,30 +4,34 @@
   "compilerOptions": {
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": true,
-    "downlevelIteration": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
     "paths": {
       "lucide-angular": [
         "dist"
-      ],
-      "lucide-angular/*": [
-        "dist/*"
-      ],
+      ]
     },
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2015",
+    "target": "es2017",
     "module": "es2020",
     "lib": [
-      "es2018",
+      "es2020",
       "dom"
     ]
   },
   "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
   }
 }

packages/lucide-angular/tsconfig.lib.json

@@ -3,22 +3,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/lib",
-    "target": "es2015",
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true,
-    "fullTemplateTypeCheck": true
+    "types": []
   },
   "exclude": [
     "src/test.ts",

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

@@ -5,7 +5,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": true,
     "compilationMode": "partial"
   }
 }

packages/lucide-angular/tslint.json

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

packages/lucide-preact/scripts/buildTypes.mjs

@@ -31,6 +31,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
   color?: string
   size?: string | number
   strokeWidth?: string | number
+  absoluteStrokeWidth?: boolean
 }
 
 export type LucideIcon = (props: LucideProps) => JSX.Element;

packages/lucide-preact/src/createLucideIcon.ts

@@ -7,6 +7,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
   color?: string
   size?: string | number
   strokeWidth?: string | number
+  absoluteStrokeWidth?: boolean
 }
 
 /**
@@ -21,7 +22,7 @@ export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionComponent<LucideProps> => {
   const Component = (
-    { color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }: LucideProps
+    { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }: LucideProps
   ) =>
     h(
       'svg' as unknown as ComponentType<Partial<JSX.SVGAttributes<SVGElement> & { 'stroke-width': number | string }>>,
@@ -30,7 +31,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): FunctionCompone
         width:  String(size),
         height: size,
         stroke: color,
-        ['stroke-width' as 'strokeWidth']: strokeWidth,
+        ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
         class: `lucide lucide-${toKebabCase(iconName)}`,
         ...rest,
       },

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

@@ -2,4 +2,6 @@
 
 exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
 
+exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
+
 exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-preact/tests/lucide-preact.spec.tsx

@@ -2,6 +2,8 @@ import { describe, it, expect } from 'vitest';
 import { render, cleanup } from '@testing-library/preact'
 import { Pen, Edit2, Grid } from '../src/lucide-preact';
 
+type AttributesAssertion = { attributes: Record<string, { value: string }>}
+
 describe('Using lucide icon components', () => {
   it('should render an component', () => {
     const { container } = render( <Grid/> );
@@ -20,7 +22,7 @@ describe('Using lucide icon components', () => {
       />,
     );
 
-    const { attributes } = getByTestId(testId);
+    const { attributes } = getByTestId(testId) as unknown as AttributesAssertion;
     expect(attributes.stroke.value).toBe('red');
     expect(attributes.width.value).toBe('48');
     expect(attributes.height.value).toBe('48');
@@ -54,4 +56,24 @@ describe('Using lucide icon components', () => {
 
     expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
   });
+
+  it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
+    const testId = 'grid-icon';
+    const { container, getByTestId } = render(
+      <Grid
+        data-testid={testId}
+        size={48}
+        stroke="red"
+        absoluteStrokeWidth
+      />,
+    );
+
+    const { attributes } = getByTestId(testId) as unknown as AttributesAssertion;
+
+    expect(attributes.stroke.value).toBe('red');
+    expect(attributes.width.value).toBe('48');
+    expect(attributes.height.value).toBe('48');
+    expect(attributes['stroke-width'].value).toBe('1');
+    expect( container.innerHTML ).toMatchSnapshot();
+  });
 })

packages/lucide-react-native/scripts/buildTypes.mjs

@@ -29,6 +29,7 @@ declare module 'lucide-react-native'
 // Create interface extending SVGProps
 export interface LucideProps extends Partial<SVGProps<SVGSVGElement>> {
   size?: string | number
+  absoluteStrokeWidth?: boolean
 }
 
 export type LucideIcon = (props: LucideProps) => JSX.Element;

packages/lucide-react-native/src/createLucideIcon.ts

@@ -8,20 +8,21 @@ type IconNode = [elementName: keyof ReactSVG, attrs: Record<string, string>][]
 
 export interface LucideProps extends SvgProps {
   size?: string | number
+  absoluteStrokeWidth?: boolean
 }
 
 const createLucideIcon = (iconName: string, iconNode: IconNode) => {
   const Component = forwardRef(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }: LucideProps, ref) =>
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, ...rest }: LucideProps, ref) =>
       createElement(
-        NativeSvg.Svg,
+        NativeSvg.Svg as unknown as string,
         {
           ref,
           ...defaultAttributes,
           width: size,
           height: size,
           stroke: color,
-          strokeWidth,
+          strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
           ...rest,
         },
         [