Add (flex) align icons 2 (#490)

* Add justify/space align icons

* Add tags

* reorder tags

.github/workflows/release.yml

@@ -238,6 +238,41 @@ jobs:
           name: lucide-preact-package-json
           path: packages/lucide-preact/package.json
 
+  lucide-svelte:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+
+      - name: Set package.json version lucide
+        run: yarn workspace lucide-svelte version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: yarn workspace lucide-svelte build
+
+      - name: Test
+        run: yarn workspace lucide-svelte test
+
+      - name: Publish
+        run: yarn workspace lucide-svelte publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-svelte-package-json
+          path: packages/lucide-svelte/package.json
+
   lucide-static:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
@@ -401,6 +436,7 @@ jobs:
         lucide-vue,
         lucide-vue-next,
         lucide-angular,
+        lucide-svelte,
         lucide-preact,
         lucide-flutter,
         lucide-font,
@@ -416,6 +452,7 @@ jobs:
           mv lucide-react-package-json/package.json packages/lucide-react/package.json
           mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
           mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
+          mv lucide-svelte-package-json/package.json packages/lucide-svelte/package.json
           mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
           mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
           mv lucide-flutter-pubspec-yaml/pubspec.yaml packages/lucide-flutter/pubspec.yaml

.github/workflows/test-lucide-svelte.yml

@@ -0,0 +1,36 @@
+name: Test Lucide Svelte
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-svelte/**
+  push:
+    paths:
+      - packages/lucide-svelte/**
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
+jobs:
+  lucide-svelte:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Build
+        run: yarn workspace lucide-svelte build
+
+      - name: Test
+        run: yarn workspace lucide-svelte test
+

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

@@ -0,0 +1,36 @@
+name: Test Lucide Vue Next
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-vue-next/**
+  push:
+    paths:
+      - packages/lucide-vue-next/**
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
+jobs:
+  lucide-vue-next:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Build
+        run: yarn workspace lucide-vue-next build
+
+      - name: Test
+        run: yarn workspace lucide-vue-next test
+

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

@@ -0,0 +1,36 @@
+name: Test Lucide Vue
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-vue/**
+  push:
+    paths:
+      - packages/lucide-vue/**
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
+
+jobs:
+  lucide-vue:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Build
+        run: yarn workspace lucide-vue build
+
+      - name: Test
+        run: yarn workspace lucide-vue test
+

README.md

@@ -33,6 +33,7 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
   * [Vue 3](#vue-3)
   * [Angular](#angular)
   * [Preact](#preact)
+  * [Static](#static-svg-sprite-font-icons-)
   * [Figma](#figma)
   * [Laravel](#laravel)
   * [Flutter](#flutter)
@@ -129,6 +130,23 @@ npm install lucide-preact
 
 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
 
+### Static (svg sprite, font, icons ..)
+
+Assets:
+[Font Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
+[SVG Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
+[SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)
+
+NPM package
+
+```sh
+yarn add lucide-static
+
+# or
+
+npm install lucide-static
+```
+
 ### Figma
 
 The lucide figma plugin.

docs/FIGMA_GUIDE.md

@@ -0,0 +1,7 @@
+---
+title: Figma Template Guide
+---
+
+# Figma Template Guide
+
+Please help us write this guide.

docs/ICON_DESIGN_GUIDE.md

@@ -1,4 +1,8 @@
-# Icon Design Guide
+---
+title: Icon Design Guide
+---
+
+# Icon Design Principles
 
 Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
 

docs/ILLUSTRATOR_GUIDE.md

@@ -1,3 +1,6 @@
+---
+title: Illustrator Template Guide
+---
 
 # Illustrator Template Guide
 
@@ -25,4 +28,4 @@ The Illustrator template is created following guidelines from the [Icon Design G
 
 After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
 
-7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).
+7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).

docs/INKSCAPE_GUIDE.md

@@ -1,3 +1,7 @@
+---
+title: Icon Design Guide
+---
+
 # Inkscape Setup Guide
 
 This guide shows the steps to setup Inkscape for creating icons that conform to the Featherity design

docs/comparison.md

@@ -0,0 +1,25 @@
+---
+title: Comparison
+---
+
+# Comparison
+
+## Lucide vs Feather Icons
+
+Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
+
+It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned adn not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+
+Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers.
+
+### Why should I choose Lucide over Feather Icons?
+
+- Lucide already expended the icon set by 130+ in less then a year. Lucide has over 500+ icon, feather sticks around 286 icons.
+- Well maintained code base.
+- Active community.
+
+### Should I migrate to Lucide?
+
+That depends if you're fine with the icons from feather icons. If that is the case, it is maybe not the effort worth it.
+But if you keep wrestling and feel limited by the icons Feather provides you can consider to migrate.
+We didn't remove any icons when we forked, but there are some icons renamed.

docs/index.md

@@ -1,116 +1,23 @@
 ---
 title: Introduction
+nextPage:
+  - comparison
+  - installation
 ---
 
 # Introduction
 
-## What is Lucide?
+An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
 
-Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
 
-It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
 
-Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
+When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
 
-### Why choose Lucide over Feather Icons
+Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for three-shaking abilities. With three-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
 
-- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
-- Well maintained code base.
-- Active community.
+Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [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).
 
-## Getting Started
-
-At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
-
-### Using Lucide packages
-
-### Web
-
-Implementation of the lucide icon library for web applications.
-
-```sh
-npm install lucide
-
-#or
-
-yarn add lucide
-```
-
-For more details, see the [documentation](lucide).
-
-### React
-
-Implementation of the lucide icon library for react applications.
-
-```sh
-yarn add lucide-react
-
-# or
-
-npm install lucide-react
-```
-
-For more details, see the [documentation](lucide-react).
-
-### Vue 2
-
-Implementation of the lucide icon library for vue applications.
-
-```sh
-yarn add lucide-vue
-
-# or
-
-npm install lucide-vue
-```
-
-For more details, see the [documentation](lucide-vue).
-
-### Vue 3
-
-Implementation of the lucide icon library for vue applications.
-
-```sh
-yarn add lucide-vue-next
-
-# or
-
-npm install lucide-vue-next
-```
-
-For more details, see the [documentation](lucide-vue-next).
-
-### Angular
-
-```sh
-yarn add lucide-angular
-
-# or
-
-npm install lucide-angular
-```
-
-For more details, see the [documentation](lucide-angular).
-
-### Preact
-
-Implementation of the lucide icon library for preact applications.
-
-```sh
-yarn add lucide-preact
-
-# or
-
-npm install lucide-preact
-```
-
-For more details, see the [documentation](lucide-preact).
-
-### Figma
-
-The lucide figma plugin.
-
-Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
-
-![Figma Lucide Cover](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
 

docs/installation.md

@@ -4,10 +4,126 @@ title: Installation
 
 # Installation
 
-Hello
+## Web
 
-> hello
+Implementation of the lucide icon library for web applications.
 
-```js
-console.log('asdadfasdf')
+```bash
+npm install lucide
+
+#or
+
+yarn add lucide
 ```
+
+For more details, see the [documentation](packages/lucide).
+
+## React
+
+Implementation of the lucide icon library for react applications.
+
+```bash
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+For more details, see the [documentation](packages/lucide-react).
+
+## Vue 2
+
+Implementation of the lucide icon library for vue applications.
+
+```bash
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+For more details, see the [documentation](packages/lucide-vue).
+
+## Vue 3
+
+Implementation of the lucide icon library for vue applications.
+
+```bash
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+For more details, see the [documentation](packages/lucide-vue-next).
+
+## Svelte
+
+Implementation of the lucide icon library for vue applications.
+
+```bash
+yarn add lucide-svelte
+
+# or
+
+npm install lucide-svelte
+```
+
+For more details, see the [documentation](packages/lucide-svelte).
+
+## Angular
+
+```bash
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+For more details, see the [documentation](packages/lucide-angular).
+
+## Preact
+
+Implementation of the lucide icon library for preact applications.
+
+```bash
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+For more details, see the [documentation](packages/lucide-preact).
+
+## Figma
+
+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")
+
+## Laravel
+
+Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
+
+```bash
+composer require mallardduck/blade-lucide-icons
+```
+
+For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
+
+## Flutter
+
+Implementation of Lucide icon library for Flutter applications.
+
+```bash
+flutter pub add lucide_icons
+```
+
+For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).

docs/packages/lucide-preact.md

@@ -62,7 +62,7 @@ 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.
+> ⚠️ 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
 

docs/packages/lucide-react.md

@@ -4,7 +4,7 @@ Implementation of the lucide icon library for react applications
 
 ## Installation
 
-```sh
+``` bash
 yarn add lucide-react
 
 # or

docs/packages/lucide-static.md

@@ -11,7 +11,7 @@ This package include the following lucide implementations:
 
 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.
 
-> ⚠️ 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 (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](https://github.com/lucide-icons/lucide/tree/master/packages/lucide), [lucide-react](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react), [lucide-vue](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue), [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next), [lucide-angular](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular), [lucide-preact](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact)
+> ⚠️ 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 (Threeshaking). 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)
 
 ## Installation
 

docs/packages/lucide-svelte.md

@@ -0,0 +1,89 @@
+# Lucide Svelte
+
+Implementation of the lucide icon library for svelte applications.
+
+## Installation
+
+```bash
+yarn add lucide-svelte
+
+# or
+
+npm install lucide-svelte
+```
+
+## How to use
+
+All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
+
+### Example
+
+Default usage:
+
+```html
+<script>
+import { Skull } from 'lucide-svelte'
+</script>
+
+<Skull/>
+```
+
+You can pass additional props to adjust the icon.
+
+```html
+<script>
+import { Camera } from 'lucide-svelte'
+</script>
+
+<Camera />
+```
+
+### Available props
+
+|  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)
+
+### Example of custom props
+
+```html
+<script>
+import { Phone } from 'lucide-svelte'
+</script>
+
+<Phone fill="#333"/>
+```
+
+This results a filled phone icon.
+
+### One generic icon component
+
+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 bundle your application,the build size will grow strongly. Because it will import all the icons.
+
+#### Icon Component Example
+
+``` html
+<script>
+  import * as icons from "lucide-svelte";
+  export let name;
+</script>
+
+<svelte:component this={icons[name]} {...$$props}/>
+```
+
+##### Then you can use it like this
+
+``` html
+<script>
+  import LucideIcon from "./LucideIcon";
+</script>
+
+<LucideIcon name="Menu" />
+```

docs/packages/lucide-vue-next.md

@@ -2,15 +2,19 @@
 
 Implementation of the lucide icon library for Vue 3 applications.
 
-> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue)
+> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](lucide-vue)
 
 ## Installation
 
-```sh
+**With yarn**
+
+```bash
 yarn add lucide-vue-next
+```
 
-# or
+**With npm**
 
+```bash
 npm install lucide-vue-next
 ```
 
@@ -23,7 +27,7 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` vue
+``` html
 <template>
   <Camera
     color="red"
@@ -56,7 +60,7 @@ export default {
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` vue
+``` html
 <template>
   <Camera fill="red" />
 </template>
@@ -66,11 +70,11 @@ You can also pass custom props that will be added in the svg as attributes.
 
 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.
+> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
 
 #### Icon Component Example
 
-``` vue
+``` html
 <template>
   <component :is="icon" />
 </template>
@@ -85,18 +89,18 @@ export default {
       required: true,
     },
   },
-  computed: {
-    icon() {
-      return icons[this.name];
-    },
-  },
+  setup(props) {
+    const icon = computed(() => icons[props.name])
+
+    return { icon }
+  }
 };
 </script>
 ```
 
 ##### Then you can use it like this
 
-``` vue
+``` html
 <template>
   <div id="app">
     <Icon name="Airplay" />

docs/packages/lucide-vue.md

@@ -2,7 +2,7 @@
 
 Implementation of the lucide icon library for Vue applications.
 
-> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next)
+> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](lucide-vue-next)
 
 ## Installation
 
@@ -23,7 +23,7 @@ Each icon can be imported as a vue component.
 
 You can pass additional props to adjust the icon.
 
-``` vue
+``` html
 <template>
   <Camera
     color="red"
@@ -56,7 +56,7 @@ export default {
 
 You can also pass custom props that will be added in the svg as attributes.
 
-``` vue
+``` html
 <template>
   <Camera fill="red" />
 </template>
@@ -66,11 +66,11 @@ You can also pass custom props that will be added in the svg as attributes.
 
 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.
+> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
 
 #### Icon Component Example
 
-``` vue
+``` html
 <template>
   <component :is="icon" />
 </template>
@@ -96,7 +96,7 @@ export default {
 
 ##### Then you can use it like this
 
-``` vue
+``` html
 <template>
   <div id="app">
     <Icon name="Airplay" />

icons/align-center-horizontal.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="M2 12h20" />
+  <path d="M10 16v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4" />
+  <path d="M10 8V4a2 2 0 00-2-2H6a2 2 0 00-2 2v4" />
+  <path d="M20 16v1a2 2 0 01-2 2h-2a2 2 0 01-2-2v-1" />
+  <path d="M14 8V7c0-1.1.9-2 2-2h2a2 2 0 012 2v1" />
+</svg>

icons/align-center-vertical.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 2v20" />
+  <path d="M8 10H4a2 2 0 01-2-2V6c0-1.1.9-2 2-2h4" />
+  <path d="M16 10h4a2 2 0 002-2V6a2 2 0 00-2-2h-4" />
+  <path d="M8 20H7a2 2 0 01-2-2v-2c0-1.1.9-2 2-2h1" />
+  <path d="M16 14h1a2 2 0 012 2v2a2 2 0 01-2 2h-1" />
+</svg>

icons/align-end-horizontal.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"
+>
+  <rect x="4" y="2" width="6" height="16" rx="2" />
+  <rect x="14" y="9" width="6" height="9" rx="2" />
+  <path d="M22 22H2" />
+</svg>

icons/align-end-vertical.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"
+>
+  <rect x="2" y="4" width="16" height="6" rx="2" />
+  <rect x="9" y="14" width="9" height="6" rx="2" />
+  <path d="M22 22V2" />
+</svg>

icons/align-horizontal-justify-center.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"
+>
+  <rect x="2" y="5" width="6" height="14" rx="2" />
+  <rect x="16" y="7" width="6" height="10" rx="2" />
+  <path d="M12 2v20" />
+</svg>

icons/align-horizontal-justify-end.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"
+>
+  <rect x="2" y="5" width="6" height="14" rx="2" />
+  <rect x="12" y="7" width="6" height="10" rx="2" />
+  <path d="M22 2v20" />
+</svg>

icons/align-horizontal-justify-start.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"
+>
+  <rect x="6" y="5" width="6" height="14" rx="2" />
+  <rect x="16" y="7" width="6" height="10" rx="2" />
+  <path d="M2 2v20" />
+</svg>

icons/align-horizontal-space-around.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"
+>
+  <rect x="9" y="7" width="6" height="10" rx="2" />
+  <path d="M4 22V2" />
+  <path d="M20 22V2" />
+</svg>

icons/align-horizontal-space-between.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"
+>
+  <rect x="3" y="5" width="6" height="14" rx="2" />
+  <rect x="15" y="7" width="6" height="10" rx="2" />
+  <path d="M3 2v20" />
+  <path d="M21 2v20" />
+</svg>

icons/align-start-horizontal.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"
+>
+  <rect x="4" y="6" width="6" height="16" rx="2" />
+  <rect x="14" y="6" width="6" height="9" rx="2" />
+  <path d="M22 2H2" />
+</svg>

icons/align-start-vertical.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"
+>
+  <rect x="6" y="14" width="9" height="6" rx="2" />
+  <rect x="6" y="4" width="16" height="6" rx="2" />
+  <path d="M2 2v20" />
+</svg>

icons/align-vertical-justify-center.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"
+>
+  <rect x="5" y="16" width="14" height="6" rx="2" />
+  <rect x="7" y="2" width="10" height="6" rx="2" />
+  <path d="M2 12h20" />
+</svg>

icons/align-vertical-justify-end.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"
+>
+  <rect x="5" y="12" width="14" height="6" rx="2" />
+  <rect x="7" y="2" width="10" height="6" rx="2" />
+  <path d="M2 22h20" />
+</svg>

icons/align-vertical-justify-start.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"
+>
+  <rect x="5" y="16" width="14" height="6" rx="2" />
+  <rect x="7" y="6" width="10" height="6" rx="2" />
+  <path d="M2 2h20" />
+</svg>

icons/align-vertical-space-around.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"
+>
+  <rect x="7" y="9" width="10" height="6" rx="2" />
+  <path d="M22 20H2" />
+  <path d="M22 4H2" />
+</svg>

icons/align-vertical-space-between.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"
+>
+  <rect x="5" y="15" width="14" height="6" rx="2" />
+  <rect x="7" y="3" width="10" height="6" rx="2" />
+  <path d="M2 21h20" />
+  <path d="M2 3h20" />
+</svg>

icons/cookie.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 2a10 10 0 1010 10 4 4 0 01-5-5 4 4 0 01-5-5" />
+  <path d="M8.5 8.5v.01" />
+  <path d="M16 15.5v.01" />
+  <path d="M12 12v.01" />
+  <path d="M11 17v.01" />
+  <path d="M7 14v.01" />
+</svg>

icons/package-check.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 16l2 2 4-4" />
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+</svg>

icons/package-minus.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 16h6" />
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+</svg>

icons/package-plus.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 16h6" />
+  <path d="M19 13v6" />
+  <path d="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+</svg>

icons/package-search.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="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M12 12v10M3.29 7L12 12 3.29 7zM12 12l8.71-5L12 12z" />
+  <circle cx="18.5" cy="15.5" r="2.5" />
+  <path d="M20.27 17.27L22 19" />
+</svg>

icons/package-x.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="M21 10V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l2-1.14" />
+  <path d="M16.5 9.4L7.55 4.24" />
+  <path d="M3.29 7L12 12m0 0l8.71-5M12 12v10" />
+  <path d="M17 13l5 5m-5 0l5-5" />
+</svg>

icons/superscript.svg

@@ -1,15 +1,15 @@
-<svg 
-	xmlns="http://www.w3.org/2000/svg"
-	width="24" 
-	height="24" 
-	viewBox="0 0 24 24" 
-	fill="none" 
-	stroke="currentColor"
+<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="m4 19 8-8" />
-	<path d="m12 19-8-8" />
-	<path d="m20 12h-4c0-1.5 0.4417-2 1.5-2.5s2.5-1.1662 2.5-2.4985c7e-4 -0.47197-0.1706-0.92895-0.4837-1.29-0.313-0.36106-0.7475-0.60291-1.2266-0.6827s-0.9719 0.00763-1.3909 0.24676c-0.4191 0.23914-0.7375 0.61457-0.8988 1.0598" />
+  <path d="M4 19l8-8" />
+  <path d="M12 19l-8-8" />
+  <path d="M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 00-2.617-.436c-.42.239-.738.614-.899 1.06" />
 </svg>

icons/text-cursor-input.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M5.3 4h.9C7.7 4 9 5.3 9 6.7m0 0v10.5c0 1.6-1.1 2.7-2.7 2.7h-1M9 6.7v10.6a2.6 2.6 0 0 0 2.7 2.7h1M9 6.7C9 5.2 10.2 4 11.8 4h.9" />
+  <path d="M5.3 4h.9C7.7 4 9 5.3 9 6.7m0 0v10.5c0 1.6-1.1 2.7-2.7 2.7h-1M9 6.7v10.6a2.6 2.6 0 002.7 2.7h1M9 6.7C9 5.2 10.2 4 11.8 4h.9" />
   <path d="M13.1 7.9h6.8c1.1 0 2.1 1 2.1 2.1v4c0 1.1-.9 2.1-2.1 2.1h-6.8" />
   <path d="M4.8 16.1h-.7C3 16.1 2 15.1 2 14v-4c0-1.1 1-2.1 2.1-2.1h.7" />
 </svg>

icons/text-cursor.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1" />
-  <path d="M7 22h1a4 4 0 0 0 4-4v-1" />
-  <path d="M7 2h1a4 4 0 0 1 4 4v1" />
-</svg>
+  <path d="M17 22h-1a4 4 0 01-4-4V6a4 4 0 014-4h1" />
+  <path d="M7 22h1a4 4 0 004-4v-1" />
+  <path d="M7 2h1a4 4 0 014 4v1" />
+</svg>

package.json

@@ -30,6 +30,7 @@
     "lucide-preact": "yarn workspace lucide-preact",
     "lucide-vue": "yarn workspace lucide-vue",
     "lucide-vue-next": "yarn workspace lucide-vue-next",
+    "lucide-svelte": "yarn workspace lucide-svelte",
     "lucide-static": "yarn workspace lucide-static",
     "build:icons": "babel-node ./scripts/buildIcons.js --presets @babel/env",
     "build:outline-icons": "babel-node ./scripts/outlineSvg.js --presets @babel/env",
@@ -79,6 +80,7 @@
     "icons/*.svg": "npx babel-node ./scripts/optimizeStagedSvgs.js --presets @babel/env"
   },
   "dependencies": {
+    "rollup-plugin-svelte": "^7.1.0",
     "svg-outline-stroke": "^1.3.1"
   }
 }

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
   "description": "A Lucide icon library package for Angular applications",
-  "version": "0.16.28",
+  "version": "0.17.3",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",
@@ -49,7 +49,7 @@
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
-    "karma": "~6.3.8",
+    "karma": "~6.3.14",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",

packages/lucide-flutter/pubspec.yaml

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

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
   "description": "A Lucide icon library package for Preact applications",
-  "version": "0.16.28",
+  "version": "0.17.3",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-preact/rollup.config.js

@@ -30,7 +30,7 @@ const configs = bundles
     inputs.map(input => ({
       input,
       plugins: plugins(pkg, minify),
-      external: ['preact', 'prop-types', 'lucide'],
+      external: ['preact', 'prop-types'],
       output: {
         name: packageName,
         file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
   "description": "A Lucide icon library package for React applications",
-  "version": "0.16.28",
+  "version": "0.17.3",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-svelte/.gitignore

@@ -0,0 +1 @@
+src/icons/*.svelte

packages/lucide-svelte/.npmignore

@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js

packages/lucide-svelte/LICENSE

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

packages/lucide-svelte/README.md

@@ -0,0 +1,91 @@
+# Lucide Svelte
+
+Implementation of the lucide icon library for svelte applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## Installation
+
+```sh
+yarn add lucide-svelte
+
+# or
+
+npm install lucide-svelte
+```
+
+## How to use
+
+All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
+
+### Example
+
+Default usage:
+
+```sv
+<script>
+import { Skull } from 'lucide-svelte'
+</script>
+
+<Skull/>
+```
+
+You can pass additional props to adjust the icon.
+
+```sv
+<script>
+import { Camera } from 'lucide-svelte'
+</script>
+
+<Camera />
+```
+
+### Available props
+
+|  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)
+
+### Example of custom props
+
+```sv
+<script>
+import { Phone } from 'lucide-svelte'
+</script>
+
+<Phone fill="#333"/>
+```
+
+This results a filled phone icon.
+
+### 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 bundle your application,the build size will grow strongly. Because it will import all the icons.
+
+#### Icon Component Example
+
+``` svelte
+<script>
+  import * as icons from "lucide-svelte";
+  export let name;
+</script>
+
+<svelte:component this={icons[name]} {...$$props}/>
+```
+
+##### Then you can use it like this
+
+``` svelte
+<script>
+  import LucideIcon from "./LucideIcon";
+</script>
+
+<LucideIcon name="Menu" />
+```

packages/lucide-svelte/babel.config.js

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

packages/lucide-svelte/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
+  transformIgnorePatterns: [`/node_modules`],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.svelte$': 'svelte-jester',
+  },
+  moduleFileExtensions: ['js', 'svelte'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+};

packages/lucide-svelte/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "lucide-svelte",
+  "description": "A Lucide icon library package for Svelte applications",
+  "version": "0.17.3",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-svelte"
+  },
+  "author": "Eric Fennis",
+  "amdName": "lucide-svelte",
+  "main": "dist/cjs/lucide-svelte.js",
+  "main:umd": "dist/umd/lucide-svelte.js",
+  "module": "dist/esm/lucide-svelte.js",
+  "svelte": "dist/esm/lucide-svelte.js",
+  "unpkg": "dist/umd/lucide-svelte.min.js",
+  "typings": "dist/lucide-svelte.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "yarn clean && yarn build:icons && (yarn build:es & yarn build:types & yarn build:bundles)",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.svelte && rm -f index.js",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-svelte/src --templateSrc=../packages/lucide-svelte/scripts/exportTemplate --exportFileName=index.js --iconFileExtention=.svelte --pretty=false",
+    "build:es": "babel src -d dist/esm --copy-files",
+    "build:types": "yarn --cwd ../../ babel-node packages/lucide-svelte/scripts/buildTypes.js",
+    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-svelte/rollup.config.js",
+    "test": "jest",
+    "test:watch": "npm run test -- --watch"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/preact": "^2.0.1",
+    "@testing-library/svelte": "^3.0.3",
+    "babel-preset-preact": "^2.0.0",
+    "jest": "^26.6.3",
+    "rollup-plugin-svelte": "^7.1.0",
+    "svelte": "^3.45.0",
+    "svelte-jester": "^2.3.1",
+    "svelte-preprocess": "^4.10.1",
+    "svelte2tsx": "^0.4.12"
+  },
+  "peerDependencies": {
+    "svelte": "^3.45.0",
+    "svelte2tsx": "^0.4.12"
+  }
+}

packages/lucide-svelte/rollup.config.js

@@ -0,0 +1,75 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import svelte from 'rollup-plugin-svelte';
+import preprocess from 'svelte-preprocess';
+import bundleSize from '@atomico/rollup-plugin-sizes';
+import { terser } from 'rollup-plugin-terser';
+import license from 'rollup-plugin-license';
+import resolve from '@rollup/plugin-node-resolve';
+import commonJS from '@rollup/plugin-commonjs';
+import pkg from './package.json';
+
+const packageName = 'LucideSvelte';
+const outputFileName = 'lucide-svelte';
+const rootDir = 'packages/lucide-svelte'; // It runs from the root
+const outputDir = `${rootDir}/dist`;
+const inputs = [`${rootDir}/src/lucide-svelte.js`];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+    sourcemap: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    sourcemap: true,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+    sourcemap: true,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify }) =>
+    inputs.map(input => ({
+      input,
+      plugins: [
+        svelte({
+          preprocess,
+          compilerOptions: {
+            dev: false,
+          },
+          emitCss: false,
+        }),
+        resolve(),
+        commonJS({
+          include: 'node_modules/**',
+        }),
+        // The two minifiers together seem to procude a smaller bundle 🤷‍♂️
+        minify && terser(),
+        license({
+          banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
+        }),
+        bundleSize(),
+      ],
+      external: ['svelte'],
+      output: {
+        name: packageName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          svelte: 'svelte',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;

packages/lucide-svelte/scripts/buildTypes.js

@@ -0,0 +1,50 @@
+import path from 'path';
+import {
+  writeFile,
+  readSvgDirectory,
+  resetFile,
+  toPascalCase,
+  appendFile,
+} from '../../../scripts/helpers';
+
+const srcDirectory = path.join(__dirname, '../dist');
+
+// Declare type definitions
+const typeDefinitions = `\
+/// <reference types="svelte" />
+/// <reference types="svelte2tsx/svelte-jsx" />
+import { SvelteComponentTyped } from "svelte";
+
+interface IconProps extends Partial<svelte.JSX.SVGProps<SVGSVGElement>> {
+  color?: string
+  size?: number,
+  strokeWidth?: number,
+  class?: string
+}
+
+interface IconEvents {
+  [evt: string]: CustomEvent<any>;
+}
+
+export type Icon = SvelteComponentTyped<IconProps, IconEvents, {}>
+
+// Generated icons
+`;
+
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+const TYPES_FILE = 'lucide-svelte.d.ts';
+
+resetFile(TYPES_FILE, srcDirectory);
+writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+svgFiles.forEach(svgFile => {
+  const iconName = path.basename(svgFile, '.svg');
+  const componentName = toPascalCase(iconName);
+
+  const exportTypeString = `export declare class ${componentName} extends SvelteComponentTyped<IconProps, IconEvents, {}> {}\n`;
+  appendFile(exportTypeString, TYPES_FILE, srcDirectory);
+});
+
+console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');

packages/lucide-svelte/scripts/exportTemplate.js

@@ -0,0 +1,17 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { stringify } from 'svgson';
+
+export default ({ iconName, children }) => {
+  const iconChildNodes = children.map(([name, attributes]) => ({ name, attributes, children: [] }));
+  const iconChildrenHTML = iconChildNodes.map(stringify).join('\n  ');
+  return `\
+<script>
+import Icon from '../Icon.svelte';
+</script>
+
+<Icon name="${iconName}" {...$$props} >
+  ${iconChildrenHTML}
+  <slot/>
+</Icon>
+`;
+};

packages/lucide-svelte/src/Icon.svelte

@@ -0,0 +1,19 @@
+<script>
+  import defaultAttributes from './defaultAttributes'
+  export let name
+  export let color = 'currentColor'
+  export let size = 24
+  export let strokeWidth = 2
+</script>
+
+<svg
+  {...defaultAttributes}
+  {...$$restProps}
+  width={size}
+  height={size}
+  stroke={color}
+  stroke-width={strokeWidth}
+  class={`lucide-icon lucide lucide-${name} ${$$props.class ?? ''}`}
+>
+  <slot />
+</svg>

packages/lucide-svelte/src/defaultAttributes.js

@@ -0,0 +1,13 @@
+const defaultAttributes = {
+  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',
+};
+
+export default defaultAttributes;

packages/lucide-svelte/src/icons/.gitkeep

@@ -0,0 +1 @@
+Folder for generated icons

packages/lucide-svelte/src/lucide-svelte.js

@@ -0,0 +1 @@
+export * from './icons';

packages/lucide-svelte/svelte.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+  preprocess: sveltePreprocess(),
+};

packages/lucide-svelte/tests/TestSlots.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Smile from '../src/icons/smile.svelte'
+</script>
+
+<Smile>
+  <text>Test</text>
+</Smile>

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

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Using lucide icon components should add a class to the element 1`] = `
+<svg
+  class="lucide-icon lucide lucide-smile my-icon"
+  fill="none"
+  height="24"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  viewBox="0 0 24 24"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    cx="12"
+    cy="12"
+    r="10"
+  />
+   
+  <path
+    d="M8 14s1.5 2 4 2 4-2 4-2"
+  />
+   
+  <line
+    x1="9"
+    x2="9.01"
+    y1="9"
+    y2="9"
+  />
+   
+  <line
+    x1="15"
+    x2="15.01"
+    y1="9"
+    y2="9"
+  />
+   
+</svg>
+`;
+
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
+<body>
+  <div>
+    <svg
+      class="lucide-icon lucide lucide-smile "
+      fill="none"
+      height="48"
+      stroke="red"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+      viewBox="0 0 24 24"
+      width="48"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+       
+      <path
+        d="M8 14s1.5 2 4 2 4-2 4-2"
+      />
+       
+      <line
+        x1="9"
+        x2="9.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <line
+        x1="15"
+        x2="15.01"
+        y1="9"
+        y2="9"
+      />
+       
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`Using lucide icon components should render an component 1`] = `
+<body>
+  <div>
+    <svg
+      class="lucide-icon lucide lucide-smile "
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+       
+      <path
+        d="M8 14s1.5 2 4 2 4-2 4-2"
+      />
+       
+      <line
+        x1="9"
+        x2="9.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <line
+        x1="15"
+        x2="15.01"
+        y1="9"
+        y2="9"
+      />
+       
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`Using lucide icon components should render an icon slot 1`] = `
+<body>
+  <div>
+    <svg
+      class="lucide-icon lucide lucide-smile "
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+      />
+       
+      <path
+        d="M8 14s1.5 2 4 2 4-2 4-2"
+      />
+       
+      <line
+        x1="9"
+        x2="9.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <line
+        x1="15"
+        x2="15.01"
+        y1="9"
+        y2="9"
+      />
+       
+      <text>
+        Test
+      </text>
+    </svg>
+  </div>
+</body>
+`;

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

@@ -0,0 +1,55 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { Smile } from '../src/icons'
+import TestSlots from './TestSlots.svelte'
+
+describe('Using lucide icon components', () => {
+  it('should render an component', () => {
+    const { container } = render(Smile);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should adjust the size, stroke color and stroke width', () => {
+    const { container } = render(Smile, {
+      props: {
+        size: 48,
+        color: 'red',
+        strokeWidth: 4
+      }
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should add a class to the element', () => {
+    render(Smile, {
+      props: {
+        class: "my-icon"
+      }
+    });
+
+    const [icon] = document.getElementsByClassName('my-icon');
+
+    expect(icon).toBeInTheDocument();
+    expect(icon).toMatchSnapshot();
+    expect(icon.getAttribute("class")).toBe(['lucide-icon','lucide','lucide-smile', 'my-icon'].join(' '));
+  });
+
+  it('should add a style attribute to the element', () => {
+    render(Smile, {
+      props: {
+        style: "position: absolute;"
+      }
+    });
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon.getAttribute('style')).toContain('position: absolute');
+  });
+
+  it('should render an icon slot', () => {
+    const { container, getByText } = render(TestSlots);
+
+    const textElement = getByText('Test');
+    expect(textElement).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+});

packages/lucide-vue-next/jest.config.js

@@ -11,4 +11,5 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
 };

packages/lucide-vue-next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.16.28",
+  "version": "0.17.3",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
@@ -30,13 +30,14 @@
     "test:watch": "jest --watchAll"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/test-utils": "^2.0.0-rc.14",
+    "@testing-library/vue": "^6.4.2",
+    "@vue/compiler-sfc": "3.0.1",
+    "@vue/test-utils": "2.0.0-rc.18",
     "jest-serializer-vue": "^2.0.2",
     "vue": "3.0.6",
     "vue-jest": "^5.0.0-alpha.10"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "3.0.1"
   }
 }

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

@@ -11,18 +11,26 @@ import defaultAttributes from './defaultAttributes';
  */
 export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 
-const createVueComponent = (iconName, iconNode) => (props, context) =>
-  h(
+const createVueComponent = (iconName, iconNode) => (
+  { size, color, ...props }, // props
+  { attrs, emit, slots } // context
+  ) => {
+  return h(
     'svg',
     {
       ...defaultAttributes,
-      width: props.size || defaultAttributes.width,
-      height: props.size || defaultAttributes.height,
-      class: ['lucide', `lucide-${toKebabCase(iconName)}`],
-      ...context.attrs,
+      width: size || defaultAttributes.width,
+      height: size || defaultAttributes.height,
+      stroke: color || defaultAttributes.stroke,
+      ...attrs,
+      class: ['lucide', `lucide-${toKebabCase(iconName)}`, attrs?.class || ''],
       ...props,
     },
-    iconNode.map(child => h(...child)),
+    [
+      ...iconNode.map(child => h(...child)),
+      ...(slots.default ? [slots.default()] : [])
+    ],
   );
+};
 
 export default createVueComponent;

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

@@ -1,112 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Using lucide icon components should add a class to the element 1`] = `
-VueWrapper {
-  "__app": Object {
-    "_component": Object {
-      "__emits": Object {},
-      "__props": Array [
-        Object {},
-        Array [],
-      ],
-      "name": "VTU_ROOT",
-      "render": [Function],
-    },
-    "_container": <div
-      data-v-app=""
-    >
-      <svg
-        class="lucide-icon my-icon"
-        fill="none"
-        height="24"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-        />
-        <path
-          d="M8 14s1.5 2 4 2 4-2 4-2"
-        />
-        <line
-          x1="9"
-          x2="9.01"
-          y1="9"
-          y2="9"
-        />
-        <line
-          x1="15"
-          x2="15.01"
-          y1="9"
-          y2="9"
-        />
-      </svg>
-    </div>,
-    "_context": Object {
-      "app": [Circular],
-      "components": Object {
-        "transition": Object {
-          "name": "transition",
-        },
-        "transition-group": Object {
-          "name": "transition-group",
-        },
-      },
-      "config": Object {
-        "errorHandler": undefined,
-        "globalProperties": Object {},
-        "isCustomElement": [Function],
-        "isNativeTag": [Function],
-        "optionMergeStrategies": Object {},
-        "performance": false,
-        "warnHandler": undefined,
-      },
-      "directives": Object {},
-      "mixins": Array [
-        Object {
-          "__emits": null,
-          "__props": Array [],
-          "beforeCreate": [Function],
-        },
-      ],
-      "provides": Object {},
-      "reload": [Function],
-    },
-    "_props": null,
-    "_uid": 2,
-    "component": [Function],
-    "config": Object {
-      "errorHandler": undefined,
-      "globalProperties": Object {},
-      "isCustomElement": [Function],
-      "isNativeTag": [Function],
-      "optionMergeStrategies": Object {},
-      "performance": false,
-      "warnHandler": undefined,
-    },
-    "directive": [Function],
-    "mixin": [Function],
-    "mount": [Function],
-    "provide": [Function],
-    "unmount": [Function],
-    "use": [Function],
-    "version": "3.0.6",
-  },
-  "__setProps": [Function],
-  "componentVM": Object {
-    "hasOwnProperty": [Function],
-  },
-  "isDisabled": [Function],
-  "rootVM": Object {},
-  "wrapperElement": <svg
-    class="lucide-icon my-icon"
+<div>
+  <svg
+    class="my-icon"
     fill="none"
     height="24"
     stroke="currentColor"
@@ -137,117 +34,13 @@ VueWrapper {
       y1="9"
       y2="9"
     />
-  </svg>,
-}
+  </svg>
+</div>
 `;
 
 exports[`Using lucide icon components should add a style attribute to the element 1`] = `
-VueWrapper {
-  "__app": Object {
-    "_component": Object {
-      "__emits": Object {},
-      "__props": Array [
-        Object {},
-        Array [],
-      ],
-      "name": "VTU_ROOT",
-      "render": [Function],
-    },
-    "_container": <div
-      data-v-app=""
-    >
-      <svg
-        class="lucide lucide-smile-icon"
-        fill="none"
-        height="24"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        style="position: absolute;"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-        />
-        <path
-          d="M8 14s1.5 2 4 2 4-2 4-2"
-        />
-        <line
-          x1="9"
-          x2="9.01"
-          y1="9"
-          y2="9"
-        />
-        <line
-          x1="15"
-          x2="15.01"
-          y1="9"
-          y2="9"
-        />
-      </svg>
-    </div>,
-    "_context": Object {
-      "app": [Circular],
-      "components": Object {
-        "transition": Object {
-          "name": "transition",
-        },
-        "transition-group": Object {
-          "name": "transition-group",
-        },
-      },
-      "config": Object {
-        "errorHandler": undefined,
-        "globalProperties": Object {},
-        "isCustomElement": [Function],
-        "isNativeTag": [Function],
-        "optionMergeStrategies": Object {},
-        "performance": false,
-        "warnHandler": undefined,
-      },
-      "directives": Object {},
-      "mixins": Array [
-        Object {
-          "__emits": null,
-          "__props": Array [],
-          "beforeCreate": [Function],
-        },
-      ],
-      "provides": Object {},
-      "reload": [Function],
-    },
-    "_props": null,
-    "_uid": 3,
-    "component": [Function],
-    "config": Object {
-      "errorHandler": undefined,
-      "globalProperties": Object {},
-      "isCustomElement": [Function],
-      "isNativeTag": [Function],
-      "optionMergeStrategies": Object {},
-      "performance": false,
-      "warnHandler": undefined,
-    },
-    "directive": [Function],
-    "mixin": [Function],
-    "mount": [Function],
-    "provide": [Function],
-    "unmount": [Function],
-    "use": [Function],
-    "version": "3.0.6",
-  },
-  "__setProps": [Function],
-  "componentVM": Object {
-    "hasOwnProperty": [Function],
-  },
-  "isDisabled": [Function],
-  "rootVM": Object {},
-  "wrapperElement": <svg
+<div>
+  <svg
     class="lucide lucide-smile-icon"
     fill="none"
     height="24"
@@ -280,127 +73,22 @@ VueWrapper {
       y1="9"
       y2="9"
     />
-  </svg>,
-}
+  </svg>
+</div>
 `;
 
 exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
-VueWrapper {
-  "__app": Object {
-    "_component": Object {
-      "__emits": Object {},
-      "__props": Array [
-        Object {},
-        Array [],
-      ],
-      "name": "VTU_ROOT",
-      "render": [Function],
-    },
-    "_container": <div
-      data-v-app=""
-    >
-      <svg
-        class="lucide lucide-smile-icon"
-        fill="none"
-        height="48"
-        size="48"
-        stroke="red"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        strokeWidth="4"
-        viewBox="0 0 24 24"
-        width="48"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-        />
-        <path
-          d="M8 14s1.5 2 4 2 4-2 4-2"
-        />
-        <line
-          x1="9"
-          x2="9.01"
-          y1="9"
-          y2="9"
-        />
-        <line
-          x1="15"
-          x2="15.01"
-          y1="9"
-          y2="9"
-        />
-      </svg>
-    </div>,
-    "_context": Object {
-      "app": [Circular],
-      "components": Object {
-        "transition": Object {
-          "name": "transition",
-        },
-        "transition-group": Object {
-          "name": "transition-group",
-        },
-      },
-      "config": Object {
-        "errorHandler": undefined,
-        "globalProperties": Object {},
-        "isCustomElement": [Function],
-        "isNativeTag": [Function],
-        "optionMergeStrategies": Object {},
-        "performance": false,
-        "warnHandler": undefined,
-      },
-      "directives": Object {},
-      "mixins": Array [
-        Object {
-          "__emits": null,
-          "__props": Array [],
-          "beforeCreate": [Function],
-        },
-      ],
-      "provides": Object {},
-      "reload": [Function],
-    },
-    "_props": null,
-    "_uid": 1,
-    "component": [Function],
-    "config": Object {
-      "errorHandler": undefined,
-      "globalProperties": Object {},
-      "isCustomElement": [Function],
-      "isNativeTag": [Function],
-      "optionMergeStrategies": Object {},
-      "performance": false,
-      "warnHandler": undefined,
-    },
-    "directive": [Function],
-    "mixin": [Function],
-    "mount": [Function],
-    "provide": [Function],
-    "unmount": [Function],
-    "use": [Function],
-    "version": "3.0.6",
-  },
-  "__setProps": [Function],
-  "componentVM": Object {
-    "hasOwnProperty": [Function],
-  },
-  "isDisabled": [Function],
-  "rootVM": Object {},
-  "wrapperElement": <svg
+<div>
+  <svg
     class="lucide lucide-smile-icon"
+    color="red"
     fill="none"
     height="48"
     size="48"
     stroke="red"
     stroke-linecap="round"
     stroke-linejoin="round"
-    stroke-width="2"
-    strokeWidth="4"
+    stroke-width="4"
     viewBox="0 0 24 24"
     width="48"
     xmlns="http://www.w3.org/2000/svg"
@@ -425,116 +113,13 @@ VueWrapper {
       y1="9"
       y2="9"
     />
-  </svg>,
-}
+  </svg>
+</div>
 `;
 
-exports[`Using lucide icon components should render an component 1`] = `
-VueWrapper {
-  "__app": Object {
-    "_component": Object {
-      "__emits": Object {},
-      "__props": Array [
-        Object {},
-        Array [],
-      ],
-      "name": "VTU_ROOT",
-      "render": [Function],
-    },
-    "_container": <div
-      data-v-app=""
-    >
-      <svg
-        class="lucide lucide-smile-icon"
-        fill="none"
-        height="24"
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="10"
-        />
-        <path
-          d="M8 14s1.5 2 4 2 4-2 4-2"
-        />
-        <line
-          x1="9"
-          x2="9.01"
-          y1="9"
-          y2="9"
-        />
-        <line
-          x1="15"
-          x2="15.01"
-          y1="9"
-          y2="9"
-        />
-      </svg>
-    </div>,
-    "_context": Object {
-      "app": [Circular],
-      "components": Object {
-        "transition": Object {
-          "name": "transition",
-        },
-        "transition-group": Object {
-          "name": "transition-group",
-        },
-      },
-      "config": Object {
-        "errorHandler": undefined,
-        "globalProperties": Object {},
-        "isCustomElement": [Function],
-        "isNativeTag": [Function],
-        "optionMergeStrategies": Object {},
-        "performance": false,
-        "warnHandler": undefined,
-      },
-      "directives": Object {},
-      "mixins": Array [
-        Object {
-          "__emits": null,
-          "__props": Array [],
-          "beforeCreate": [Function],
-        },
-      ],
-      "provides": Object {},
-      "reload": [Function],
-    },
-    "_props": null,
-    "_uid": 0,
-    "component": [Function],
-    "config": Object {
-      "errorHandler": undefined,
-      "globalProperties": Object {},
-      "isCustomElement": [Function],
-      "isNativeTag": [Function],
-      "optionMergeStrategies": Object {},
-      "performance": false,
-      "warnHandler": undefined,
-    },
-    "directive": [Function],
-    "mixin": [Function],
-    "mount": [Function],
-    "provide": [Function],
-    "unmount": [Function],
-    "use": [Function],
-    "version": "3.0.6",
-  },
-  "__setProps": [Function],
-  "componentVM": Object {
-    "hasOwnProperty": [Function],
-  },
-  "isDisabled": [Function],
-  "rootVM": Object {},
-  "wrapperElement": <svg
+exports[`Using lucide icon components should pass children to the icon slot 1`] = `
+<div>
+  <svg
     class="lucide lucide-smile-icon"
     fill="none"
     height="24"
@@ -566,6 +151,49 @@ VueWrapper {
       y1="9"
       y2="9"
     />
-  </svg>,
-}
+    
+    <text>
+      Hello World
+    </text>
+    
+  </svg>
+</div>
+`;
+
+exports[`Using lucide icon components should render an component 1`] = `
+<div>
+  <svg
+    class="lucide lucide-smile-icon"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <path
+      d="M8 14s1.5 2 4 2 4-2 4-2"
+    />
+    <line
+      x1="9"
+      x2="9.01"
+      y1="9"
+      y2="9"
+    />
+    <line
+      x1="15"
+      x2="15.01"
+      y1="9"
+      y2="9"
+    />
+  </svg>
+</div>
 `;

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

@@ -1,44 +1,91 @@
-import { mount } from '@vue/test-utils'
+import {render, fireEvent} from '@testing-library/vue'
 import { Smile } from '../src/icons'
 
 describe('Using lucide icon components', () => {
   it('should render an component', () => {
-    const wrapper = mount(Smile)
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(Smile)
+    expect(container).toMatchSnapshot();
   });
 
   it('should adjust the size, stroke color and stroke width', () => {
-    const wrapper = mount(Smile, {
-      propsData: {
+    const {container} = render(Smile, {
+      props: {
         size: 48,
-        stroke: 'red',
-        strokeWidth: 4
+        color: 'red',
+        'stroke-width': 4
       }
     })
 
-    expect(wrapper).toMatchSnapshot();
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon.getAttribute('width')).toBe('48')
+    expect(icon.getAttribute('stroke')).toBe('red')
+    expect(icon.getAttribute('stroke-width')).toBe('4')
+
+    expect(container).toMatchSnapshot();
   });
 
 
   it('should add a class to the element', () => {
-    const wrapper = mount(Smile, {
+    const {container} = render(Smile, {
       attrs: {
-        class: "lucide-icon my-icon"
+        class: "my-icon"
       }
     })
 
-    expect(wrapper).toMatchSnapshot();
-    expect(String(wrapper.classes())).toBe(String(['lucide-icon', 'my-icon']))
+    expect(container).toMatchSnapshot();
+
+    const [icon] = document.getElementsByClassName('my-icon');
+
+    console.log(icon);
+
+    expect(icon).toHaveClass('my-icon')
   });
 
   it('should add a style attribute to the element', () => {
-    const wrapper = mount(Smile, {
+    const {container} = render(Smile, {
       attrs: {
         style: 'position: absolute',
       }
     })
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.attributes('style')).toContain('position: absolute')
+    expect(container).toMatchSnapshot();
+
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon).toHaveStyle({ position: 'absolute' })
+  });
+
+  it('should call the onClick event', async () => {
+    const onClick = jest.fn()
+    render(Smile, {
+      attrs: {
+        onClick,
+      }
+    })
+
+    const [icon] = document.getElementsByClassName('lucide');
+
+    await fireEvent.click(icon)
+
+    expect(onClick).toHaveBeenCalled()
+  });
+
+  it('should pass children to the icon slot', () => {
+    const testText = 'Hello World'
+    const template = {
+      name: 'Stub',
+      template: `<text>${testText}</text>`
+    }
+    const { getByText, container } = render(Smile, {
+      slots: {
+        default: template
+      }
+    })
+
+    const textElement = getByText(testText)
+
+    expect(textElement).toBeInTheDocument()
+    expect(container).toMatchSnapshot();
   });
 });

packages/lucide-vue/jest.config.js

@@ -11,4 +11,5 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
 };

packages/lucide-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucide-vue",
-  "version": "0.16.28",
+  "version": "0.17.3",
   "author": "Eric Fennis",
   "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",
@@ -28,6 +28,8 @@
     "test:watch": "jest --watchAll"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/vue": "^5.8.2",
     "@vue/test-utils": "^1.1.2",
     "jest-serializer-vue": "^2.0.2",
     "vue": "^2.6.12",

packages/lucide-vue/src/createVueComponent.js

@@ -36,6 +36,7 @@ export default (iconName, iconNode) => ({
     {
       props: { color, size, strokeWidth, defaultClass },
       data,
+      children = [],
     },
   ) {
     return createElement(
@@ -54,7 +55,10 @@ export default (iconName, iconNode) => ({
         },
         on: data?.on || {}
       },
-      iconNode.map(([tag, attrs]) => createElement(tag, { attrs })),
+      [
+        ...iconNode.map(([tag, attrs]) => createElement(tag, { attrs })),
+        ...children
+      ],
     );
   },
 });

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

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

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

@@ -1,56 +1,87 @@
 import { mount } from '@vue/test-utils'
+import {render, fireEvent} from '@testing-library/vue'
 import { Smile } from '../src/icons'
 
 describe('Using lucide icon components', () => {
   it('should render an component', () => {
-    const wrapper = mount(Smile)
-    expect(wrapper).toMatchSnapshot();
+    const {container} = render(Smile)
+    expect(container).toMatchSnapshot();
   });
 
   it('should adjust the size, stroke color and stroke width', () => {
-    const wrapper = mount(Smile, {
-      propsData: {
+    const {container} = render(Smile, {
+      props: {
         size: 48,
-        stroke: 'red',
+        color: 'red',
         strokeWidth: 4
       }
     })
 
-    expect(wrapper).toMatchSnapshot();
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon.getAttribute('width')).toBe('48')
+    expect(icon.getAttribute('stroke')).toBe('red')
+    expect(icon.getAttribute('stroke-width')).toBe('4')
+
+    expect(container).toMatchSnapshot();
   });
 
 
   it('should add a class to the element', () => {
-    const wrapper = mount(Smile, {
+    const {container} = render(Smile, {
       attrs: {
         class: "my-icon"
       }
     })
 
-    expect(wrapper).toMatchSnapshot();
-    expect(String(wrapper.classes())).toBe(String(['lucide-icon','lucide','lucide-smile', 'my-icon']))
+    expect(container).toMatchSnapshot();
+
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon).toHaveClass('my-icon')
   });
 
   it('should add a style attribute to the element', () => {
-    const wrapper = mount(Smile, {
+    const {container} = render(Smile, {
       attrs: {
         style: 'position: absolute',
       }
     })
 
-    expect(wrapper).toMatchSnapshot();
-    expect(wrapper.attributes('style')).toContain('position: absolute')
+    expect(container).toMatchSnapshot();
+
+    const [icon] = document.getElementsByClassName('lucide');
+
+    expect(icon).toHaveStyle({ position: 'absolute' })
   });
 
-  it('should call the onClick event', () => {
+  it('should call the onClick event', async () => {
     const onClick = jest.fn()
-    const wrapper = mount(Smile, {
+    render(Smile, {
       listeners: {
         click: onClick
       }
     })
 
-    wrapper.trigger('click')
+    const [icon] = document.getElementsByClassName('lucide');
+
+    await fireEvent.click(icon)
+
     expect(onClick).toHaveBeenCalled()
   });
+
+  it('should pass children to the icon slot', () => {
+    const testText = 'Hello World'
+    const template = `<text>${testText}</text>`
+    const { getByText, container } = render(Smile, {
+      slots: {
+        default: { template }
+      }
+    })
+
+    const textElement = getByText(testText)
+
+    expect(textElement).toBeInTheDocument()
+    expect(container).toMatchSnapshot();
+  });
 });

packages/lucide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide",
   "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.16.28",
+  "version": "0.17.3",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide/src/replaceElement.js

@@ -71,6 +71,7 @@ export default (element, { nameAttr, icons, attrs }) => {
     ...iconAttributes,
     'icon-name': iconName,
     ...attrs,
+    ...elementAttrs,
   };
 
   const classNames = combineClassNames(['lucide', `lucide-${iconName}`, elementAttrs, attrs]);

packages/lucide/tests/lucide.spec.js

@@ -64,4 +64,25 @@ describe('createIcons', () => {
 
     expect(attributesAndValues).toEqual(expect.objectContaining(attrs));
   });
+
+  it('should inherit elements attributes', () => {
+    document.body.innerHTML = `<i icon-name="sun" data-theme-switcher="light"></i>`;
+
+    const attrs = {
+      'data-theme-switcher':'light',
+    };
+
+    createIcons({ icons });
+
+    const element = document.querySelector('svg');
+    const attributes = element.getAttributeNames();
+
+    const attributesAndValues = attributes.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+
+      return acc;
+    },{})
+
+    expect(attributesAndValues).toEqual(expect.objectContaining(attrs));
+  });
 });

rollup.plugins.js

@@ -16,6 +16,10 @@ const plugins = (pkg, minify) =>
       delimiters: ['', ''],
       preventAssignment: false,
     }),
+    resolve(),
+    commonJS({
+      include: 'node_modules/**',
+    }),
     babel({
       babelHelpers: 'bundled',
     }),
@@ -26,10 +30,6 @@ const plugins = (pkg, minify) =>
       banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
     }),
     bundleSize(),
-    resolve(),
-    commonJS({
-      include: 'node_modules/**',
-    }),
     visualizer({
       sourcemap: true,
       filename: `stats/${pkg.name}${minify ? '-min' : ''}.html`,

scripts/build/generateExportsFile.js

@@ -2,7 +2,7 @@ import path from 'path';
 
 import { toPascalCase, resetFile, appendFile } from '../helpers';
 
-export default function(inputEntry, outputDirectory, iconNodes) {
+export default function(inputEntry, outputDirectory, iconNodes, iconFileExtention = '') {
   const fileName = path.basename(inputEntry);
 
   // Reset file
@@ -10,10 +10,12 @@ export default function(inputEntry, outputDirectory, iconNodes) {
 
   const icons = Object.keys(iconNodes);
 
+  const fileExtention = iconFileExtention === '.ts' || iconFileExtention === '.js' ? '' : iconFileExtention
+
   // Generate Import for Icon VNodes
   icons.forEach(iconName => {
     const componentName = toPascalCase(iconName);
-    const importString = `export { default as ${componentName} } from './${iconName}';\n`;
+    const importString = `export { default as ${componentName} } from './${iconName}${fileExtention}';\n`;
     appendFile(importString, fileName, outputDirectory);
   });
 

scripts/build/generateIconFiles.js

@@ -5,7 +5,7 @@ import prettier from 'prettier';
 import { promises } from 'stream';
 import { toPascalCase } from '../helpers';
 
-export default function({ iconNodes, outputDirectory, template, showLog = true, iconFileExtention = '.js' }) {
+export default function({ iconNodes, outputDirectory, template, showLog = true, iconFileExtention = '.js', pretty = true }) {
   const icons = Object.keys(iconNodes);
   const iconsDistDirectory = path.join(outputDirectory, `icons`);
 
@@ -21,17 +21,25 @@ export default function({ iconNodes, outputDirectory, template, showLog = true,
     children = children.map(({name, attributes}) => ([name, attributes]))
 
     const elementTemplate = template({ componentName, iconName, children });
+    const output =
+      pretty
+      ? prettier.format(elementTemplate, {
+        singleQuote: true,
+        trailingComma: 'all',
+        parser: 'babel',
+      })
+      : elementTemplate
 
-    await fs.promises.writeFile(location, prettier.format(elementTemplate, { singleQuote: true, trailingComma: 'all', parser: 'babel' }), 'utf-8');
+    await fs.promises.writeFile(location, output, 'utf-8');
   });
 
   Promise.all(writeIconFiles)
-  .then(() => {
-    if(showLog) {
-      console.log('Successfully built', icons.length, 'icons.');
-    }
-  })
-  .catch((error) => {
-    throw new Error(`Something went wrong generating icon files,\n ${error}`)
-  })
+    .then(() => {
+      if(showLog) {
+        console.log('Successfully built', icons.length, 'icons.');
+      }
+    })
+    .catch((error) => {
+      throw new Error(`Something went wrong generating icon files,\n ${error}`)
+    })
 }

scripts/buildIcons.js

@@ -23,6 +23,7 @@ const {
   silent = false,
   iconFileExtention = '.js',
   exportFileName = 'index.js',
+  pretty = true,
 } = cliArguments;
 
 const svgFiles = readSvgDirectory(ICONS_DIR);
@@ -39,6 +40,7 @@ generateIconFiles({
   template: iconFileTemplate,
   showLog: !silent,
   iconFileExtention,
+  pretty: JSON.parse(pretty),
 });
 
 // Generates entry files for the compiler filled with icons exports
@@ -46,4 +48,5 @@ generateExportsFile(
   path.join(OUTPUT_DIR, 'icons', exportFileName),
   path.join(OUTPUT_DIR, 'icons'),
   icons,
+  iconFileExtention,
 );

site/.gitignore

@@ -0,0 +1 @@
+public/docs/images

site/package.json

@@ -5,7 +5,8 @@
   "author": "John Letey",
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "copy-assets": "mkdir -p ./public/docs/images && cp -rf ../docs/images ./public/docs",
+    "build": "yarn copy-assets && next build",
     "export": "next export -o build",
     "deploy": "yarn build && yarn export",
     "lint": "eslint .",
@@ -20,6 +21,7 @@
     "@next/mdx": "^11.0.0",
     "downloadjs": "^1.4.7",
     "framer-motion": "^4",
+    "fuse.js": "^6.5.3",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "jszip": "^3.7.0",

site/src/components/CopyButton.tsx

@@ -1,16 +1,13 @@
 import { Box, ButtonProps, Button, useClipboard } from '@chakra-ui/react';
 
-const CopyButton = ({copyText, buttonText = 'copy', ...props}) => {
+const CopyButton = ({ copyText, buttonText = 'copy', ...props }) => {
   const { hasCopied, onCopy } = useClipboard(copyText);
 
   return (
-    <Button
-      onClick={onCopy}
-      {...props}
-    >
-      { hasCopied ? 'copied' : buttonText }
+    <Button onClick={onCopy} {...props}>
+      {hasCopied ? 'copied' : buttonText}
     </Button>
-  )
+  );
 };
 
 export default CopyButton;

site/src/components/DocsMenu.tsx

@@ -0,0 +1,52 @@
+import { Box, Text, Link, BoxProps } from '@chakra-ui/react';
+import docsMenuTree from '../lib/docsMenuTree';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const DocsMenu = (props: BoxProps) => {
+  const router = useRouter();
+  useEffect(() => {
+    console.log(router.asPath);
+  }, [router]);
+  const linkIsActive = (currentPath, href) => currentPath === `/docs/${href}`;
+  return (
+    <Box {...props}>
+      <Box paddingY={4}>
+        {docsMenuTree.map(({ section, items }) => (
+          <Box key={section}>
+            <Text fontSize={19} fontWeight="bold" marginBottom={2}>
+              {section}
+            </Text>
+            <Box as="ul" style={{ listStyle: 'none' }} marginBottom={6}>
+              {items.map(({ href, title }) => (
+                <Box as="li" key={title}>
+                  <NextLink href={`/docs/${href}`} passHref>
+                    <Link
+                      _hover={{ opacity: linkIsActive(router.asPath, href) ? 1 : 0.8 }}
+                      display="block"
+                      color={linkIsActive(router.asPath, href) ? 'brand.500' : 'inherit'}
+                    >
+                      <Text
+                        fontSize={16}
+                        lineHeight={1.8}
+                        opacity={linkIsActive(router.asPath, href) ? 1 : 0.5}
+                        as="p"
+                        width="100%"
+                        display="block"
+                      >
+                        {title}
+                      </Text>
+                    </Link>
+                  </NextLink>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default DocsMenu;

site/src/components/Header.tsx

@@ -70,10 +70,10 @@ const Header = ({ data }) => {
   return (
     <Flex direction="column" align="center" justify="center">
       <Heading as="h1" fontSize="4xl" mb="4" textAlign="center">
-        Simply beautiful open source icons, community-sourced
+        Beautiful &amp; consistent icon toolkit made by the community.
       </Heading>
       <Text fontSize="lg" as="p" textAlign="center" mb="1">
-        An open-source icon library, a fork of{' '}
+        Open-source project and a fork of{' '}
         <Link href="https://github.com/feathericons/feather" isExternal>
           Feather Icons
         </Link>

site/src/components/HeadingAnchored.tsx

@@ -1,6 +1,6 @@
 import { Link, Heading } from '@chakra-ui/react';
 import { useEffect } from 'react';
-import { useheadingNavigationContext } from './HeadingNavigationProvider';
+import { useHeadingNavigationContext } from './HeadingNavigationProvider';
 
 function getAnchor(text: string) {
   return text
@@ -10,7 +10,7 @@ function getAnchor(text: string) {
 }
 
 const HeadingAnchored = ({ children, as: headingLevel, ...restProps }) => {
-  const { addHeading } = useheadingNavigationContext();
+  const { addHeading } = useHeadingNavigationContext();
   const headingText = typeof children === 'string' ? children : children[0];
 
   const anchor = getAnchor(headingText);

site/src/components/HeadingNavigationProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState, useContext } from 'react';
+import { createContext, useState, useContext, useMemo, useCallback, useEffect } from 'react';
 
 interface HeadingTypes {
   anchor: string;
@@ -12,24 +12,24 @@ const HeadingNavigationContext = createContext({
   addHeading: (heading: HeadingTypes) => {},
 });
 
-function HeadingNavigationProvider({ children }) {
+export default function HeadingNavigationProvider({ children }) {
   const [headings, setHeadings] = useState([]);
 
-  const addHeading = (heading: HeadingTypes) => {
+  const addHeading = useCallback((heading: HeadingTypes) => {
     if (!['h1', 'h2', 'h3'].includes(heading.headingLevel)) return;
 
-    const currentHeadings = headings;
-    currentHeadings.push(heading);
-    setHeadings(currentHeadings);
-  };
+    setHeadings((currentHeadings) => [
+      ...currentHeadings,
+      heading
+    ]);
+  }, [headings]);
 
-  const value = { headings, addHeading };
+  const value = useMemo(() => ({ headings, addHeading }), [headings, addHeading]);
 
   return (
     <HeadingNavigationContext.Provider value={value}>{children}</HeadingNavigationContext.Provider>
   );
 }
 
-const useheadingNavigationContext = () => useContext(HeadingNavigationContext);
+export const useHeadingNavigationContext = () => useContext(HeadingNavigationContext);
 
-export { HeadingNavigationProvider, useheadingNavigationContext };

site/src/components/HeadingTreeMenu.tsx

@@ -1,12 +1,14 @@
 import { useEffect, useMemo } from 'react';
-import { useheadingNavigationContext } from './HeadingNavigationProvider';
+import { useHeadingNavigationContext } from './HeadingNavigationProvider';
 
 const HeadingTreeMenu = () => {
-  const { headings } = useheadingNavigationContext();
+  const { headings } = useHeadingNavigationContext();
   const headingElements = useMemo(
     () =>
       headings.map(heading => {
         const headingElement = document.getElementById(heading.anchor);
+        console.log(headingElement);
+
         return {
           element: headingElement,
           offsetTop: headingElement.getBoundingClientRect().top,
@@ -14,9 +16,6 @@ const HeadingTreeMenu = () => {
       }),
     [headings],
   );
-  useEffect(() => {
-    console.log(headingElements);
-  }, [headingElements]);
 
   return <div />;
 };

site/src/components/IconDetailOverlay.tsx

@@ -27,6 +27,11 @@ const IconDetailOverlay = ({ open = true, close, icon }) => {
     close();
   };
 
+  useEffect(() => {
+    console.log(icon);
+
+  }, [icon])
+
   useEffect(() => {
     if(open) {
       onOpen()

site/src/components/IconList.tsx

@@ -1,87 +1,39 @@
-import { Button, Flex, Grid, Text, useToast } from "@chakra-ui/react";
-import download from 'downloadjs';
-import Link from 'next/link'
-import copy from "copy-to-clipboard";
-import {useContext, useMemo} from "react";
-import {IconStyleContext} from "./CustomizeIconContext";
-import {IconWrapper} from "./IconWrapper";
-import { useRouter } from "next/router";
-import ModifiedTooltip from './ModifiedTooltip';
+import { Grid } from '@chakra-ui/react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { memo } from 'react';
+import { IconEntity } from '../types';
+import IconListItem from './IconListItem';
 
-const IconList = ({icons}) => {
-  const router = useRouter()
-  const toast = useToast();
-  const {color, size, strokeWidth} = useContext(IconStyleContext);
-  const { search } = router.query;
+interface IconListProps {
+  icons: IconEntity[];
+}
 
-  const query = useMemo(()=> search !== undefined ? { search } : {},[search])
+const IconList = memo(({ icons }: IconListProps) => {
+  const router = useRouter();
 
   return (
-    <Grid
-      templateColumns={`repeat(auto-fill, minmax(150px, 1fr))`}
-      gap={5}
-      marginBottom="320px"
-    >
-      { icons.map((icon) => {
-        const actualIcon = icon.item ? icon.item : icon;
-        const { name, content, contributors } = actualIcon;
-
+    <Grid templateColumns={`repeat(auto-fill, minmax(150px, 1fr))`} gap={5} marginBottom="320px">
+      {icons.map((icon) => {
         return (
           <Link
-            key={name}
+            key={icon.name}
             scroll={false}
+            shallow={true}
             href={{
               pathname: '/icon/[iconName]',
               query: {
-                ...query,
-                iconName: name,
+                ...router.query,
+                iconName: icon.name,
               },
             }}
           >
-            <Button
-              variant="ghost"
-              borderWidth="1px"
-              rounded="lg"
-              padding={16}
-              position="relative"
-              onClick={(event) => {
-                if (event.shiftKey) {
-                  copy(actualIcon.src);
-                  toast({
-                    title: "Copied!",
-                    description: `Icon "${name}" copied to clipboard.`,
-                    status: "success",
-                    duration: 1500,
-                  });
-                }
-                if (event.metaKey) {
-                  download(
-                    actualIcon.src,
-                    `${name}.svg`,
-                    "image/svg+xml"
-                  );
-                }
-              }}
-              key={name}
-              alignItems="center"
-            >
-              { contributors?.length ? ( <ModifiedTooltip/> ) : null}
-              <Flex direction="column" align="center" justify="center">
-                <IconWrapper
-                  content={content}
-                  stroke={color}
-                  strokeWidth={strokeWidth}
-                  height={size}
-                  width={size}
-                />
-                <Text marginTop={5}>{name}</Text>
-              </Flex>
-            </Button>
+            <IconListItem {...icon} />
           </Link>
         );
       })}
     </Grid>
   );
-}
+});
 
 export default IconList;

site/src/components/IconListItem.tsx

@@ -0,0 +1,61 @@
+import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
+import download from 'downloadjs';
+import copy from 'copy-to-clipboard';
+import { memo, useContext } from 'react';
+import { IconStyleContext } from './CustomizeIconContext';
+import { IconWrapper } from './IconWrapper';
+
+interface IconListItemProps {
+  name: string;
+  content: string;
+  contributors: any[];
+  src: string;
+  onClick?: ButtonProps['onClick'];
+}
+
+const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
+  const toast = useToast();
+  const { color, size, strokeWidth } = useContext(IconStyleContext);
+
+  return (
+    <Button
+      variant="ghost"
+      borderWidth="1px"
+      rounded="lg"
+      padding={16}
+      position="relative"
+      onClick={event => {
+        if (event.shiftKey) {
+          copy(src);
+          toast({
+            title: 'Copied!',
+            description: `Icon "${name}" copied to clipboard.`,
+            status: 'success',
+            duration: 1500,
+          });
+        }
+        if (event.altKey) {
+          download(src, `${name}.\svg`, 'image/svg+xml');
+        }
+        if (onClick) {
+          onClick(event);
+        }
+      }}
+      key={name}
+      alignItems="center"
+    >
+      <Flex direction="column" align="center" justify="center">
+        <IconWrapper
+          content={content}
+          stroke={color}
+          strokeWidth={strokeWidth}
+          height={size}
+          width={size}
+        />
+        <Text marginTop={5}>{name}</Text>
+      </Flex>
+    </Button>
+  );
+};
+
+export default memo(IconListItem);

site/src/components/IconOverview.tsx

@@ -1,114 +1,32 @@
-import {
-  Box,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Text,
-  useColorMode,
-  Icon,
-} from '@chakra-ui/react';
-import IconList from './IconList';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import React, { useState } from 'react';
 import useSearch from '../lib/useSearch';
-import { useRouter } from 'next/router';
-import theme from '../lib/theme';
-import { Search as SearchIcon } from 'lucide-react';
-import debounce from 'lodash/debounce';
+import { IconEntity } from '../types';
+import IconList from './IconList';
+import { SearchInput } from './SearchInput';
 
-const isFilledString = (string) => string !== undefined && string !== null && string !== '';
+interface IconOverviewProps {
+  data: IconEntity[];
+}
 
-const IconOverview = ({ data }) => {
-  const router = useRouter();
-  const { search } = router.query;
+const IconOverview = ({ data }: IconOverviewProps) => {
+  const [query, setQuery] = useState('');
 
-  const [queryText, setQueryText] = useState(search);
-  const { colorMode } = useColorMode();
-
-  const inputElement = useRef(null);
-
-  function handleKeyDown(event) {
-    if (event.key === '/' && inputElement.current !== document.activeElement) {
-      event.preventDefault();
-      inputElement.current.focus();
-    }
-  }
-
-  const setQueryParam = (searchString) => {
-    const { query, asPath } = router;
-    if(isFilledString(searchString)) {
-      let route = {
-        pathname: '',
-        query
-      }
-
-      if(query.iconName) {
-        route.query.iconName = query.iconName;
-        route.pathname = '/icon/[iconName]';
-      }
-
-      route.query.search = searchString;
-
-      router.replace(route);
-    }
-    else {
-      if (query?.search) {
-        delete query.search;
-        router.replace({
-          query
-        })
-      }
-    }
-  }
-
-  // @ts-ignore
-  const searchResults = useMemo(() => useSearch(data, queryText), [data, queryText])
-
-  const handleSearchInput = debounce((event) => {
-    event.persist();
-    const { value = '' } = inputElement?.current;
-
-    setQueryText(value)
-    setQueryParam(value)
-  }, 400)
-
-  useEffect(() => {
-    setQueryText(search)
-  }, [search]);
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
+  const searchResults = useSearch(query, data, [
+    { name: 'name', weight: 2 },
+    { name: 'tags', weight: 1 },
+  ]);
 
   return (
     <>
-      <InputGroup position="sticky" top={4} zIndex={1}>
-        <InputLeftElement
-          children={
-            <Icon>
-              <SearchIcon />
-            </Icon>
-          }
-        />
-        <Input
-          ref={inputElement}
-          placeholder={`Search ${Object.keys(data).length} icons (Press "/" to focus)`}
-          onChange={handleSearchInput}
-          defaultValue={queryText}
-          bg={colorMode == 'light' ? theme.colors.white : theme.colors.gray[700]}
-        />
-      </InputGroup>
+      <SearchInput onChange={setQuery} count={data.length} />
+
       <Box marginTop={5}>
         {searchResults.length > 0 ? (
           <IconList icons={searchResults} />
         ) : (
-          <Text
-            fontSize="2xl"
-            fontWeight="bold"
-            textAlign="center"
-            style={{ wordBreak: 'break-word' }}
-          >
-            No results found for "{queryText}"
+          <Text fontSize="2xl" fontWeight="bold" textAlign="center" wordBreak="break-word">
+            No results found for "{query}"
           </Text>
         )}
       </Box>

site/src/components/Layout.tsx

@@ -7,6 +7,7 @@ import {
   useColorModeValue,
   IconButton,
   useBreakpointValue,
+  BoxProps,
 } from '@chakra-ui/react';
 import { useKeyBindings } from '../lib/key';
 import { useRouter } from 'next/router';
@@ -15,7 +16,11 @@ import { Moon, Sun, Menu, X } from 'lucide-react';
 import { useMobileNavigationContext, useMobileNavigationValue } from './MobileNavigationProvider';
 import Logo from './Logo';
 
-const Layout = ({ children }) => {
+interface LayoutProps extends BoxProps {
+  aside?: BoxProps['children'];
+}
+
+const Layout = ({ aside, children }: LayoutProps) => {
   const router = useRouter();
   const { toggleMobileMenu } = useMobileNavigationContext();
   const { toggleColorMode } = useColorMode();
@@ -32,12 +37,12 @@ const Layout = ({ children }) => {
   };
 
   function setQuery(query) {
-    router
-      .push({
+    router.push({
         pathname: '/',
         query: { query: query },
-      })
-      .then();
+    },
+    undefined,
+    { shallow: true })
   }
 
   useKeyBindings({
@@ -57,7 +62,6 @@ const Layout = ({ children }) => {
           justifyContent="space-between"
           pt={4}
           pb={4}
-          maxW="1250px"
           margin="0 auto"
           w="full"
           px={5}
@@ -68,16 +72,21 @@ const Layout = ({ children }) => {
           <Flex justifyContent="center" alignItems="center">
             {showBaseNavigation ? (
               <>
-                {/* <NextLink href="/docs" passHref>
+                <NextLink href="/docs" passHref>
                   <Link marginRight={12} fontSize="xl">
                     Documentation
                   </Link>
-                </NextLink> */}
+                </NextLink>
                 <NextLink href="/packages" passHref>
                   <Link marginRight={12} fontSize="xl">
                     Packages
                   </Link>
                 </NextLink>
+                <NextLink href="/license" passHref>
+                  <Link marginRight={12} fontSize="xl">
+                    License
+                  </Link>
+                </NextLink>
                 <Link
                   href="https://github.com/lucide-icons/lucide"
                   isExternal
@@ -105,15 +114,18 @@ const Layout = ({ children }) => {
           </Flex>
         </Flex>
       </Flex>
-      <Flex margin="0 auto" direction="column" maxW="1250px" px={5}>
-        {children}
-        <Divider mb={6} mt={12} />
-        <p style={{ alignSelf: 'center' }}>
-          <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
-            <img src="/vercel.svg" alt="Powered by Vercel" width="200" />
-          </a>
-        </p>
-        <br />
+      <Flex>
+        {aside ? <Box as="aside" marginRight={{ base: 0, lg: -240, }}>{aside}</Box> : null}
+        <Flex margin="0 auto" direction="column" maxW="1250px" px={5} width="100%">
+          {children}
+          <Divider mb={6} mt={12} />
+          <p style={{ alignSelf: 'center' }}>
+            <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
+              <img src="/vercel.svg" alt="Powered by Vercel" width="200" />
+            </a>
+          </p>
+          <br />
+        </Flex>
       </Flex>
     </Box>
   );

site/src/components/MobileMenu.tsx

@@ -11,12 +11,11 @@ import {
 } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-import HeadingTreeMenu from './HeadingTreeMenu';
+import { ReactNode, useEffect } from 'react';
 import Logo from './Logo';
 import { useMobileNavigationContext } from './MobileNavigationProvider';
 
-const MobileMenu = () => {
+const MobileMenu = ({ children }: { children?: ReactNode }): JSX.Element => {
   const { isOpen, onClose } = useMobileNavigationContext();
   const router = useRouter();
 
@@ -27,7 +26,7 @@ const MobileMenu = () => {
   }, [router.route]);
 
   return (
-    <Drawer placement="left" onClose={onClose} isOpen={isOpen} size="md">
+    <Drawer placement="left" onClose={onClose} isOpen={isOpen} size="sm">
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton marginTop={3.5} marginRight={3} />
@@ -36,29 +35,34 @@ const MobileMenu = () => {
         </DrawerHeader>
         <DrawerBody>
           <Box mb={4}>
-            {/* <NextLink href="/docs" passHref>
-              <Link fontSize="xl" fontWeight="bold">
+            <NextLink href="/docs" passHref>
+              <Link fontSize="lg" fontWeight="bold" display="block" mb={2}>
                 Documentation
               </Link>
-            </NextLink> */}
-          <NextLink href="/packages" passHref>
-            <Link marginRight={12} fontSize="xl">
-              Packages
-            </Link>
-          </NextLink>
-          </Box>
-          <Box mb={4}>
+            </NextLink>
+            <NextLink href="/packages" passHref>
+              <Link marginRight={12} fontSize="lg" fontWeight="bold" display="block" mb={2}>
+                Packages
+              </Link>
+            </NextLink>
+            <NextLink href="/license" passHref>
+              <Link marginRight={12} fontSize="xl">
+                License
+              </Link>
+            </NextLink>
             <Link
               href="https://github.com/lucide-icons/lucide"
               isExternal
-              fontSize="xl"
+              fontSize="lg"
               fontWeight="bold"
+              display="block"
+              mb={2}
             >
               Github
             </Link>
           </Box>
-          <Divider />
-          <HeadingTreeMenu />
+          <Divider mt={2} />
+          {children}
         </DrawerBody>
       </DrawerContent>
     </Drawer>

site/src/components/MobileNavigationProvider.tsx

@@ -1,23 +1,27 @@
 import { useDisclosure } from '@chakra-ui/react';
-import { createContext, useState, useContext, useMemo, useCallback, useEffect } from 'react'
+import { createContext, useState, useContext, useMemo, useCallback, useEffect } from 'react';
 
 const MobileNavigationContext = createContext({
   isOpen: false,
   onOpen: () => {},
   onClose: () => {},
-  toggleMobileMenu: () => {}
-})
+  toggleMobileMenu: () => {},
+});
 
 export function MobileNavigationProvider({ children }) {
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const toggleMobileMenu = () => isOpen ? onClose() : onOpen()
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const toggleMobileMenu = () => (isOpen ? onClose() : onOpen());
 
-  return <MobileNavigationContext.Provider value={{ isOpen, onOpen, onClose, toggleMobileMenu }}>{children}</MobileNavigationContext.Provider>
+  return (
+    <MobileNavigationContext.Provider value={{ isOpen, onOpen, onClose, toggleMobileMenu }}>
+      {children}
+    </MobileNavigationContext.Provider>
+  );
 }
 
 export const useMobileNavigationContext = () => useContext(MobileNavigationContext);
 
 export const useMobileNavigationValue = (intialValue, activeValue) => {
   const { isOpen } = useMobileNavigationContext();
-  return useMemo(() => isOpen ? activeValue : intialValue, [ isOpen ]);
-}
+  return useMemo(() => (isOpen ? activeValue : intialValue), [isOpen]);
+};

site/src/components/Package.tsx

@@ -7,11 +7,11 @@ import {
   useColorMode,
   Divider,
   ButtonGroup,
-  Stack
+  Stack,
 } from '@chakra-ui/react';
-import Image from 'next/image'
+import Image from 'next/image';
 import { Code, FileText } from 'lucide-react';
-import Link from 'next/link'
+import Link from 'next/link';
 import { MDXRemote } from 'next-mdx-remote';
 import mdxComponents from '../lib/mdxComponents';
 
@@ -31,27 +31,27 @@ const Package = ({ name, description, image, shields, source, documentation }) =
     >
       <Flex
         justifyContent={{
-          base: "center",
-          md: "flex-start"
+          base: 'center',
+          md: 'flex-start',
         }}
         flexDirection={{
-          base: "column",
-          md: "row"
+          base: 'column',
+          md: 'row',
         }}
       >
         <Flex
           marginRight={{
             base: 0,
-            md: 8
+            md: 8,
           }}
           marginBottom={{
             base: 4,
-            md: 0
+            md: 0,
           }}
           flex={3}
           align="center"
         >
-          <Box marginX='auto'>
+          <Box marginX="auto">
             <Image width={278} height={120} src={image} />
           </Box>
         </Flex>
@@ -59,31 +59,30 @@ const Package = ({ name, description, image, shields, source, documentation }) =
           flex={5}
           marginRight={4}
           textAlign={{
-            base: "center",
-            md: "left"
+            base: 'center',
+            md: 'left',
           }}
         >
-          <Heading as="h2" fontSize='3xl' mb={2}>
+          <Heading as="h2" fontSize="3xl" mb={2}>
             {name}
           </Heading>
-          <Text mb={3}>{ description }</Text>
+          <Text mb={3}>{description}</Text>
           <ButtonGroup spacing={2}>
             {shields.map(({ alt, src, href }, index) => (
               <Link href={href} passHref>
                 <a target="_blank">
-                  <img {...{alt, src}} key={ index } />
+                  <img {...{ alt, src }} key={index} />
                 </a>
               </Link>
-
             ))}
           </ButtonGroup>
         </Box>
         <Flex
           placeItems="center"
-          align='center'
+          align="center"
           marginTop={{
             base: 4,
-            md: 0
+            md: 0,
           }}
         >
           <ButtonGroup
@@ -91,36 +90,24 @@ const Package = ({ name, description, image, shields, source, documentation }) =
             // spacing={8}
             // align='center'
             flexDirection={{
-              base: "column",
-              lg: "initial"
+              base: 'column',
+              lg: 'initial',
             }}
-            margin='auto'
+            margin="auto"
             justifyContent={{
-              base: "center",
-              sm: "flex-start"
+              base: 'center',
+              sm: 'flex-start',
             }}
           >
-            <Link passHref href={documentation} >
-              <Button
-                as='a'
-                variant="solid"
-                textDecoration="none"
-                leftIcon={<FileText />}
-                my={2}
-              >
+            <Link passHref href={documentation}>
+              <Button as="a" variant="solid" textDecoration="none" leftIcon={<FileText />} my={2}>
                 Documentation
               </Button>
             </Link>
-            <Link passHref href={source} >
-            <Button
-              as="a"
-              variant="solid"
-              textDecoration="none"
-              leftIcon={<Code />}
-              my={2}
-            >
-              Source
-            </Button>
+            <Link passHref href={source}>
+              <Button as="a" variant="solid" textDecoration="none" leftIcon={<Code />} my={2}>
+                Source
+              </Button>
             </Link>
           </ButtonGroup>
         </Flex>