Add verified icon (#416)

* Add verified icon

* Add verified tag

* Fix verified icon

.github/workflows/release.yml

@@ -39,7 +39,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -74,7 +74,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -109,7 +109,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -144,7 +144,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -179,7 +179,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn --pure-lockfile
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -214,7 +214,7 @@ jobs:
           cache: 'yarn'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -248,9 +248,6 @@ jobs:
           node-version: '14'
           cache: 'yarn'
 
-      - name: Update repos
-        run: sudo apt-get update
-
       - name: Install FontForge
         run: sudo apt-get install zlib1g-dev fontforge
 
@@ -276,10 +273,7 @@ jobs:
         run: sudo gem install fontcustom
 
       - name: Install
-        run: yarn
+        run: yarn --prefer-offline
-
-      - name: "Outline SVG"
-        run: yarn build:outline-icons
 
       - name: Build Icon Font
         run: |
@@ -288,12 +282,12 @@ jobs:
             command=''
             for name in "${list[@]}"
             do
+              subcommand="(yarn build:outline-icons --outputDir=converted_icons${name} && fontcustom compile "./converted_icons${name}" -h -n "lucide${name}" -o ./build -F)"
               if [ -z "$command" ]
-                subcommand="(fontcustom compile "./converted_icons${name}" -h -n "lucide${name}" -o ./tmp -F && mv ./tmp/* build)"
+              then
-                then
+                command="$subcommand";
-                  command="$subcommand";
+              else
-                else
+                command="$command & $subcommand";
-                  command="$command & $subcommand";
               fi
             done
 
@@ -346,8 +340,7 @@ jobs:
         run: mv lucide-font/lucide.ttf packages/lucide-flutter/assets/Lucide.ttf
 
       - name: Generate exports file
-        run: dart tool/generate_fonts.dart lucide-font/lucide-preview.html
+        run: dart packages/lucide-flutter/tool/generate_fonts.dart lucide-font/lucide-preview.html
-        working-directory: packages/lucide-flutter
 
       - name: Update yaml
         run: sed -E 's/(version:)[^\n]*/\1 ${{ needs.pre-build.outputs.VERSION }}/;' pubspec.yaml > pubspec && mv pubspec pubspec.yaml
@@ -401,7 +394,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
         with:
-          tag_name: v${{ steps.new-version.outputs.VERSION }}
+          tag_name: v${{ needs.pre-build.outputs.VERSION }}
           files: |
             lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip
             lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip

docs/ICON_DESIGN_GUIDE.md

@@ -5,7 +5,7 @@ Here are rules that should be followed to keep quality and consistency when maki
 ## Summary of the rules we have
 
 1. Icons must be designed on a **24 by 24 pixels** canvas.
-2. Icons must have a **1 pixel padding** within the canvas.
+2. Icons must have at least **1 pixel padding** within the canvas.
 3. Icons must have a **stroke width of 2 pixels**.
 4. Icons must use **round joins**.
 5. Icons must use **round caps**.
@@ -19,7 +19,7 @@ Here are rules that should be followed to keep quality and consistency when maki
 
 ![24px-24px](images/24px-24px.png?raw=true "24px-24px")
 
-### 2. Icons must have a 1 pixel padding within the canvas.
+### 2. Icons must have at least 1 pixel padding within the canvas.
 
 ![1px-padding](images/1px-padding.png?raw=true "1px-padding")
 

docs/INKSCAPE_GUIDE.md

@@ -16,14 +16,14 @@ When opening a new document, Inkscape will create a canvas of a default size.  T
 ![Setting Grid Properties](images/grid-2.png?raw=true "Setting Grid Properties")
 5. Close the Document Properties dialog.
 6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
-   
+
 ## Setting up The Paths
 
 1. Create a path or shape.
 2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
 ![Stroke Style Properties](images/strokes.png?raw=true "Setting Grid Properties")
 3. On the “Stroke Style” tab:
-   * Set Stroke Width to `2px`. 
+   * Set Stroke Width to `2px`.
    * Select the rounded join type.
    * Select the rounded cap type.
 4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
@@ -34,4 +34,4 @@ When opening a new document, Inkscape will create a canvas of a default size.  T
 1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
 ![Save As](images/save-as.png?raw=true "Save as")
 2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
-![Optimize](images/optimize-settings.png?raw=true "Optimize")
+![Optimize](images/optimize-settings.png?raw=true "Optimize")

docs/index.md

@@ -0,0 +1,116 @@
+---
+title: Introduction
+---
+
+# Introduction
+
+## What is Lucide?
+
+Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+
+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.
+
+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!
+
+### Why choose Lucide over Feather Icons
+
+- 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.
+
+## 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")
+

docs/installation.md

@@ -0,0 +1,13 @@
+---
+title: Installation
+---
+
+# Installation
+
+Hello
+
+> hello
+
+```js
+console.log('asdadfasdf')
+```

docs/packages/lucide-angular.md

@@ -0,0 +1,164 @@
+# Lucide Angular
+
+Implementation of the lucide icon library for angular applications.
+
+## Installation
+
+``` sh
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+## How to use
+
+There are three ways for use this library.
+
+### Method 1: createElement
+
+After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
+
+``` html
+<!-- app.component.html -->
+<div id="lucide-icon"></div>
+```
+
+``` js
+// app.component.ts
+
+import { Component, OnInit } from '@angular/core';
+import { createElement } from 'lucide-angular';
+import { Activity } from 'lucide-angular/icons';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent implements OnInit {
+  ngOnInit(): void {
+    const div = document.getElementById('lucide-icon');
+    const elm = createElement(Activity);
+    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
+
+    if (div) {
+      div.appendChild(elm);
+    }
+  }
+}
+```
+
+### Method 2: User __Tag__ with __name__ property
+
+After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+
+``` js
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule { }
+```
+
+``` html
+<!-- app.component.html -->
+<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
+<lucide-icon name="edit" class="myicon"></lucide-icon>
+```
+
+### Method 3: User __Tag__ with __img__ property
+
+After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+
+``` js
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { LucideAngularModule } from 'lucide-angular';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    LucideAngularModule.pick({ })
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule { }
+```
+
+``` xml
+<!-- app.component.html -->
+<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
+<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
+```
+
+``` js
+// app.component.ts
+import { Component } from '@angular/core';
+import { Airplay, Circle } from 'lucide-angular';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent {
+  ico1 = Airplay;
+  ico2 = Circle;
+}
+```
+
+## Notes
+
+### Import all icons
+
+In `Method 2`: import all icons in `app.module.ts` by:
+
+``` js
+
+import { icons } from 'lucide-angular/icons';
+
+LucideAngularModule.pick(icons)
+
+...
+```
+
+### Tags
+
+You can use the following tags instead of `lucide-icon`:
+
+- lucide-angular
+- i-lucide
+- span-lucide
+
+All of the above are the same

docs/packages/lucide-flutter.md

@@ -0,0 +1,8 @@
+# lucide_icons
+
+Lucide Icons ([lucide.dev](https://lucide.dev)) for Flutter. Visit the website for the full list of icons
+
+## Example
+```dart
+Icon(LucideIcons.activity);
+```

docs/packages/lucide-preact.md

@@ -0,0 +1,79 @@
+---
+title: Lucide Preact
+---
+
+# Lucide Preact
+
+Implementation of the lucide icon library for preact applications.
+
+## Installation
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a preact component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-preact';
+// Returns PreactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+
+### Custom props / svg attributes
+
+You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red" stroke-linejoin="bevel"/>
+};
+```
+
+> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-preact';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```

docs/packages/lucide-react.md

@@ -0,0 +1,73 @@
+# Lucide React
+
+Implementation of the lucide icon library for react applications
+
+## Installation
+
+```sh
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a react component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-react';
+// Returns ReactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red"/>
+};
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-react';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```

docs/packages/lucide-vue-next.md

@@ -0,0 +1,105 @@
+# Lucide Vue Next
+
+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)
+
+## Installation
+
+```sh
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` vue
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from 'lucide-vue-next';
+
+export default {
+  name: "My Component",
+  components: { Camera }
+}
+
+</script>
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *String* | lucide-icon
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from "lucide-vue-next";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    },
+  },
+};
+</script>
+```
+
+##### Then you can use it like this
+
+``` vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

docs/packages/lucide-vue.md

@@ -0,0 +1,105 @@
+# Lucide Vue
+
+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)
+
+## Installation
+
+```sh
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` vue
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from 'lucide-vue';
+
+export default {
+  name: "My Component",
+  components: { Camera }
+}
+
+</script>
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *String* | lucide-icon
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from "lucide-vue";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    },
+  },
+};
+</script>
+```
+
+##### Then you can use it like this
+
+``` vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

docs/packages/lucide.md

@@ -0,0 +1,120 @@
+# Lucide
+
+Implementation of the lucide icon library for web applications.
+
+## Installation
+
+### Package Managers
+
+``` bash
+npm install lucide
+#or
+yarn add lucide
+```
+
+### CDN
+
+``` html
+<!-- Development version -->
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+
+<!-- Production version -->
+<script src="https://unpkg.com/lucide@latest"></script>
+```
+
+## Usage
+
+### With unpkg
+
+Here is a complete example with unpkg
+
+```html
+<!DOCTYPE html>
+<body>
+  <i icon-name="volume-2" class="my-class"></i>
+  <i icon-name="x"></i>
+  <i icon-name="menu"></i>
+
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    lucide.createIcons();
+  </script>
+</body>
+```
+
+### With ESModules
+
+To reduce bundle size, lucide is built to be fully treeshakable.
+The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
+
+```html
+<!-- Your HTML file -->
+<i icon-name="menu"></i>
+```
+
+```js
+import { createIcons, icons } from 'lucide';
+
+// Caution, this will import all the icons and bundle them.
+createIcons({icons});
+
+// Recommended way, to include only the icons you need.
+import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
+
+createIcons({
+  icons: {
+    Menu,
+    ArrowRight,
+    Globe,
+  },
+});
+```
+
+#### Additional Options
+
+In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
+
+Here is a full example:
+
+```js
+import { createIcons } from 'lucide';
+
+createIcons({
+  attrs: {
+    class: ['my-custom-class', 'icon'],
+    'stroke-width': 1,
+    stroke: '#333',
+  },
+  nameAttr: 'icon-name', // attribute for the icon name.
+});
+```
+
+#### Treeshake the library, only use the icons you use
+
+```js
+import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
+
+createIcons({
+  icons: {
+    Menu,
+    ArrowRight,
+    Globe,
+  },
+});
+```
+
+#### Custom Element binding
+
+```js
+import { createElement, Menu } from 'lucide';
+
+const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
+
+// set custom attributes with browser native functions
+menuIcon.setAttribute('stroke', '#333');
+menuIcon.classList.add('my-icon-class');
+
+// Append HTMLElement in webpage
+const myApp = document.getElementById('app');
+myApp.appendChild(menuIcon);
+```

icons/alarm-clock-off.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19.94 14A8 8 0 0 0 10 5.25m8.13 12.89A8 8 0 1 1 6.87 6.86" />
+  <path d="m22 6-3-3" />
+  <path d="m6 19-2 2" />
+  <path d="m2 2 20 20" />
+  <path d="M4 4 2 6" />
+</svg>

icons/archive.svg

@@ -1,13 +1,13 @@
 <svg
- xmlns="http://www.w3.org/2000/svg"
+  xmlns="http://www.w3.org/2000/svg"
- width="24"
+  width="24"
- height="24"
+  height="24"
- viewBox="0 0 24 24"
+  viewBox="0 0 24 24"
- fill="none"
+  fill="none"
- stroke="currentColor"
+  stroke="currentColor"
- stroke-width="2"
+  stroke-width="2"
- stroke-linecap="round"
+  stroke-linecap="round"
- stroke-linejoin="round"
+  stroke-linejoin="round"
 >
-  <path d="M20 9v9a2 2 0 01-2 2H6a2 2 0 01-2-2V9M20 4H4a2 2 0 00-2 2v1a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zM10 13h4"/>
+  <path d="M20 9v9a2 2 0 01-2 2H6a2 2 0 01-2-2V9m16-5H4a2 2 0 00-2 2v1a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm-10 9h4" />
-</svg>
+</svg>

icons/bookmark-minus.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
+  <line x1="15" x2="9" y1="10" y2="10" />
+</svg>

icons/bookmark-plus.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
+  <line x1="12" x2="12" y1="7" y2="13" />
+  <line x1="15" x2="9" y1="10" y2="10" />
+</svg>

icons/bookmark.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" />
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
 </svg>

icons/flag-triangle-left.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 22 17 2 7 7 17 12" />
+  <path d="M17 22V2L7 7l10 5" />
 </svg>

icons/flag-triangle-right.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 22 7 2 17 7 7 12" />
+  <path d="M7 22V2l10 5-10 5" />
 </svg>

icons/graduation-cap.svg

@@ -2,6 +2,7 @@
   xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
+  viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
   stroke-width="2"

icons/import.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

icons/list-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="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M21 12h-6" />
+</svg>

icons/list-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="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9V15" />
+  <path d="M21 12H15" />
+</svg>

icons/list-x.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="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M19 10l-4 4" />
+  <path d="M15 10l4 4" />
+</svg>

icons/mountain-snow.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M8 3L12 11L17 6L22 21H2L8 3Z" />
+  <path d="M8 3l4 8 5-5 5 15H2L8 3z" />
   <path d="M4.14 15.08c2.62-1.57 5.24-1.43 7.86.42 2.74 1.94 5.49 2 8.23.19" />
 </svg>

icons/mountain.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M8 3L12 11L17 6L22 21H2L8 3Z" />
+  <path d="M8 3l4 8 5-5 5 15H2L8 3z" />
 </svg>

icons/sort-asc.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h10" />
+  <path d="M11 5h4" />
   <path d="M11 9h7" />
-  <path d="M11 13h4" />
+  <path d="M11 13h10" />
   <path d="M3 17l3 3 3-3" />
   <path d="M6 18V4" />
 </svg>

icons/sort-desc.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h4" />
+  <path d="M11 5h10" />
   <path d="M11 9h7" />
-  <path d="M11 13h10" />
+  <path d="M11 13h4" />
   <path d="M3 17l3 3 3-3" />
   <path d="M6 18V4" />
 </svg>

icons/timer-reset.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M10 2h4" />
-  <path d="M12 14v-4"/>
+  <path d="M12 14v-4" />
   <path d="M4 13a8 8 0 018-7 8 8 0 11-5.3 14L4 17.6" />
   <path d="M9 17H4v5" />
 </svg>

icons/verified.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3a3.6 3.6 0 00-3.05 1.68 3.6 3.6 0 00-.9-.1 3.6 3.6 0 00-2.42 1.06 3.6 3.6 0 00-.94 3.32A3.6 3.6 0 003 12a3.6 3.6 0 001.69 3.05 3.6 3.6 0 00.95 3.32 3.6 3.6 0 003.35.96A3.6 3.6 0 0012 21a3.6 3.6 0 003.04-1.67 3.6 3.6 0 004.3-4.3A3.6 3.6 0 0021 12a3.6 3.6 0 00-1.67-3.04v0a3.6 3.6 0 00-4.3-4.3A3.6 3.6 0 0012 3z" />
+  <path d="M15 10l-4 4" />
+  <path d="M9 12l2 2" />
+</svg>

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
-  "description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for Angular applications",
-  "version": "0.16.0",
+  "version": "0.16.7",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",

packages/lucide-flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: lucide_icons
-description: Lucide icon pack for Flutter
+description: A Lucide icon library package for Flutter applications.
-version: 0.16.0
+version: 0.16.7
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
 

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
-  "description": "Lucide Preact package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for Preact applications",
-  "version": "0.16.0",
+  "version": "0.16.7",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
-  "description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for React applications",
-  "version": "0.16.0",
+  "version": "0.16.7",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-vue-next/package.json

@@ -1,8 +1,8 @@
 {
   "name": "lucide-vue-next",
-  "version": "0.16.0",
+  "version": "0.16.7",
   "author": "Eric Fennis",
-  "description": "Lucide Vue 3 Package",
+  "description": "A Lucide icon library package for Vue 3 applications",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-vue/package.json

@@ -1,8 +1,8 @@
 {
   "name": "lucide-vue",
-  "version": "0.16.1",
+  "version": "0.16.7",
   "author": "Eric Fennis",
-  "description": "Lucide Vue Package",
+  "description": "A Lucide icon library package for Vue 2 applications",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide",
-  "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "description": "A Lucide icon library package for web and javascript applications.",
-  "version": "0.16.0",
+  "version": "0.16.7",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

scripts/outlineSvg.js

@@ -1,9 +1,13 @@
 import { promises as fs } from 'fs';
 import outlineStroke from 'svg-outline-stroke';
 import { parse, stringify } from 'svgson'; // eslint-disable-line import/no-extraneous-dependencies
+import getArgumentOptions from 'minimist';
 
 const inputDir = `./icons/`;
-const outputDirs = {
+const cliArguments = getArgumentOptions(process.argv.slice(2));
+const { outputDir } = cliArguments;
+
+const widthMap = {
   'converted_icons-200': '1',
   'converted_icons-300': '1.5',
   converted_icons: '2',
@@ -39,8 +43,7 @@ function transformBackwards(node) {
 async function init() {
   console.time('icon outliner');
   try {
-    const createDirectories = Object.keys(outputDirs).map(directory => fs.mkdir(`./${directory}`));
+    await fs.mkdir(`./${outputDir}`);
-    await Promise.all(createDirectories);
 
     const icons = await fs.readdir(inputDir);
     const parsedIconNodes = await Promise.all(
@@ -53,19 +56,19 @@ async function init() {
       }),
     );
 
-    await Promise.all(
+    if (widthMap?.[outputDir] === undefined) {
-      Object.entries(outputDirs).map(async ([directory, width]) => {
+      throw new Error(`Could not find the directory: ${outputDir}.`)
-        await Promise.all(
+    }
-          parsedIconNodes.map(async ([file, iconNode]) => {
-            iconNode.attributes['stroke-width'] = width;
-            const outlined = await outlineStroke(stringify(iconNode));
-            const outlinedWithoutAttrs = await parse(outlined, {
-              transformNode: transformBackwards,
-            });
 
-            await fs.writeFile(`./${directory}/${file}`, stringify(outlinedWithoutAttrs));
+    await Promise.all(
-          }),
+      parsedIconNodes.map(async ([file, iconNode]) => {
-        );
+        iconNode.attributes['stroke-width'] = widthMap[outputDir];
+        const outlined = await outlineStroke(stringify(iconNode));
+        const outlinedWithoutAttrs = await parse(outlined, {
+          transformNode: transformBackwards,
+        });
+
+        await fs.writeFile(`./${outputDir}/${file}`, stringify(outlinedWithoutAttrs));
       }),
     );
 

site/next.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   webpack: (config, options) => {
     config.module.rules.push({
-      test: /\.svg/,
+      test: /\.svg$/,
       use: [
         {
           loader: 'babel-loader',

site/package.json

@@ -15,12 +15,19 @@
     "@chakra-ui/react": "^1.6.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/react": "^1.6.22",
+    "@next/mdx": "^11.0.0",
     "downloadjs": "^1.4.7",
     "framer-motion": "^4",
+    "gray-matter": "^4.0.3",
+    "js-yaml": "^4.1.0",
     "jszip": "^3.7.0",
     "lodash": "^4.17.20",
     "lucide-react": "0.14.0",
     "next": "^11.1.1",
+    "next-mdx-remote": "^3.0.2",
+    "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.1",

site/public/framework-logos/angular.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="33" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 0 0 3.57l1.53 13.22 8.47 4.7 8.47-4.7L20 3.57 10 0Z" fill="#DD0031"/>
+  <path d="M10 0v21.48l8.47-4.7L20 3.58 10 0Z" fill="#C3002F"/>
+  <path d="M10 2.37 3.75 16.4h2.33l1.26-3.14h5.3l1.26 3.14h2.33L10 2.37Zm1.83 8.95H8.17L10 6.92l1.83 4.4Z" fill="#fff"/>
+</svg>

site/public/framework-logos/flutter.svg

@@ -0,0 +1,6 @@
+<svg width="26.25" height="30" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.15 9.23H10l-5.38 5.39 3.07 3.07 8.46-8.46Z" fill="#54C5F8"/>
+  <path d="M3.08 13.08 0 10 10 0h6.15L3.08 13.08Z" fill="#54C5F8"/>
+  <path d="M7.7 17.7 10 20h6.15l-5.38-5.38-3.08 3.07Z" fill="#01579B"/>
+  <path d="m7.7 11.54-3.08 3.08 3.07 3.07 3.08-3.07-3.08-3.08Z" fill="#29B6F6"/>
+</svg>

site/public/framework-logos/js.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 0h20v20H0V0Z" fill="#F7DF1E"/>
+  <path d="M13.43 15.62c.41.67.92 1.14 1.87 1.14.76 0 1.27-.38 1.27-.92 0-.63-.5-.89-1.36-1.24l-.48-.22c-1.37-.57-2.25-1.3-2.25-2.82 0-1.4 1.08-2.48 2.73-2.48 1.2 0 2.06.41 2.7 1.5l-1.47.94c-.34-.57-.7-.79-1.23-.79-.54 0-.9.35-.9.8 0 .57.36.79 1.18 1.14l.45.19c1.62.7 2.5 1.4 2.5 2.95 0 1.68-1.33 2.63-3.1 2.63-1.75 0-2.9-.85-3.44-1.93l1.53-.9Zm-6.64.16c.29.54.58.98 1.21.98s1.02-.25 1.02-1.17V9.17h1.87v6.42c0 1.97-1.14 2.85-2.8 2.85a2.9 2.9 0 0 1-2.82-1.74l1.52-.92Z" fill="#000"/>
+</svg>

site/public/framework-logos/preact.svg

@@ -0,0 +1,6 @@
+<svg width="30" height="36" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m10 0 10 5.77v11.55l-10 5.77-10-5.77V5.77L10 0Z" fill="#673AB8"/>
+  <path d="M2.72 17.22c1.33 1.7 5.56.41 9.55-2.7 3.99-3.12 6.27-6.9 4.94-8.61-1.33-1.7-5.56-.4-9.55 2.71-3.99 3.12-6.27 6.9-4.94 8.6Zm.57-.44c-.44-.56-.25-1.67.6-3.07A17.8 17.8 0 0 1 8.1 9.2a17.8 17.8 0 0 1 5.41-3c1.56-.48 2.68-.4 3.12.16.44.57.25 1.68-.6 3.07a17.8 17.8 0 0 1-4.22 4.53 17.8 17.8 0 0 1-5.4 3c-1.57.48-2.69.4-3.13-.17Z" fill="#fff"/>
+  <path d="M17.2 17.22c1.34-1.7-.94-5.48-4.93-8.6-4-3.12-8.22-4.41-9.55-2.71-1.33 1.7.95 5.49 4.94 8.6 4 3.12 8.22 4.42 9.55 2.71Zm-.56-.44c-.44.57-1.56.65-3.12.17a17.8 17.8 0 0 1-5.41-3 17.8 17.8 0 0 1-4.23-4.53c-.84-1.4-1.03-2.5-.59-3.07.44-.56 1.56-.64 3.12-.16a17.8 17.8 0 0 1 5.41 3 17.8 17.8 0 0 1 4.23 4.52c.84 1.4 1.03 2.5.59 3.07Z" fill="#fff"/>
+  <path d="M9.96 13.1a1.53 1.53 0 1 0 0-3.06 1.53 1.53 0 0 0 0 3.06Z" fill="#fff"/>
+</svg>

site/public/framework-logos/react.svg

@@ -0,0 +1,6 @@
+<svg width="35" height="32" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.5 12.3a2 2 0 1 0 0-4.1 2 2 0 0 0 0 4Z" fill="#61DAFB"/>
+  <path d="M11.5 14.4c6 0 11-1.8 11-4.2 0-2.3-5-4.2-11-4.2s-11 2-11 4.2c0 2.4 5 4.2 11 4.2Z" stroke="#61DAFB"/>
+  <path d="M7.9 12.3c3 5.3 7 8.6 9.1 7.5 2-1.2 1.2-6.4-1.9-11.7C12.1 3 8.1-.5 6 .7 4 2 4.8 7.1 7.9 12.3Z" stroke="#61DAFB"/>
+  <path d="M7.9 8.1c-3 5.3-4 10.5-1.9 11.7 2 1.1 6.1-2.2 9.1-7.5 3-5.2 4-10.4 1.9-11.6C15-.5 10.9 3 7.9 8.1Z" stroke="#61DAFB"/>
+</svg>

site/public/framework-logos/svelte.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="37.5" viewBox="0 0 20 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18.7 3.2A7.3 7.3 0 0 0 9 1L3.3 4.6A6.4 6.4 0 0 0 .4 9c-.3 1.5 0 3 .7 4.4a6.4 6.4 0 0 0-1 5c.3 1 .6 1.8 1.2 2.5A7.3 7.3 0 0 0 11 23l5.6-3.6a6.4 6.4 0 0 0 2.9-4.3c.3-1.5 0-3-.7-4.3a6.5 6.5 0 0 0 1-5.1c-.3-1-.6-1.8-1.2-2.5" fill="#FF3E00"/>
+  <path d="M8.4 21.2a4.4 4.4 0 0 1-5.5-3.3 4.1 4.1 0 0 1 .1-2.1l.1-.4.3.2c.7.5 1.4.9 2.2 1.1l.2.1v.2c0 .3 0 .6.2.8a1.3 1.3 0 0 0 1.5.6l.3-.2 5.6-3.5a1.2 1.2 0 0 0 .5-1.3l-.2-.5a1.3 1.3 0 0 0-1.4-.5c-.2 0-.3 0-.4.2l-2.1 1.3-1.2.5a4.4 4.4 0 0 1-5.4-3.2A4.1 4.1 0 0 1 3.8 8c.3-.5.7-.9 1.1-1.2l5.6-3.5a4 4 0 0 1 1.1-.5A4.4 4.4 0 0 1 17.1 6a4.1 4.1 0 0 1-.1 2.2l-.1.3-.3-.2c-.7-.5-1.4-.9-2.2-1.1h-.2V7c0-.3 0-.6-.2-.8a1.3 1.3 0 0 0-1.8-.4L6.6 9.4a1.2 1.2 0 0 0-.5 1.3l.2.4a1.3 1.3 0 0 0 1.4.5l.4-.1 2.1-1.4a4 4 0 0 1 1.2-.5 4.4 4.4 0 0 1 5.4 3.3c.1.5.1 1 0 1.6a3.9 3.9 0 0 1-1.7 2.6l-5.6 3.6-1.1.5" fill="#fff"/>
+</svg>

site/public/framework-logos/svg.svg

@@ -0,0 +1,7 @@
+<svg width="36" height="36" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M.68 12h22.64v8A3.26 3.26 0 0 1 20 23.32H4A3.26 3.26 0 0 1 .68 20v-8Z" fill="#000"/>
+  <path d="M13.27 4.87a1.8 1.8 0 1 0-2.54 0v3.66L8.14 5.94a1.8 1.8 0 1 0-1.8 1.8l2.59 2.59H5.27a1.8 1.8 0 1 0 0 2.54h3.66l-2.58 2.58a1.8 1.8 0 1 0 1.8 1.8l2.58-2.58v3.65a1.8 1.8 0 1 0 2.54 0v-3.65l2.58 2.58a1.8 1.8 0 1 0 1.8-1.8l-2.58-2.58h3.65a1.8 1.8 0 1 0 0-2.54h-3.65l2.59-2.59a1.8 1.8 0 1 0-1.8-1.8l-2.59 2.59V4.87Z" fill="#FFB13B"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.73 4.87a1.8 1.8 0 1 1 2.54 0v3.66l2.59-2.59a1.8 1.8 0 1 1 1.8 1.8l-2.59 2.59h3.65a1.8 1.8 0 1 1 0 2.54h-3.65l2.58 2.58a1.8 1.8 0 1 1-1.8 1.8l-2.58-2.58v3.65a1.8 1.8 0 1 1-2.54 0v-3.65l-2.58 2.58a1.8 1.8 0 1 1-1.8-1.8l2.58-2.58H5.27a1.8 1.8 0 1 1 0-2.54h3.66L6.34 7.74a1.8 1.8 0 1 1 1.8-1.8l2.59 2.59V4.87ZM8.69 3.6A3.31 3.31 0 0 0 4 8.3a3.31 3.31 0 0 0 0 6.62A3.31 3.31 0 0 0 8.7 19.6a3.31 3.31 0 0 0 6.62 0A3.31 3.31 0 0 0 20 14.9a3.31 3.31 0 0 0 0-6.62A3.31 3.31 0 0 0 15.3 3.6a3.31 3.31 0 0 0-6.62 0Z" fill="#000"/>
+  <path opacity=".8" d="M.68 12h22.64v8A3.26 3.26 0 0 1 20 23.32H4A3.26 3.26 0 0 1 .68 20v-8Z" fill="#000"/>
+  <path d="M4.08 17.65a2.93 2.93 0 0 1 2.08-5.01c1.6 0 2.93 1.31 2.93 2.94H7.36a1.22 1.22 0 1 0-2.08.85c.22.23.42.29.86.37a3.3 3.3 0 0 1 2.08.85 2.93 2.93 0 0 1-2.08 5 2.93 2.93 0 0 1-2.92-2.92h1.74a1.22 1.22 0 1 0 2.08-.87c-.24-.22-.54-.28-.88-.35-.78-.13-1.54-.32-2.08-.86Zm10.88-5.01-2.08 10.02h-1.73L9.07 12.64h1.73l1.22 5.87 1.21-5.87h1.73Zm2.93 4.16h2.91v2.93a2.93 2.93 0 1 1-5.86 0v-4.16a2.93 2.93 0 1 1 5.86 0h-1.7a1.22 1.22 0 0 0-2.43 0v4.16a1.22 1.22 0 0 0 2.43 0V18.5H17.9V16.8Z" fill="#fff"/>
+</svg>

site/public/framework-logos/vue-next.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="30" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m14.2 0-2.7 4.6L9 0H0l11.5 20L23.1 0h-8.9Z" fill="#41B883"/>
+  <path d="m14.2 0-2.7 4.6L9 0H4.6l7 12 6.9-12h-4.3Z" fill="#34495E"/>
+  <circle cx="16.5" cy="13.5" r="4.5" fill="#2C3E50"/>
+  <path d="m15.5 11.8.4-.2.5-.1a1.3 1.3 0 0 1 .9.3l.2.3v.4l-.1.5a1 1 0 0 1-.4.3c.2 0 .3.2.5.3l.2.6a1 1 0 0 1-.4.8l-.4.2a2.6 2.6 0 0 1-1 0l-.5-.1.1-.4h.4a1.6 1.6 0 0 0 .7 0h.2l.2-.2v-.3l-.1-.4a1 1 0 0 0-.6-.2h-.4v-.5h.3l.5-.1c.2-.1.3-.3.3-.5l-.2-.4a.6.6 0 0 0-.4-.1 1 1 0 0 0-.4 0l-.3.2-.2-.4Z" fill="#fff"/>
+</svg>

site/public/framework-logos/vue.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="30" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m14.2 0-2.7 4.6L9 0H0l11.5 20L23.1 0h-8.9Z" fill="#41B883"/>
+  <path d="m14.2 0-2.7 4.6L9 0H4.6l7 12 6.9-12h-4.3Z" fill="#34495E"/>
+</svg>

site/public/package-logos/lucide-angular-small.svg

@@ -0,0 +1,9 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="M59 5 49 8.6l1.5 13.2 8.5 4.7 8.5-4.7L69 8.6 59 5Z" fill="#DD0031"/>
+  <path d="M59 5v21.5l8.5-4.7L69 8.6 59 5Z" fill="#C3002F"/>
+  <path d="m59 7.4-6.3 14h2.4l1.2-3.1h5.3l1.3 3h2.3L59 7.4Zm1.8 9h-3.6l1.8-4.5 1.8 4.4Z" fill="#fff"/>
+</svg>

site/public/package-logos/lucide-flutter-small.svg

@@ -0,0 +1,9 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M68.4 15H61l-6.5 6.5 3.7 3.7 10.2-10.1ZM52.7 19.7 49 16 61 4h7.4L52.7 19.7Z" fill="#54C5F8"/>
+  <path d="M58.2 25.2 61 28h7.4l-6.5-6.5-3.7 3.7Z" fill="#01579B"/>
+  <path d="m58.2 17.8-3.7 3.7 3.7 3.7 3.7-3.7-3.7-3.7Z" fill="#29B6F6"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+</svg>

site/public/package-logos/lucide-preact-small.svg

@@ -0,0 +1,10 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 11.97 11.97 0 0 0-4-8.94" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0c0 3.58 1.57 6.8 4.06 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="m59 4 10 5.77v11.55l-10 5.77-10-5.77V9.77L59 4Z" fill="#673AB8"/>
+  <path d="M51.72 21.22c1.33 1.7 5.56.41 9.55-2.7 3.99-3.12 6.27-6.9 4.94-8.61-1.33-1.7-5.56-.4-9.55 2.71-3.99 3.12-6.27 6.9-4.94 8.6Zm.57-.44c-.44-.56-.25-1.67.6-3.07a17.8 17.8 0 0 1 4.22-4.52 17.8 17.8 0 0 1 5.41-3c1.56-.48 2.68-.4 3.12.16.44.57.25 1.68-.6 3.07a17.8 17.8 0 0 1-4.22 4.53 17.8 17.8 0 0 1-5.41 3c-1.56.48-2.68.4-3.12-.17Z" fill="#fff"/>
+  <path d="M66.2 21.22c1.34-1.7-.94-5.48-4.93-8.6-4-3.12-8.22-4.41-9.55-2.71-1.33 1.7.95 5.49 4.94 8.6 4 3.12 8.22 4.42 9.55 2.71Zm-.56-.44c-.44.57-1.56.65-3.12.17a17.8 17.8 0 0 1-5.41-3 17.8 17.8 0 0 1-4.23-4.53c-.84-1.4-1.03-2.5-.59-3.07.44-.56 1.56-.64 3.12-.16a17.8 17.8 0 0 1 5.41 3 17.8 17.8 0 0 1 4.23 4.52c.84 1.4 1.03 2.5.59 3.07Z" fill="#fff"/>
+  <path d="M58.96 17.1a1.53 1.53 0 1 0 0-3.06 1.53 1.53 0 0 0 0 3.06Z" fill="#fff"/>
+</svg>

site/public/package-logos/lucide-react-small.svg

@@ -0,0 +1,10 @@
+<svg width="78" height="32" viewBox="0 0 78 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="78" height="32" rx="5" fill="#fff"/>
+<path d="M58.5 18.2818C59.6321 18.2818 60.55 17.3639 60.55 16.2318C60.55 15.0996 59.6321 14.1818 58.5 14.1818C57.3678 14.1818 56.45 15.0996 56.45 16.2318C56.45 17.3639 57.3678 18.2818 58.5 18.2818Z" fill="#61DAFB"/>
+<path d="M58.5 20.4317C64.5751 20.4317 69.5 18.5513 69.5 16.2317C69.5 13.9121 64.5751 12.0317 58.5 12.0317C52.4249 12.0317 47.5 13.9121 47.5 16.2317C47.5 18.5513 52.4249 20.4317 58.5 20.4317Z" stroke="#61DAFB"/>
+<path d="M54.8626 18.3317C57.9002 23.593 61.9911 26.9178 63.9999 25.758C66.0087 24.5982 65.1748 19.393 62.1372 14.1317C59.0996 8.87053 55.0087 5.54567 52.9999 6.70547C50.9911 7.86527 51.825 13.0705 54.8626 18.3317Z" stroke="#61DAFB"/>
+<path d="M54.8626 14.1317C51.825 19.3929 50.9911 24.5982 52.9999 25.758C55.0087 26.9178 59.0996 23.5929 62.1372 18.3317C65.1748 13.0705 66.0087 7.86522 63.9999 6.70542C61.9911 5.54562 57.9002 8.87048 54.8626 14.1317Z" stroke="#61DAFB"/>
+<path d="M21 16C21 14.9392 20.5786 13.9217 19.8284 13.1716C19.0783 12.4215 18.0609 12 17 12C15.9391 12 14.9217 12.4215 14.1716 13.1716C13.4214 13.9217 13 14.9392 13 16C13 18.1218 13.8429 20.1566 15.3431 21.6569C16.8434 23.1572 18.8783 24 21 24C23.1217 24 25.1566 23.1572 26.6569 21.6569C28.1571 20.1566 29 18.1218 29 16C29.0019 14.3114 28.6464 12.6415 27.957 11.1C27.2676 9.55854 26.2599 8.18036 25 7.05603" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 16C17 17.0609 17.4214 18.0783 18.1716 18.8284C18.9217 19.5786 19.9391 20 21 20C22.0609 20 23.0783 19.5786 23.8284 18.8284C24.5786 18.0783 25 17.0609 25 16C25 13.8783 24.1571 11.8434 22.6569 10.3431C21.1566 8.84285 19.1217 8 17 8C14.8783 8 12.8434 8.84285 11.3431 10.3431C9.84285 11.8434 9 13.8783 9 16C9 19.584 10.571 22.801 13.063 25" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="39" cy="16" r="2" fill="#DDD"/>
+</svg>

site/public/package-logos/lucide-small.svg

@@ -0,0 +1,8 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 11.97 11.97 0 0 0-4-8.94" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0c0 3.58 1.57 6.8 4.06 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="M49 6h20v20H49V6Z" fill="#F7DF1E"/>
+  <path d="M62.43 21.62c.41.67.92 1.14 1.87 1.14.76 0 1.27-.38 1.27-.92 0-.63-.5-.89-1.36-1.24l-.48-.22c-1.36-.57-2.25-1.3-2.25-2.82 0-1.4 1.08-2.48 2.73-2.48 1.2 0 2.06.41 2.7 1.5l-1.47.94c-.34-.57-.7-.79-1.23-.79-.54 0-.9.35-.9.8 0 .57.36.79 1.18 1.14l.45.19c1.62.7 2.5 1.4 2.5 2.95 0 1.68-1.33 2.63-3.1 2.63-1.75 0-2.9-.85-3.44-1.93l1.53-.9Zm-6.64.16c.29.54.58.98 1.21.98s1.02-.25 1.02-1.17v-6.42h1.87v6.42c0 1.97-1.14 2.85-2.8 2.85a2.9 2.9 0 0 1-2.82-1.74l1.52-.92Z" fill="#000"/>
+</svg>

site/public/package-logos/lucide-static-small.svg

@@ -0,0 +1,11 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 11.97 11.97 0 0 0-4-8.94" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0c0 3.58 1.57 6.8 4.06 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="M47.68 16h22.64v8A3.26 3.26 0 0 1 67 27.32H51A3.26 3.26 0 0 1 47.68 24v-8Z" fill="#000"/>
+  <path d="M60.27 8.87a1.8 1.8 0 1 0-2.54 0v3.66l-2.59-2.59a1.8 1.8 0 1 0-1.8 1.8l2.59 2.59h-3.66a1.8 1.8 0 1 0 0 2.54h3.66l-2.58 2.58a1.8 1.8 0 1 0 1.8 1.8l2.58-2.58v3.65a1.8 1.8 0 1 0 2.54 0v-3.65l2.58 2.58a1.8 1.8 0 1 0 1.8-1.8l-2.58-2.58h3.65a1.8 1.8 0 1 0 0-2.54h-3.65l2.59-2.59a1.8 1.8 0 1 0-1.8-1.8l-2.59 2.59V8.87Z" fill="#FFB13B"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M57.73 8.87a1.8 1.8 0 1 1 2.54 0v3.66l2.59-2.59a1.8 1.8 0 1 1 1.8 1.8l-2.59 2.59h3.65a1.8 1.8 0 1 1 0 2.54h-3.65l2.58 2.58a1.8 1.8 0 1 1-1.8 1.8l-2.58-2.58v3.65a1.8 1.8 0 1 1-2.54 0v-3.65l-2.58 2.58a1.8 1.8 0 1 1-1.8-1.8l2.58-2.58h-3.66a1.8 1.8 0 1 1 0-2.54h3.66l-2.59-2.59a1.8 1.8 0 1 1 1.8-1.8l2.59 2.59V8.87ZM55.69 7.6A3.31 3.31 0 0 0 51 12.3a3.31 3.31 0 0 0 0 6.62 3.31 3.31 0 0 0 4.69 4.69 3.31 3.31 0 0 0 6.62 0A3.31 3.31 0 0 0 67 18.9a3.31 3.31 0 0 0 0-6.62A3.31 3.31 0 0 0 62.3 7.6a3.31 3.31 0 0 0-6.62 0Z" fill="#000"/>
+  <path opacity=".8" d="M47.68 16h22.64v8A3.26 3.26 0 0 1 67 27.32H51A3.26 3.26 0 0 1 47.68 24v-8Z" fill="#000"/>
+  <path d="M51.08 21.65a2.93 2.93 0 0 1 2.08-5.01c1.6 0 2.93 1.31 2.93 2.94h-1.73a1.22 1.22 0 1 0-2.08.85c.22.23.42.29.86.37a3.3 3.3 0 0 1 2.08.85 2.93 2.93 0 1 1-4.15 4.15 2.93 2.93 0 0 1-.85-2.07h1.74a1.22 1.22 0 1 0 2.08-.87c-.24-.22-.54-.28-.88-.35-.78-.13-1.54-.32-2.08-.86Zm10.88-5.01-2.08 10.02h-1.73l-2.08-10.02h1.73l1.22 5.87 1.21-5.87h1.73Zm2.93 4.16h2.91v2.93a2.93 2.93 0 1 1-5.86 0v-4.16a2.93 2.93 0 1 1 5.86 0h-1.7a1.22 1.22 0 0 0-2.43 0v4.16a1.22 1.22 0 0 0 2.43 0V22.5H64.9V20.8Z" fill="#fff"/>
+</svg>

site/public/package-logos/lucide-svelte-small.svg

@@ -0,0 +1,8 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="M67.7 7.2A7.3 7.3 0 0 0 58 5l-5.6 3.5a6.4 6.4 0 0 0-2.9 4.3c-.3 1.5 0 3 .7 4.4a6.4 6.4 0 0 0-1 5c.3 1 .6 1.8 1.2 2.5A7.3 7.3 0 0 0 60 27l5.6-3.6a6.4 6.4 0 0 0 2.9-4.3c.3-1.5 0-3-.7-4.3a6.5 6.5 0 0 0 1-5.1c-.3-1-.6-1.8-1.2-2.5" fill="#FF3E00"/>
+  <path d="M57.4 25.2a4.4 4.4 0 0 1-5.5-3.3 4.1 4.1 0 0 1 .1-2.1l.1-.4.3.2c.7.5 1.4.9 2.2 1.1l.2.1v.2c0 .3 0 .6.2.8a1.3 1.3 0 0 0 1.5.6l.3-.2 5.6-3.5a1.2 1.2 0 0 0 .5-1.3l-.2-.5a1.3 1.3 0 0 0-1.4-.5c-.2 0-.3 0-.4.2l-2.1 1.3-1.2.5a4.4 4.4 0 0 1-5.4-3.2 4.1 4.1 0 0 1 .6-3.1c.3-.5.7-.9 1.1-1.2l5.6-3.5a4 4 0 0 1 1.1-.5 4.4 4.4 0 0 1 5.5 3.2 4.1 4.1 0 0 1-.1 2.2l-.1.3-.3-.2c-.7-.5-1.4-.9-2.2-1.1h-.2V11c0-.3 0-.6-.2-.8a1.3 1.3 0 0 0-1.8-.4l-5.6 3.6a1.2 1.2 0 0 0-.5 1.3l.2.4a1.3 1.3 0 0 0 1.4.5l.4-.1 2.1-1.4a4 4 0 0 1 1.2-.5 4.4 4.4 0 0 1 5.4 3.3c.1.5.1 1 0 1.6a3.9 3.9 0 0 1-1.7 2.6l-5.6 3.6-1.1.5Z" fill="#fff"/>
+</svg>

site/public/package-logos/lucide-vue-next-small.svg

@@ -0,0 +1,10 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="m61.2 6-2.7 4.6L56 6H47l11.5 20L70.1 6h-8.9Z" fill="#41B883"/>
+  <path d="m61.2 6-2.7 4.6L56 6h-4.3l7 12 6.9-12h-4.3Z" fill="#34495E"/>
+  <circle cx="63.5" cy="19.5" r="4.5" fill="#2C3E50"/>
+  <path d="m62.5 17.8.4-.2.5-.1a1.3 1.3 0 0 1 .9.3l.2.3v.4l-.1.5a1 1 0 0 1-.4.3c.2 0 .3.2.5.3l.2.6a1 1 0 0 1-.4.8l-.4.2a2.6 2.6 0 0 1-1 0l-.5-.1.1-.4h.4a1.6 1.6 0 0 0 .7 0h.2l.2-.2v-.3l-.1-.4a1 1 0 0 0-.6-.2h-.4v-.5h.3l.5-.1c.2-.1.3-.3.3-.5l-.2-.4a.6.6 0 0 0-.4-.1 1 1 0 0 0-.4 0l-.3.2-.2-.4Z" fill="#fff"/>
+</svg>

site/public/package-logos/lucide-vue-small.svg

@@ -0,0 +1,8 @@
+<svg width="78" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="78" height="32" rx="5" fill="#fff"/>
+  <path d="M21 16a4 4 0 1 0-8 0 8 8 0 0 0 16 0 12 12 0 0 0-4-9" stroke="#2D3748" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M17 16a4 4 0 1 0 8 0 8 8 0 0 0-16 0 12 12 0 0 0 4 9" stroke="#F56565" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="39" cy="16" r="2" fill="#DDD"/>
+  <path d="m61.2 6-2.7 4.6L56 6H47l11.5 20L70.1 6h-8.9Z" fill="#41B883"/>
+  <path d="m61.2 6-2.7 4.6L56 6h-4.3l7 12 6.9-12h-4.3Z" fill="#34495E"/>
+</svg>

site/src/components/CodeBlock.tsx

@@ -0,0 +1,125 @@
+import { Box, BoxProps, chakra, useColorMode } from '@chakra-ui/react';
+import nightOwlLightTheme from 'prism-react-renderer/themes/nightOwlLight';
+import nightOwlDarkTheme from 'prism-react-renderer/themes/nightOwl';
+import uiTheme from '../lib/theme';
+// import theme from 'prism-react-renderer/themes/nightOwl';
+import BaseHighlight, { defaultProps, Language } from 'prism-react-renderer';
+import { CSSProperties } from 'react';
+import CopyButton from './CopyButton';
+
+const editorStyle: CSSProperties = {
+  fontSize: 14,
+  overflowX: 'auto',
+  fontFamily: 'SF Mono, Menlo, monospace',
+  height: '100%',
+};
+
+const CodeContainer = (props: BoxProps) => (
+  <Box paddingTop="3" paddingBottom="3" rounded="8px" height="100%" {...props} />
+);
+
+const RE = /{([\d,-]+)}/;
+
+const calculateLinesToHighlight = (meta: string) => {
+  if (!RE.test(meta)) {
+    return () => false;
+  }
+  const lineNumbers = RE.exec(meta)[1]
+    .split(`,`)
+    .map(v => v.split(`-`).map(x => parseInt(x, 10)));
+
+  return (index: number) => {
+    const lineNumber = index + 1;
+    const inRange = lineNumbers.some(([start, end]) =>
+      end ? lineNumber >= start && lineNumber <= end : lineNumber === start,
+    );
+    return inRange;
+  };
+};
+
+interface HighlightProps {
+  code: string;
+  language: Language;
+  metastring?: string;
+  showLines?: boolean;
+}
+
+function CodeBlock({ code, language, metastring, showLines, ...props }: HighlightProps) {
+  const shouldHighlightLine = calculateLinesToHighlight(metastring);
+  const { colorMode } = useColorMode();
+
+  const backgroundColor =
+    colorMode === 'light' ? uiTheme.colors.gray[100] : uiTheme.colors.gray[700];
+  const codeTheme = colorMode === 'light' ? nightOwlLightTheme : nightOwlDarkTheme;
+
+  const customizedCodeTheme = {
+    ...codeTheme,
+    plain: {
+      ...codeTheme.plain,
+      backgroundColor,
+    },
+  };
+
+  return (
+    <Box position="relative" zIndex="0" {...props}>
+      <CodeContainer bg={backgroundColor}>
+        <BaseHighlight
+          {...defaultProps}
+          code={code}
+          language={language}
+          theme={customizedCodeTheme}
+          key={colorMode}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <div style={editorStyle} data-language={language} key={colorMode}>
+              <pre className={className} style={style}>
+                {tokens.slice(0, -1).map((line, i) => {
+                  const lineProps = getLineProps({ line, key: i });
+                  return (
+                    <chakra.div
+                      px="4"
+                      bg={shouldHighlightLine(i) ? 'whiteAlpha.200' : undefined}
+                      {...lineProps}
+                    >
+                      {showLines && (
+                        <chakra.span
+                          opacity={0.3}
+                          mr="4"
+                          width="16px"
+                          display="inline-block"
+                          fontSize="xs"
+                          style={{ userSelect: 'none' }}
+                        >
+                          {i + 1}
+                        </chakra.span>
+                      )}
+                      {line.map((token, key) => (
+                        <span {...getTokenProps({ token, key })} />
+                      ))}
+                    </chakra.div>
+                  );
+                })}
+              </pre>
+            </div>
+          )}
+        </BaseHighlight>
+      </CodeContainer>
+      <CopyButton
+        size="sm"
+        position="absolute"
+        textTransform="uppercase"
+        colorScheme="teal"
+        fontSize="xs"
+        height="24px"
+        zIndex="1"
+        top="2.5"
+        right="1.25em"
+        copyText={code}
+        fontFamily={uiTheme.fonts.body}
+        fontWeight="bold"
+      />
+    </Box>
+  );
+}
+
+export default CodeBlock;

site/src/components/CopyButton.tsx

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

site/src/components/CustomizeIconContext.tsx

@@ -23,7 +23,7 @@ export const IconStyleContext = createContext<ICustomIconStyle>({
   setStroke: (n: number) => null,
   size: 24,
   setSize: (n: number) => null,
-  resetStyle: ()=>null
+  resetStyle: () => null
 });
 
 export function CustomizeIconContext({ children }) {

site/src/components/Header.tsx

@@ -1,8 +1,16 @@
-import { Button, Flex, Link, WrapItem, Text, Wrap } from '@chakra-ui/react';
+import { Button, Flex, Link, WrapItem, Text, Wrap, Heading, Icon } from '@chakra-ui/react';
 import download from 'downloadjs';
 import JSZip from 'jszip';
 import { Download, Github } from 'lucide-react';
+import NextLink from 'next/link';
 import { IconCustomizerDrawer } from './IconCustomizerDrawer';
+import JSLogo from '../../public/framework-logos/js.svg';
+import ReactLogo from '../../public/framework-logos/react.svg';
+import VueLogo from '../../public/framework-logos/vue.svg';
+import Vue3Logo from '../../public/framework-logos/vue-next.svg';
+import PreactLogo from '../../public/framework-logos/preact.svg';
+import AngularLogo from '../../public/framework-logos/angular.svg';
+import FlutterLogo from '../../public/framework-logos/flutter.svg';
 
 function generateZip(icons) {
   const zip = new JSZip();
@@ -21,12 +29,50 @@ const Header = ({ data }) => {
 
   const repositoryUrl = 'https://github.com/lucide-icons/lucide';
 
+  const packages = [
+    {
+      name: 'lucide',
+      Logo: JSLogo,
+      href: '/docs/lucide',
+    },
+    {
+      name: 'lucide-react',
+      Logo: ReactLogo,
+      href: '/docs/lucide-react',
+    },
+    {
+      name: 'lucide-vue',
+      Logo: VueLogo,
+      href: '/docs/lucide-vue',
+    },
+    {
+      name: 'lucide-vue-next',
+      Logo: Vue3Logo,
+      href: '/docs/lucide-vue-next',
+    },
+    {
+      name: 'lucide-preact',
+      Logo: PreactLogo,
+      href: '/docs/lucide-preact',
+    },
+    {
+      name: 'lucide-angular',
+      Logo: AngularLogo,
+      href: '/docs/lucide-angular',
+    },
+    {
+      name: 'lucide-flutter',
+      Logo: FlutterLogo,
+      href: '/docs/lucide-flutter',
+    },
+  ];
+
   return (
     <Flex direction="column" align="center" justify="center">
-      <Text fontSize="4xl" as="b" mb="4" textAlign="center">
+      <Heading as="h1" fontSize="4xl" mb="4" textAlign="center">
         Simply beautiful open source icons, community-sourced
-      </Text>
+      </Heading>
-      <Text fontSize="lg" as="p" textAlign="center" mb="8">
+      <Text fontSize="lg" as="p" textAlign="center" mb="1">
         An open-source icon library, a fork of{' '}
         <Link href="https://github.com/feathericons/feather" isExternal>
           Feather Icons
@@ -38,7 +84,33 @@ const Header = ({ data }) => {
         </Link>
         !
       </Text>
-      <Wrap marginTop={3} marginBottom={10} spacing="15px" justify="center">
+      <Wrap
+        marginTop={4}
+        marginBottom={6}
+        spacing={{ base: 4, lg: 6 }}
+        justify="center"
+        align="center"
+      >
+        <WrapItem flexBasis="100%" style={{ marginBottom: 0 }}>
+          <NextLink href="/packages" passHref>
+            <Link _hover={{ opacity: 0.8 }} marginX="auto">
+              <Text fontSize="md" opacity={0.5} as="p" textAlign="center" width="100%">
+                Available for:
+              </Text>
+            </Link>
+          </NextLink>
+        </WrapItem>
+        {packages.map(({ name, href, Logo }) => (
+          <WrapItem key={name}>
+            <NextLink href={href} key={name} passHref>
+              <Link _hover={{ opacity: 0.8 }}>
+                <Logo />
+              </Link>
+            </NextLink>
+          </WrapItem>
+        ))}
+      </Wrap>
+      <Wrap marginTop={3} marginBottom={12} spacing="15px" justify="center">
         <WrapItem>
           <Button leftIcon={<Download />} size="lg" onClick={downloadAllIcons}>
             Download all

site/src/components/HeadingAnchored.tsx

@@ -0,0 +1,51 @@
+import { Link, Heading } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { useheadingNavigationContext } from './HeadingNavigationProvider';
+
+function getAnchor(text: string) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, '')
+    .replace(/[ ]/g, '-');
+}
+
+const HeadingAnchored = ({ children, as: headingLevel, ...restProps }) => {
+  const { addHeading } = useheadingNavigationContext();
+  const headingText = typeof children === 'string' ? children : children[0];
+
+  const anchor = getAnchor(headingText);
+  const link = `#${anchor}`;
+  const hoverStyling = {
+    textDecoration: 'none',
+    _before: {
+      content: '"#"',
+      color: '#F56565',
+      fontWeight: 'bold',
+      position: 'absolute',
+      left: 0,
+      transform: 'translateX(-100%)',
+      paddingX: 2,
+    },
+  };
+  const focusStyling = {
+    outline: 'none',
+  };
+
+  useEffect(() => {
+    addHeading({
+      anchor,
+      label: headingText,
+      headingLevel,
+    });
+  }, [anchor, headingText]);
+
+  return (
+    <Heading id={anchor} as={headingLevel} position="relative" {...restProps}>
+      <Link href={link} className="anchor-link" _hover={hoverStyling} _focus={focusStyling}>
+        {children}
+      </Link>
+    </Heading>
+  );
+};
+
+export default HeadingAnchored;

site/src/components/HeadingNavigationProvider.tsx

@@ -0,0 +1,35 @@
+import { createContext, useState, useContext } from 'react';
+
+interface HeadingTypes {
+  anchor: string;
+  label: string;
+  headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+const HeadingNavigationContext = createContext({
+  headings: [],
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  addHeading: (heading: HeadingTypes) => {},
+});
+
+function HeadingNavigationProvider({ children }) {
+  const [headings, setHeadings] = useState([]);
+
+  const addHeading = (heading: HeadingTypes) => {
+    if (!['h1', 'h2', 'h3'].includes(heading.headingLevel)) return;
+
+    const currentHeadings = headings;
+    currentHeadings.push(heading);
+    setHeadings(currentHeadings);
+  };
+
+  const value = { headings, addHeading };
+
+  return (
+    <HeadingNavigationContext.Provider value={value}>{children}</HeadingNavigationContext.Provider>
+  );
+}
+
+const useheadingNavigationContext = () => useContext(HeadingNavigationContext);
+
+export { HeadingNavigationProvider, useheadingNavigationContext };

site/src/components/HeadingTreeMenu.tsx

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

site/src/components/Layout.tsx

@@ -2,24 +2,34 @@ import {
   Box,
   Divider,
   Flex,
-  Text,
   Link,
-  Icon,
   useColorMode,
   useColorModeValue,
   IconButton,
+  useBreakpointValue,
 } from '@chakra-ui/react';
 import { useKeyBindings } from '../lib/key';
 import { useRouter } from 'next/router';
 import NextLink from 'next/link';
-import { Moon, Sun } from 'lucide-react';
+import { Moon, Sun, Menu, X } from 'lucide-react';
-import Logo from '../../public/logo.svg';
+import { useMobileNavigationContext, useMobileNavigationValue } from './MobileNavigationProvider';
+import Logo from './Logo';
 
 const Layout = ({ children }) => {
   const router = useRouter();
+  const { toggleMobileMenu } = useMobileNavigationContext();
   const { toggleColorMode } = useColorMode();
-  const text = useColorModeValue('dark', 'light');
+  const currentColorMode = useColorModeValue('dark', 'light');
   const ColorModeToggle = useColorModeValue(Moon, Sun);
+  const MobileMenuToggle = useMobileNavigationValue(Menu, X);
+  const showBaseNavigation = useBreakpointValue({ base: false, md: true });
+  const IconbuttonProps = {
+    size: 'md',
+    fontSize: 'lg',
+    variant: 'ghost',
+    color: 'current',
+    ml: '3',
+  };
 
   function setQuery(query) {
     router
@@ -53,42 +63,51 @@ const Layout = ({ children }) => {
           px={5}
         >
           <Flex justifyContent="center" alignItems="center">
-            <NextLink href="/" passHref>
+            <Logo />
-              <Link display="flex" _hover={{ textDecoration: 'none' }}>
-                <Icon boxSize={12} marginRight="8px">
-                  <Logo />
-                </Icon>
-                <Text fontSize="40px" lineHeight="48px">
-                  Lucide
-                </Text>
-              </Link>
-            </NextLink>
           </Flex>
           <Flex justifyContent="center" alignItems="center">
-            <Link
+            {showBaseNavigation ? (
-              href="https://github.com/lucide-icons/lucide"
+              <>
-              isExternal
+                {/* <NextLink href="/docs" passHref>
-              marginRight={6}
+                  <Link marginRight={12} fontSize="xl">
-              fontSize="xl"
+                    Documentation
-            >
+                  </Link>
-              Github
+                </NextLink> */}
-            </Link>
+                <NextLink href="/packages" passHref>
+                  <Link marginRight={12} fontSize="xl">
+                    Packages
+                  </Link>
+                </NextLink>
+                <Link
+                  href="https://github.com/lucide-icons/lucide"
+                  isExternal
+                  marginRight={6}
+                  fontSize="xl"
+                >
+                  Github
+                </Link>
+              </>
+            ) : null}
             <IconButton
-              size="md"
+              aria-label={`Switch to ${currentColorMode} mode`}
-              fontSize="lg"
-              aria-label={`Switch to ${text} mode`}
-              variant="ghost"
-              color="current"
-              ml="3"
               onClick={toggleColorMode}
+              {...IconbuttonProps}
               icon={<ColorModeToggle />}
             />
+            {!showBaseNavigation ? (
+              <IconButton
+                aria-label={`Open Mobile menu`}
+                onClick={toggleMobileMenu}
+                {...IconbuttonProps}
+                icon={<MobileMenuToggle />}
+              />
+            ) : null}
           </Flex>
         </Flex>
       </Flex>
       <Flex margin="0 auto" direction="column" maxW="1250px" px={5}>
         {children}
-        <Divider marginBottom={8} />
+        <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" />

site/src/components/Logo.tsx

@@ -0,0 +1,19 @@
+import { Icon, Link, Text } from '@chakra-ui/react';
+//@ts-ignore
+import LogoImage from '../../public/logo.svg';
+import NextLink from 'next/link';
+
+const Logo = () => (
+  <NextLink href="/" passHref>
+    <Link display="flex" _hover={{ textDecoration: 'none' }}>
+      <Icon boxSize={12} marginRight="8px">
+        <LogoImage />
+      </Icon>
+      <Text fontSize="40px" fontWeight="normal" lineHeight="48px">
+        Lucide
+      </Text>
+    </Link>
+  </NextLink>
+);
+
+export default Logo;

site/src/components/MobileMenu.tsx

@@ -0,0 +1,68 @@
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  Link,
+  Box,
+  Divider,
+} from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+import HeadingTreeMenu from './HeadingTreeMenu';
+import Logo from './Logo';
+import { useMobileNavigationContext } from './MobileNavigationProvider';
+
+const MobileMenu = () => {
+  const { isOpen, onClose } = useMobileNavigationContext();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.route && isOpen) {
+      onClose();
+    }
+  }, [router.route]);
+
+  return (
+    <Drawer placement="left" onClose={onClose} isOpen={isOpen} size="md">
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerCloseButton marginTop={3.5} marginRight={3} />
+        <DrawerHeader>
+          <Logo />
+        </DrawerHeader>
+        <DrawerBody>
+          <Box mb={4}>
+            {/* <NextLink href="/docs" passHref>
+              <Link fontSize="xl" fontWeight="bold">
+                Documentation
+              </Link>
+            </NextLink> */}
+          <NextLink href="/packages" passHref>
+            <Link marginRight={12} fontSize="xl">
+              Packages
+            </Link>
+          </NextLink>
+          </Box>
+          <Box mb={4}>
+            <Link
+              href="https://github.com/lucide-icons/lucide"
+              isExternal
+              fontSize="xl"
+              fontWeight="bold"
+            >
+              Github
+            </Link>
+          </Box>
+          <Divider />
+          <HeadingTreeMenu />
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default MobileMenu;

site/src/components/MobileNavigationProvider.tsx

@@ -0,0 +1,23 @@
+import { useDisclosure } from '@chakra-ui/react';
+import { createContext, useState, useContext, useMemo, useCallback, useEffect } from 'react'
+
+const MobileNavigationContext = createContext({
+  isOpen: false,
+  onOpen: () => {},
+  onClose: () => {},
+  toggleMobileMenu: () => {}
+})
+
+export function MobileNavigationProvider({ children }) {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const toggleMobileMenu = () => isOpen ? onClose() : onOpen()
+
+  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 ]);
+}

site/src/components/Package.tsx

@@ -0,0 +1,132 @@
+import {
+  Button,
+  Flex,
+  Box,
+  Heading,
+  Text,
+  useColorMode,
+  Divider,
+  ButtonGroup,
+  Stack
+} from '@chakra-ui/react';
+import Image from 'next/image'
+import { Code, FileText } from 'lucide-react';
+import Link from 'next/link'
+import { MDXRemote } from 'next-mdx-remote';
+import mdxComponents from '../lib/mdxComponents';
+
+const Package = ({ name, description, image, shields, source, documentation }) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Box
+      borderWidth="1px"
+      rounded="lg"
+      position="relative"
+      width="100%"
+      maxWidth="1152px"
+      boxShadow="lg"
+      bg={colorMode == 'light' ? 'gray-200' : 'gray.700'}
+      padding={8}
+    >
+      <Flex
+        justifyContent={{
+          base: "center",
+          md: "flex-start"
+        }}
+        flexDirection={{
+          base: "column",
+          md: "row"
+        }}
+      >
+        <Flex
+          marginRight={{
+            base: 0,
+            md: 8
+          }}
+          marginBottom={{
+            base: 4,
+            md: 0
+          }}
+          flex={3}
+          align="center"
+        >
+          <Box marginX='auto'>
+            <Image width={278} height={120} src={image} />
+          </Box>
+        </Flex>
+        <Box
+          flex={5}
+          marginRight={4}
+          textAlign={{
+            base: "center",
+            md: "left"
+          }}
+        >
+          <Heading as="h2" fontSize='3xl' mb={2}>
+            {name}
+          </Heading>
+          <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 } />
+                </a>
+              </Link>
+
+            ))}
+          </ButtonGroup>
+        </Box>
+        <Flex
+          placeItems="center"
+          align='center'
+          marginTop={{
+            base: 4,
+            md: 0
+          }}
+        >
+          <ButtonGroup
+            // as={Stack}
+            // spacing={8}
+            // align='center'
+            flexDirection={{
+              base: "column",
+              lg: "initial"
+            }}
+            margin='auto'
+            justifyContent={{
+              base: "center",
+              sm: "flex-start"
+            }}
+          >
+            <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>
+          </ButtonGroup>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Package;

site/src/lib/fetchAllDocuments.ts

@@ -0,0 +1,56 @@
+import { promises as fs } from 'fs';
+import { serialize } from 'next-mdx-remote/serialize'
+import path from 'path';
+import grayMatter from 'gray-matter'
+
+export default async function fetchAllDocuments() {
+  const docsDir = path.resolve(process.cwd(), '../docs');
+  const fileNames = await (await fs.readdir(docsDir)).map(filename => ({filename, directory: docsDir}))
+
+  const mapDirectoryTree = async ({filename, directory}) => {
+    const filePath = path.join(directory, filename);
+    const fileStat = await fs.lstat(filePath);
+
+    if(fileStat.isDirectory()) {
+      const filenamesInDirectory =
+        (await fs.readdir(filePath))
+        .map(childFileName => ({
+          directory: filePath,
+          directoryName: filename,
+          filename: childFileName
+        }))
+
+      return await Promise.all(filenamesInDirectory.map(mapDirectoryTree))
+    }
+
+    if (!fileStat.isFile()) return null;
+
+    return {
+      filePath,
+      filename,
+    }
+  }
+
+  const mapFileContents = async ({filename, filePath, directoryName = null}) => {
+    const source = await fs.readFile(filePath, 'utf-8');
+
+    const { content, data } = grayMatter(source)
+    const doc = await serialize(content)
+
+    return {
+      filename,
+      directoryName,
+      doc,
+      data,
+      content
+    }
+  }
+
+  const mappedDirectoryTree = (await Promise.all(fileNames.map(mapDirectoryTree))).flat().filter(({filename}) => filename.endsWith('.md'))
+  const mappedFileContents = await Promise.all(
+    mappedDirectoryTree
+    .map(mapFileContents)
+  )
+
+  return mappedFileContents
+}

site/src/lib/fetchPackages.ts

@@ -0,0 +1,39 @@
+import { promises as fs, constants } from 'fs';
+import path from 'path';
+import yaml from 'js-yaml'
+
+const fileExist = (filePath) => fs.access(filePath, constants.F_OK).then(() => true).catch(() => false)
+
+const fetchPackages = async () => {
+  const docsDir = path.resolve(process.cwd(), '../packages');
+  const fileNames = await (await fs.readdir(docsDir)).map(filename => ({filename, directory: docsDir}))
+
+  const packageJsons = await Promise.all(fileNames.map( async ({filename, directory}) => {
+    const filePath = path.resolve(directory, filename)
+    const fileStat = await fs.lstat(filePath);
+
+    if(!fileStat.isDirectory()) return null;
+
+    const jsonFilePath = path.resolve(filePath, 'package.json')
+    if (await fileExist(jsonFilePath)) {
+      return JSON.parse(
+        await fs.readFile(jsonFilePath, 'utf-8')
+      )
+    }
+
+    const ymlFilePath = path.resolve(filePath, 'pubspec.yaml')
+    if(await fileExist(ymlFilePath)) {
+      return yaml.load(
+        await fs.readFile(ymlFilePath, 'utf-8')
+      );
+    }
+
+    return null
+  }))
+
+
+
+  return packageJsons
+}
+
+export default fetchPackages;

site/src/lib/mdxComponents.tsx

@@ -0,0 +1,97 @@
+import {
+  Text,
+  UnorderedList,
+  ListItem,
+  Image,
+  Divider,
+  OrderedList,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Alert,
+  Code as InlineCode,
+  Link
+} from '@chakra-ui/react';
+import CodeBlock from '../components/CodeBlock';
+import NextLink from "next/link"
+import HeadingAnchored from '../components/HeadingAnchored';
+
+
+const components = {
+  h1: (props) => (
+    <HeadingAnchored as="h1"  size="xl" mb={4} {...props}/>
+  ),
+  h2: ({children, ...rest}) => (
+    <HeadingAnchored as="h2" size="lg" py={4} { ...rest}>
+      {children}
+      <Divider mt={4}/>
+    </HeadingAnchored>
+  ),
+  h3: (props) => (
+    <HeadingAnchored as="h3" size="md" pt={4} mb={2} {...props}/>
+  ),
+  h4: (props) => (
+    <HeadingAnchored as="h4" size="sm" pt={4} mb={2} {...props}/>
+  ),
+  h5: (props) => (
+    <HeadingAnchored as="h5" size="xs" pt={2} mb={1} {...props}/>
+  ),
+  h6: (props) => (
+    <HeadingAnchored as="h6" size="xs" pt={2} mb={1} opacity={.75} {...props}/>
+  ),
+  ul: (props) => <UnorderedList my={2}>{props.children}</UnorderedList>,
+  ol: (props) => <OrderedList my={2}>{props.children}</OrderedList>,
+  li: (props) => <ListItem my={1}>{props.children}</ListItem>,
+  p: (props) => <Text my={2}>{props.children}</Text>,
+  img: ({ children, ...rest }) => <Image {...rest} borderRadius={4} my={2}>{children}</Image>,
+  code: ({ className, children: code }) => {
+    const language = className.replace('language-', '');
+
+    return (
+      <CodeBlock
+        //@ts-ignore
+        my={2}
+        code={code}
+        language={language}
+      />
+    )
+  },
+  table: (props) => <Table {...props} rounded={4}/>,
+  thead: Thead,
+  tbody: Tbody,
+  tr: Tr,
+  th: Th,
+  td: Td,
+  blockquote: (props) => (
+    <Alert
+      mt="4"
+      role="none"
+      status="warning"
+      variant="left-accent"
+      as="blockquote"
+      rounded={4}
+      my="1.5rem"
+      {...props}
+    />
+  ),
+  inlineCode: InlineCode,
+  hr: (props) => <Divider my={4}/>,
+  a: ({children, href, ...rest}) => {
+    const isExternal = href.startsWith('http')
+
+    return (
+      <NextLink
+        href={isExternal ? href : `/docs/${href.replace('.md', '')}`}
+        {...rest}
+        passHref
+      >
+        <Link isExternal={isExternal} color='#F56565'>{children}</Link>
+      </NextLink>
+    )
+  }
+};
+
+export default components;

site/src/lib/packageData.tsx

@@ -0,0 +1,50 @@
+export default {
+  lucide: {
+    order: 0,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide', href: "https://www.npmjs.com/package/lucide" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide', href: "https://www.npmjs.com/package/lucide" }
+    ]
+  },
+  'lucide-react': {
+    order: 1,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-react', href: "https://www.npmjs.com/package/lucide-react" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-react', href: "https://www.npmjs.com/package/lucide-react" }
+    ]
+  },
+  'lucide-vue': {
+    order: 2,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-vue', href: "https://www.npmjs.com/package/lucide-vue" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-vue', href: "https://www.npmjs.com/package/lucide-vue" }
+    ]
+  },
+  'lucide-vue-next': {
+    order: 3,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-vue-next', href: "https://www.npmjs.com/package/lucide-vue-next" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-vue-next', href: "https://www.npmjs.com/package/lucide-vue-next" }
+    ]
+  },
+  'lucide-preact': {
+    order: 4,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-preact', href: "https://www.npmjs.com/package/lucide-preact" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-preact', href: "https://www.npmjs.com/package/lucide-preact" }
+    ]
+  },
+  'lucide-angular': {
+    order: 5,
+    shields: [
+      { alt: 'npm', src: 'https://img.shields.io/npm/v/lucide-angular', href: "https://www.npmjs.com/package/lucide-angular" },
+      { alt: 'npm', src: 'https://img.shields.io/npm/dw/lucide-angular', href: "https://www.npmjs.com/package/lucide-angular" }
+    ]
+  },
+  'lucide-flutter': {
+    order: 6,
+    shields: [
+      { alt: 'flutter', src: 'https://img.shields.io/pub/v/lucide_icons', href: "https://pub.dev/packages/lucide_icons" },
+    ]
+  }
+};

site/src/pages/_app.tsx

@@ -3,6 +3,7 @@ import customTheme from '../lib/theme';
 import '../assets/styling.css';
 import Head from 'next/head';
 import { CustomizeIconContext } from "../components/CustomizeIconContext";
+import { MobileNavigationProvider } from '../components/MobileNavigationProvider';
 
 const App = ({ Component, pageProps }) => {
   return (
@@ -11,9 +12,11 @@ const App = ({ Component, pageProps }) => {
         <title>Lucide</title>
       </Head>
       <ChakraProvider theme={customTheme}>
-        <CustomizeIconContext>
+        <MobileNavigationProvider>
-          <Component {...pageProps} />
+          <CustomizeIconContext>
-        </CustomizeIconContext>
+            <Component {...pageProps} />
+          </CustomizeIconContext>
+        </MobileNavigationProvider>
       </ChakraProvider>
     </>
   );

site/src/pages/docs/[docName].tsx

@@ -0,0 +1,33 @@
+import Layout from '../../components/Layout';
+import Header from '../../components/Header';
+import Head from 'next/head';
+import fetchAllDocuments from '../../lib/fetchAllDocuments'
+
+export { default } from '.'
+
+export async function getStaticProps({ params: { docName } }) {
+  const allDocs = await fetchAllDocuments()
+  console.log();
+
+  const doc = allDocs.find(({filename = ''}) => filename === `${docName}.md`);
+
+  return { props: doc }
+}
+
+export async function getStaticPaths() {
+  const docs = await fetchAllDocuments()
+
+  const paths =
+    docs
+      .filter(({filename = ''}) => filename !== 'index.md')
+      .map(doc => ({
+        params: {
+          docName: doc.filename.replace('.md', '')
+        }
+      }))
+
+  return {
+    paths,
+    fallback: false,
+  }
+}

site/src/pages/docs/index.tsx

@@ -0,0 +1,34 @@
+import Layout from '../../components/Layout';
+import Head from 'next/head';
+import fetchAllDocuments from '../../lib/fetchAllDocuments'
+import { MDXRemote } from 'next-mdx-remote'
+import mdxComponents from '../../lib/mdxComponents';
+import { HeadingNavigationProvider } from '../../components/HeadingNavigationProvider';
+import MobileMenu from '../../components/MobileMenu';
+
+const DocPage = ({ doc, data, content }) => {
+  if (!data || !doc) return null
+
+  return (
+    <HeadingNavigationProvider>
+      <MobileMenu />
+      <Layout>
+        { data?.title ? (
+          <Head>
+            <title>{ data.title }</title>
+          </Head>
+        ) : null}
+        <MDXRemote {...doc} data={data} components={mdxComponents} />
+      </Layout>
+    </HeadingNavigationProvider>
+  )
+}
+
+export default DocPage
+
+export async function getStaticProps({ params }) {
+  const allDocs = await fetchAllDocuments();
+  const doc = allDocs.find(({filename = ''}) => filename === 'index.md');
+
+  return { props: doc }
+}

site/src/pages/index.tsx

@@ -1,30 +1,32 @@
-import Layout from "../components/Layout";
+import Layout from '../components/Layout';
-import { getAllData } from "../lib/icons";
+import { getAllData } from '../lib/icons';
 
-import IconOverview from "../components/IconOverview";
+import IconOverview from '../components/IconOverview';
-import IconDetailOverlay from "../components/IconDetailOverlay";
+import IconDetailOverlay from '../components/IconDetailOverlay';
-import { useRouter } from "next/router";
+import { useRouter } from 'next/router';
-import Header from "../components/Header";
+import Header from '../components/Header';
+import MobileMenu from '../components/MobileMenu';
 
 const IndexPage = ({ data }) => {
   const router = useRouter();
-  const getIcon = (iconName) => data.find(({name}) => name === iconName) || {};
+  const getIcon = iconName => data.find(({ name }) => name === iconName) || {};
 
   return (
     <Layout>
+      <MobileMenu />
       <IconDetailOverlay
         open={!!router.query.iconName}
         icon={getIcon(router.query.iconName)}
         close={() => router.push('/')}
       />
-      <Header {...{data}}/>
+      <Header {...{ data }} />
-      <IconOverview {...{data}}/>
+      <IconOverview {...{ data }} />
     </Layout>
   );
 };
 
 export async function getStaticProps() {
-  let data = await getAllData();
+  const data = await getAllData();
 
   return {
     props: {

site/src/pages/packages/index.tsx

@@ -0,0 +1,51 @@
+import Layout from '../../components/Layout';
+import { HeadingNavigationProvider } from '../../components/HeadingNavigationProvider';
+import MobileMenu from '../../components/MobileMenu';
+import { Stack } from '@chakra-ui/react';
+import Package from '../../components/Package';
+import packageData from '../../lib/packageData';
+import { Heading } from '@chakra-ui/react';
+import fetchPackages from '../../lib/fetchPackages';
+
+const PackagesPage = ({ packages }) => {
+  return (
+    <HeadingNavigationProvider>
+      <MobileMenu />
+      <Layout>
+        <Heading as="h1" marginBottom={6} textAlign="center">
+          Packages
+        </Heading>
+        <Stack spacing={8} align="center">
+          { packages.length ? (
+            packages.map(packageItem => (
+              <Package {...packageItem} />
+            ))
+          ) : null }
+        </Stack>
+      </Layout>
+    </HeadingNavigationProvider>
+  );
+};
+
+export default PackagesPage;
+
+export async function getStaticProps({ params }) {
+  const packages = (await fetchPackages())
+    .filter(Boolean)
+    .filter(packageObj => !packageObj.private)
+    .map(({ name, description, flutter = false }) => {
+      const packageDirectory = flutter ? 'lucide-flutter' : name;
+
+      return {
+        name,
+        description,
+        image: `/package-logos/${packageDirectory}-small.svg`,
+        source: `https://github.com/lucide-icons/lucide/tree/master/packages/${packageDirectory}`,
+        documentation: `/docs/${packageDirectory}`,
+        ...packageData[packageDirectory],
+      };
+    })
+    .sort((a,b ) => a.order - b.order);
+
+  return { props: { packages } };
+}

site/tsconfig.json

@@ -14,6 +14,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "exclude": ["node_modules", "use-popper.d.ts"],
+  "exclude": ["node_modules", "use-popper.d.ts", "*.md"],
   "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
 }

tags.json

@@ -251,6 +251,13 @@
     "marker",
     "tag"
   ],
+  "bookmark-minus": [
+    "delete",
+    "remove"
+  ],
+  "bookmark-plus": [
+    "add"
+  ],
   "bot": [
     "robot"
   ],
@@ -1095,6 +1102,27 @@
     "number",
     "order"
   ],
+  "list-plus": [
+    "playlist",
+    "add",
+    "song",
+    "track",
+    "new"
+  ],
+  "list-minus": [
+    "playlist",
+    "remove",
+    "song",
+    "subtract",
+    "remove",
+    "delete"
+  ],
+  "list-x": [
+    "playlist",
+    "subtract",
+    "remove",
+    "delete"
+  ],
   "loader": [
     "load",
     "wait"
@@ -1981,6 +2009,9 @@
     "group",
     "people"
   ],
+  "verified": [
+    "check"
+  ],
   "video": [
     "camera",
     "movie",