From 41159ceed2a1107ee4cdf79bd9d556822a050292 Mon Sep 17 00:00:00 2001
From: Eric Fennis <eric.fennis@gmail.com>
Date: Sun, 23 Apr 2023 20:33:41 +0200
Subject: [PATCH] Add code examples

---
 docs/.gitignore                               |   3 +-
 docs/.vitepress/api/gh-icon/[...data].get.ts  |  22 +
 docs/.vitepress/api/icon-nodes/index.get.ts   |  28 +
 docs/.vitepress/api/icons/[iconName].get.ts   |  46 +
 docs/.vitepress/api/tags/index.get.ts         |  12 +
 docs/.vitepress/components/FakeInput.vue      |  28 +
 .../components/HomeHeroIconsCard.data.ts      |   2 +-
 .../components/HomeHeroIconsCard.vue          |  94 +-
 docs/.vitepress/components/HomeInfo.vue       |   5 -
 docs/.vitepress/components/IconButton.vue     |   2 +-
 docs/.vitepress/components/IconDetail.vue     |  53 +
 docs/.vitepress/components/IconDetailName.vue |  24 +
 .../components/IconDetailOverlay.vue          |  54 +-
 docs/.vitepress/components/IconsOverview.vue  |  18 +-
 docs/.vitepress/components/Input.vue          |  17 +-
 .../composables/useIconCodeExample.ts         | 192 ++++
 docs/.vitepress/config.ts                     |   3 +-
 .../.vitepress/lib}/SvgPreview/index.tsx      |   0
 .../.vitepress/lib}/SvgPreview/types.ts       |   0
 .../.vitepress/lib}/SvgPreview/utils.ts       |   0
 docs/.vitepress/theme/style.css               |  42 +-
 docs/.vitepress/vercel.json                   |  10 +
 docs/guide/installation.md                    |  32 +-
 docs/iconMetaData.ts                          | 936 ++++++++++++++++++
 docs/icons/[name].md                          |  73 +-
 docs/icons/categories.md                      |   8 +-
 docs/index.md                                 |   4 +-
 docs/license.md                               |   3 +
 docs/nitro.config.ts                          |  15 +
 docs/package.json                             |  15 +-
 docs/tsconfig.json                            |   6 +-
 docs/vercel.json                              |   2 +-
 pnpm-lock.yaml                                | 127 +--
 scripts/writeIconMetaIndex.mjs                |  29 +
 scripts/writeIconNodes.mjs                    |  40 +
 vercel.json                                   |  10 +
 36 files changed, 1802 insertions(+), 153 deletions(-)
 create mode 100644 docs/.vitepress/api/gh-icon/[...data].get.ts
 create mode 100644 docs/.vitepress/api/icon-nodes/index.get.ts
 create mode 100644 docs/.vitepress/api/icons/[iconName].get.ts
 create mode 100644 docs/.vitepress/api/tags/index.get.ts
 create mode 100644 docs/.vitepress/components/FakeInput.vue
 create mode 100644 docs/.vitepress/components/IconDetail.vue
 create mode 100644 docs/.vitepress/components/IconDetailName.vue
 create mode 100644 docs/.vitepress/composables/useIconCodeExample.ts
 rename {site/src/components => docs/.vitepress/lib}/SvgPreview/index.tsx (100%)
 rename {site/src/components => docs/.vitepress/lib}/SvgPreview/types.ts (100%)
 rename {site/src/components => docs/.vitepress/lib}/SvgPreview/utils.ts (100%)
 create mode 100644 docs/.vitepress/vercel.json
 create mode 100644 docs/iconMetaData.ts
 create mode 100644 docs/license.md
 create mode 100644 scripts/writeIconMetaIndex.mjs
 create mode 100644 scripts/writeIconNodes.mjs
 create mode 100644 vercel.json

diff --git a/docs/.gitignore b/docs/.gitignore
index d54d298b8..7d6794ba2 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -2,4 +2,5 @@ node_modules
 .vitepress/cache
 .vitepress/dist
 .vercel
-.nitro
\ No newline at end of file
+.nitro
+iconNodes
diff --git a/docs/.vitepress/api/gh-icon/[...data].get.ts b/docs/.vitepress/api/gh-icon/[...data].get.ts
new file mode 100644
index 000000000..bdd4af66d
--- /dev/null
+++ b/docs/.vitepress/api/gh-icon/[...data].get.ts
@@ -0,0 +1,22 @@
+import { eventHandler, getQuery, setResponseHeader, defaultContentType } from 'h3'
+import { renderToString } from 'react-dom/server'
+import { createElement } from 'react'
+import SvgPreview from '../../lib/SvgPreview/index.tsx';
+
+export default eventHandler((event) => {
+  const { params } = event.context
+
+  const [name, svgData] = params.data.split('/');
+  const data = svgData.slice(0, -4);
+
+  const src = Buffer.from(data, 'base64').toString('utf8');
+
+  const svg = Buffer.from(
+    renderToString(createElement(SvgPreview, {src, showGrid: true}))
+  ).toString('utf8');
+
+  defaultContentType(event, 'image/svg+xml')
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+
+  return svg
+})
diff --git a/docs/.vitepress/api/icon-nodes/index.get.ts b/docs/.vitepress/api/icon-nodes/index.get.ts
new file mode 100644
index 000000000..ca4ad1c82
--- /dev/null
+++ b/docs/.vitepress/api/icon-nodes/index.get.ts
@@ -0,0 +1,28 @@
+import { eventHandler, getQuery, setResponseHeader } from 'h3'
+import * as iconNodes from '../../../iconNodes'
+import { kebabCase } from 'lodash-es'
+
+export default eventHandler((event) => {
+  const query = getQuery(event)
+
+  const withUniqueKeys = query.withUniqueKeys === 'true'
+
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
+
+  return Object.fromEntries(
+    Object.entries(iconNodes).map(([name, iconNode]) => {
+      const kebabName = kebabCase(name)
+
+      if (withUniqueKeys) {
+        return [kebabName, iconNode]
+      }
+
+      return [
+        kebabName,
+        iconNode.map(([name, attrs]) => {
+          delete attrs.key
+          return [name, attrs]
+        })]
+    })
+  )
+})
diff --git a/docs/.vitepress/api/icons/[iconName].get.ts b/docs/.vitepress/api/icons/[iconName].get.ts
new file mode 100644
index 000000000..ba588436e
--- /dev/null
+++ b/docs/.vitepress/api/icons/[iconName].get.ts
@@ -0,0 +1,46 @@
+import { eventHandler, getQuery, setResponseHeader, createError } from 'h3'
+import * as iconNodes from '../../../iconNodes'
+import { camelCase } from 'lodash-es'
+import createLucideIcon from 'lucide-react/src/createLucideIcon'
+import { renderToString } from 'react-dom/server'
+import { createElement } from 'react'
+
+export default eventHandler((event) => {
+  const { params } = event.context
+
+  const camelCaseName = camelCase(params.iconName)
+  const iconNode = iconNodes[camelCaseName]
+
+  if (iconNode == null) {
+    const error = createError({
+      statusCode: 404,
+      message: `Icon "${params.iconName}" not found`,
+    })
+
+    return sendError(event, error)
+  }
+
+  const width = getQuery(event).width || undefined
+  const height = getQuery(event).height || undefined
+  const color = getQuery(event).color || undefined
+  const strokeWidth = getQuery(event).strokeWidth || undefined
+
+  const LucideIcon = createLucideIcon(params.iconName, iconNode)
+
+  const svg = Buffer.from(
+    renderToString(
+      createElement(LucideIcon, {
+        width,
+        height,
+        color: color ? `#${color}` : undefined,
+        strokeWidth,
+      }
+    ))
+  ).toString('utf8');
+
+  defaultContentType(event, 'image/svg+xml')
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+
+  return svg
+
+})
diff --git a/docs/.vitepress/api/tags/index.get.ts b/docs/.vitepress/api/tags/index.get.ts
new file mode 100644
index 000000000..91a911e26
--- /dev/null
+++ b/docs/.vitepress/api/tags/index.get.ts
@@ -0,0 +1,12 @@
+import { eventHandler, getQuery, setResponseHeader } from 'h3'
+import * as iconMetaData from '../../../iconMetaData'
+import { kebabCase } from 'lodash-es'
+
+
+export default eventHandler((event) => {
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
+
+  return Object.fromEntries(
+    Object.entries(iconMetaData).map(([name, { tags }]) => [ kebabCase(name), tags ])
+  )
+})
diff --git a/docs/.vitepress/components/FakeInput.vue b/docs/.vitepress/components/FakeInput.vue
new file mode 100644
index 000000000..187f876bf
--- /dev/null
+++ b/docs/.vitepress/components/FakeInput.vue
@@ -0,0 +1,28 @@
+<script setup>
+</script>
+
+<template>
+  <button class="fake-input">
+    <slot/>
+  </button>
+</template>
+
+<style scoped>
+.fake-input {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  color: var(--vp-c-text-2);
+  padding: 12px 16px;
+  height: auto;
+  font-size: 14px;
+  box-shadow: var(--vp-shadow-4), var(--vp-shadow-2);
+  text-align: left;
+  border: 1px solid transparent;
+  cursor: text;
+}
+
+.fake-input:hover, .fake-input:focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+</style>
diff --git a/docs/.vitepress/components/HomeHeroIconsCard.data.ts b/docs/.vitepress/components/HomeHeroIconsCard.data.ts
index 76ca751bc..a58a38ba2 100644
--- a/docs/.vitepress/components/HomeHeroIconsCard.data.ts
+++ b/docs/.vitepress/components/HomeHeroIconsCard.data.ts
@@ -6,7 +6,7 @@ export default {
   async load() {
     const icons = await getAllData()
 
-    const randomIcons = Array.from({ length: 100 }, () => getRandomItem(icons))
+    const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
 
     return {
       icons: randomIcons,
diff --git a/docs/.vitepress/components/HomeHeroIconsCard.vue b/docs/.vitepress/components/HomeHeroIconsCard.vue
index b9958b941..87c726c56 100644
--- a/docs/.vitepress/components/HomeHeroIconsCard.vue
+++ b/docs/.vitepress/components/HomeHeroIconsCard.vue
@@ -1,47 +1,92 @@
 <script setup lang="ts">
+import { ref, onMounted, shallowRef, onBeforeUnmount} from 'vue';
 import { data } from './HomeHeroIconsCard.data'
 import IconButton from './IconButton.vue';
 import LucideIcon from './LucideIcon.vue'
 import { useRouter } from 'vitepress';
+import { random } from 'lodash-es'
+import FakeInput from './FakeInput.vue'
 
 const { go } = useRouter()
+const intervalTime = shallowRef()
+
+const getInitialItems = () => data.icons.slice(0, 48)
+const items = ref(getInitialItems())
+let id = items.value.length + 1
+
+function getRandomNewIcon() {
+  const randomIndex = random(0, 200)
+  const newRandomIcon = data.icons[randomIndex]
+
+  if (items.value.some((item) => item.name === newRandomIcon.name)) {
+    return getRandomNewIcon()
+  }
+
+  return newRandomIcon
+}
+
+function insert() {
+  const replaceIndex = random(0, 48)
+  const newIcon = getRandomNewIcon()
+
+  items.value[replaceIndex] = newIcon
+}
+
+onMounted(() => {
+  intervalTime.value = setInterval(() => {
+    insert()
+  }, 2000)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(intervalTime.value)
+})
 
 </script>
 
 <template>
   <div class="card-wrapper">
-
-
     <div class="icons-card">
       <div class="card-grid">
-        <TransitionGroup  name="list">
-          <IconButton v-for="icon in data.icons" @click="go(`/icons/${props.name}`)">
+        <TransitionGroup  name="list" mode="out-in">
+          <IconButton
+            v-for="icon in items"
+            @click="() => go(`/icons/${icon.name}`)"
+            :aria-label="`See ${icon.name} icon`"
+            :key="icon.name"
+            class="random-icon"
+          >
             <LucideIcon
               v-bind="icon"
             />
           </IconButton>
-
         </TransitionGroup>
       </div>
+      <FakeInput @click="go('/icons/?search')" class="search-box">
+    Search 964 icons...
+  </FakeInput>
     </div>
   </div>
+
 </template>
 
 <style scoped>
 .card-wrapper {
   /* padding: 0 24px; */
   margin-left: auto;
+  margin-bottom: auto;
 }
 .icons-card {
-  background: var(--vp-input-bg-color);
+  background: var(--vp-c-bg-alt);
   padding: 24px;
   border-radius: 8px;
   width: 100%;
   height:100%;
-  box-shadow: var(--vp-shadow-4);
+  box-shadow: var(--vp-shadow-2);
   max-height: 220px;
   max-width: 560px;
   margin: 0 auto;
+  position: relative;
   /* max-height: 240px; */
   /* margin-top: 96px; */
 }
@@ -56,23 +101,48 @@ const { go } = useRouter()
   max-height: 172px;
   max-width: 512px;
   overflow: hidden;
+  position: relative;
 }
 
-.list-move, /* apply transition to moving elements */
+/* 1. declare transition */
 .list-enter-active,
 .list-leave-active {
-  transition: all 0.5s ease;
+  transition: all 0.5s cubic-bezier(.85,.85,.25,1.1);
 }
 
+/* 2. declare enter from and leave to state */
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
-  transform: translateX(30px);
+  transform: scale(0.01);
 }
 
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
+/* 3. ensure leaving items are taken out of layout flow so that moving
+      animations can be calculated correctly. */
 .list-leave-active {
   position: absolute;
+  opacity: 0;
+  display: none;
 }
+
+.search-box {
+  position: absolute;
+  bottom:-24px;
+  width: 100%;
+  left: -24px;
+}
+
+/* .search-box :deep(.input) {
+  background: var(--vp-code-block-bg-light);
+  color: var(--vp-code-block-color);
+  padding: 12px 16px;
+  height: auto;
+  font-size: 16px;
+  box-shadow: var(--vp-shadow-4);
+}
+
+.search-box :deep(.input)::placeholder {
+  color: var(--vp-c-text-inverse-2)
+} */
+
 </style>
diff --git a/docs/.vitepress/components/HomeInfo.vue b/docs/.vitepress/components/HomeInfo.vue
index 0e8926d4f..0dd2c5ea8 100644
--- a/docs/.vitepress/components/HomeInfo.vue
+++ b/docs/.vitepress/components/HomeInfo.vue
@@ -23,9 +23,4 @@
 }
 
 
-
-
-
-
-
 </style>
diff --git a/docs/.vitepress/components/IconButton.vue b/docs/.vitepress/components/IconButton.vue
index 98ff8f096..d63751f6e 100644
--- a/docs/.vitepress/components/IconButton.vue
+++ b/docs/.vitepress/components/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button v-bind="$listeners" class="icon-button">
+  <button v-bind="$attrs" class="icon-button">
     <slot />
   </button>
 </template>
diff --git a/docs/.vitepress/components/IconDetail.vue b/docs/.vitepress/components/IconDetail.vue
new file mode 100644
index 000000000..1e35910c3
--- /dev/null
+++ b/docs/.vitepress/components/IconDetail.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { onMounted, computed } from 'vue'
+import { useData } from 'vitepress'
+// import { data } from './index.data.ts'
+import IconPreview from './IconPreview.vue'
+import PageContainer from './PageContainer.vue'
+
+const { params } = useData()
+
+onMounted(() => {
+  console.log(params, 'data')
+})
+const tags = computed(() => {
+  if (!params.tags) return []
+  return params.tags.join(' • ')
+})
+
+</script>
+
+<template>
+  <!-- <PageContainer class="overview"> -->
+    <IconPreview :name="$params.name" :iconNode="$params.iconNode" class="preview" />
+    <div class="details">
+      <h1 class="title">
+        {{ $params.name }}
+      </h1>
+    </div>
+  <!-- </PageContainer> -->
+</template>
+
+<style scoped>
+
+.overview {
+  display: flex;
+  gap: 32px;
+}
+.preview {
+  flex: 1;
+}
+.details {
+  flex: 2
+}
+
+.title {
+  font-size: 32px;
+  margin: 0;
+  margin-bottom: 16px;
+  line-height: 1.2;
+  color: var(--vp-text-color);
+  font-family: monospace;
+}
+
+</style>
diff --git a/docs/.vitepress/components/IconDetailName.vue b/docs/.vitepress/components/IconDetailName.vue
new file mode 100644
index 000000000..8875a7897
--- /dev/null
+++ b/docs/.vitepress/components/IconDetailName.vue
@@ -0,0 +1,24 @@
+<template>
+  <h1 class="icon-name">
+    <slot />
+  </h1>
+</template>
+
+<style scoped>
+.icon-name {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 32px;
+  margin-bottom: 12px;
+  transition: background ease-in .15s;;
+  padding: 2px 8px;
+  border-radius: 8px;
+  width: auto;
+  display: inline-block;
+  margin-left: -8px;
+}
+
+.icon-name:hover {
+  background-color: var(--vp-c-bg-alt);
+}
+</style>
diff --git a/docs/.vitepress/components/IconDetailOverlay.vue b/docs/.vitepress/components/IconDetailOverlay.vue
index ad747def9..39dcaa8f3 100644
--- a/docs/.vitepress/components/IconDetailOverlay.vue
+++ b/docs/.vitepress/components/IconDetailOverlay.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
   import type { IconEntity } from '../types'
   import { ref, computed } from 'vue'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
-import IconButton from './IconButton.vue';
-import IconPreview from './IconPreview.vue';
+  import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+  import IconButton from './IconButton.vue';
+  import IconDetailName from './IconDetailName.vue';
+  import IconPreview from './IconPreview.vue';
+  import { x, externalLink } from '../../iconNodes'
+  import { useRouter } from 'vitepress';
 
   const props = defineProps<{
     icon: IconEntity
@@ -17,6 +20,8 @@ import IconPreview from './IconPreview.vue';
     emit('close')
   }
 
+  const { go } = useRouter()
+
   const size = 24
 
   const gridLines = computed(() => Array.from({ length:(size - 1) }))
@@ -30,36 +35,32 @@ import IconPreview from './IconPreview.vue';
     if (!props.icon) return []
     return props.icon.tags.join(' • ')
   })
+
+  const CloseIcon = createLucideIcon('Close', x)
+  const ExternalLinkIcon = createLucideIcon('ExternalLink', externalLink)
 </script>
 
 <template>
   <Transition name="drawer">
     <div class="overlay-container" v-if="props.icon">
       <div class="overlay-panel">
-        <IconButton class="close-button" @click="onClose">
-          <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"
-          >
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </IconButton>
+        <nav class="overlay-menu">
+          <IconButton  @click="go(`/icons/${icon.name}`)">
+            <component :is="ExternalLinkIcon" />
+          </IconButton>
+          <IconButton  @click="onClose">
+            <component :is="CloseIcon" />
+          </IconButton>
+        </nav>
         <IconPreview :name="props.icon.name" :iconNode="props.icon.iconNode"/>
         <div class="icon-info">
-          <h1 class="icon-name">
+          <IconDetailName class="icon-name">
             {{ props.icon.name }}
-          </h1>
+          </IconDetailName>
           <p class="icon-tags">
             {{ tags }}
           </p>
+
         </div>
       </div>
     </div>
@@ -114,13 +115,8 @@ import IconPreview from './IconPreview.vue';
 
 .icon-info {
   padding: 0 24px;
-}
+  flex-basis: 100%;
 
-.icon-name {
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 32px;
-  margin-bottom: 12px;
 }
 
 .icon-tags {
@@ -129,10 +125,12 @@ import IconPreview from './IconPreview.vue';
   font-weight: 500;
 }
 
-.close-button {
+.overlay-menu {
   position: absolute;
   top: 24px;
   right: 24px;
+  display: flex;
+  gap: 8px;
 }
 
 .drawer-enter-active {
diff --git a/docs/.vitepress/components/IconsOverview.vue b/docs/.vitepress/components/IconsOverview.vue
index cfd5e8b90..7277b365b 100644
--- a/docs/.vitepress/components/IconsOverview.vue
+++ b/docs/.vitepress/components/IconsOverview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick, onMounted } from 'vue'
 import type { IconEntity } from '../types'
 import IconItem from './IconItem.vue'
 import IconDetailOverlay from './IconDetailOverlay.vue'
@@ -20,6 +20,7 @@ const searchQuery = ref(
       || ''
     )
 )
+const searchInput = ref()
 const searchResults = useSearch(searchQuery, props.icons, [
   { name: 'name', weight: 2 },
   { name: 'tags', weight: 1 },
@@ -37,15 +38,23 @@ watch(searchQuery, (searchString) => {
   const newUrl = new URL(window.location.href);
 
   newUrl.searchParams.set('search', searchString);
-  window.history.replaceState({}, '', newUrl)
+
+  nextTick(() => {
+    window.history.replaceState({}, '', newUrl)
+  })
 })
 
+onMounted(() => {
+  const searchParams = new URLSearchParams(window.location.search);
+  if(searchParams.has('search')) {
+    searchInput.value.focus()
+  }
 
-
+})
 </script>
 
 <template>
-  <Input type="search" placeholder="Search icons..." v-model="searchQuery" class="input-wrapper"/>
+  <Input type="search" placeholder="Search icons..." v-model="searchQuery" class="input-wrapper" ref="searchInput"/>
   <IconGrid :activeIcon="activeIconName" :icons="searchResults" @setActiveIcon="setActiveIconName"/>
   <IconDetailOverlay :icon="activeIcon" @close="setActiveIconName('')"/>
 </template>
@@ -54,7 +63,6 @@ watch(searchQuery, (searchString) => {
 .icons {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
-  /* padding: 32px 32px 96px; */
   gap: 8px;
   width: 100%;
 }
diff --git a/docs/.vitepress/components/Input.vue b/docs/.vitepress/components/Input.vue
index 566390982..e878ca9d1 100644
--- a/docs/.vitepress/components/Input.vue
+++ b/docs/.vitepress/components/Input.vue
@@ -5,16 +5,26 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 interface Props {
-    type: string
-    modelValue: string
-  }
+  type: string
+  modelValue: string
+}
 
 const props = withDefaults(defineProps<Props>(), {
   type: 'text'
 })
 
+const input = ref()
+
 defineEmits(['change', 'input'])
+
+defineExpose({
+  focus: () => {
+    input.value.focus()
+  }
+})
 </script>
 
 <template>
@@ -22,6 +32,7 @@ defineEmits(['change', 'input'])
     <input
       :type="type"
       class="input"
+      ref="input"
       :value="modelValue"
       v-bind="$attrs"
       @input="$emit('update:modelValue', $event.target.value)"
diff --git a/docs/.vitepress/composables/useIconCodeExample.ts b/docs/.vitepress/composables/useIconCodeExample.ts
new file mode 100644
index 000000000..7750ee400
--- /dev/null
+++ b/docs/.vitepress/composables/useIconCodeExample.ts
@@ -0,0 +1,192 @@
+import { startCase, camelCase } from 'lodash-es'
+import { computed, Ref } from 'vue'
+
+type CodeExampleType = Record<string, {
+  title: string,
+  codes: {
+    language?: string,
+    code: string,
+    metastring?: string,
+  }[],
+  breakpoint: 'base'|'sm'|'md',
+}>
+
+const getIconCodes = (name: string): CodeExampleType => {
+  const pascalCase = startCase(camelCase(name)).replace(/\s/g, '')
+
+  return {
+    html: {
+      title: 'HTML',
+      codes: [
+        {
+          language: 'markup',
+          code: `<i icon-name="${name}"></i>
+`,
+        },
+      ],
+      breakpoint: 'base',
+    },
+    react: {
+      title: 'React',
+      codes: [
+        {
+          language: 'tsx',
+          code: `import { ${pascalCase} } from 'lucide-react';
+
+const App = () => {
+  return (
+    <${pascalCase}
+      color="red"
+      size={48}
+      strokeWidth={1.5}
+    />
+  );
+};
+
+export default App;
+`,
+          metastring: '{1,4}',
+        },
+      ],
+      breakpoint: 'base',
+    },
+    vue: {
+      title: 'Vue 3',
+      codes: [
+        {
+          language: 'markup',
+          code: `<template>
+  <${pascalCase} color="red" :size="32" />
+</template>
+
+<script setup>
+import { ${pascalCase} } from 'lucide-vue-next';
+</script>
+`,
+          metastring: '{2,6}',
+        },
+      ],
+      breakpoint: 'base',
+    },
+    svelte: {
+      title: 'Svelte',
+      codes: [
+        {
+          language: 'markup',
+          code: `<script>
+import { ${pascalCase} } from 'lucide-svelte';
+</script>
+
+<${pascalCase}
+  color="#ff3e98"
+  size="48"
+  strokeWidth="1.5"
+/>
+`,
+          metastring: '{2,5}',
+        },
+      ],
+      breakpoint: 'sm',
+    },
+    preact:{
+      title: 'Preact',
+      codes: [
+        {
+          language: 'tsx',
+          code: `import { ${pascalCase} } from 'lucide-preact';
+
+const App = () => {
+  return (
+    <${pascalCase}
+      color="red"
+      size={48}
+      strokeWidth={1.5}
+    />
+  );
+};
+
+export default App;
+`,
+          metastring: '{1,4}',
+        },
+      ],
+      breakpoint: 'md',
+    },
+    solid:{
+      title: 'Solid',
+      codes: [
+        {
+          language: 'tsx',
+          code: `import { ${pascalCase} } from 'lucide-solid';
+
+const App = () => {
+  return (
+    <${pascalCase}
+      color="red"
+      size={48}
+      strokeWidth={1.5}
+    />
+  );
+};
+
+export default App;
+`,
+          metastring: '{1,4}',
+        },
+      ],
+      breakpoint: 'md',
+    },
+    angular: {
+      title: 'Angular',
+      codes: [
+        {
+          language: 'tsx',
+          code: `// app.module.ts
+import { LucideAngularModule, ${pascalCase} } from 'lucide-angular';\r
+@NgModule({
+  imports: [
+    LucideAngularModule.pick({ ${pascalCase} })
+  ],
+})
+
+// app.component.html
+<lucide-icon name="${name}"></lucide-icon>
+`,
+          metastring: '{2,6}',
+        },
+      ],
+      breakpoint: 'base',
+    },
+    font: {
+      title: 'Icon Font',
+      codes: [
+        {
+          language: 'css',
+          code: `<style>
+@import ('~lucide-static/font/Lucide.css')
+</style>
+
+<div class="icon-${name}"></div>
+`,
+        },
+      ],
+      breakpoint: 'md',
+    },
+    flutter: {
+      title: 'Flutter',
+      codes: [
+        {
+          language: 'javascript',
+          code: `Icon(LucideIcons.${name});
+`,
+          metastring: '{1}',
+        },
+      ],
+      breakpoint: 'sm',
+    },
+  };
+}
+
+export default function useIconCodeExamples(name: string) {
+  return computed(() => getIconCodes(name))
+}
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 240c8e582..ca0193708 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -11,6 +11,7 @@ export function getAllCategoryFiles() {
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  cleanUrls: true,
   title: "Lucide",
   description: "Beautiful & consistent icon toolkit made by the community.",
   outDir: '.vercel/output/static',
@@ -25,7 +26,7 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Icons', link: '/icons/index.md' },
-      { text: 'Documentation', link: '/guide/' },
+      { text: 'Guide', link: '/guide/' },
       { text: 'License', link: '/license' },
     ],
 
diff --git a/site/src/components/SvgPreview/index.tsx b/docs/.vitepress/lib/SvgPreview/index.tsx
similarity index 100%
rename from site/src/components/SvgPreview/index.tsx
rename to docs/.vitepress/lib/SvgPreview/index.tsx
diff --git a/site/src/components/SvgPreview/types.ts b/docs/.vitepress/lib/SvgPreview/types.ts
similarity index 100%
rename from site/src/components/SvgPreview/types.ts
rename to docs/.vitepress/lib/SvgPreview/types.ts
diff --git a/site/src/components/SvgPreview/utils.ts b/docs/.vitepress/lib/SvgPreview/utils.ts
similarity index 100%
rename from site/src/components/SvgPreview/utils.ts
rename to docs/.vitepress/lib/SvgPreview/utils.ts
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index d4d43021b..90568194f 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -4,6 +4,14 @@
   --vp-c-brand-lighter: #F89191;
   --vp-c-brand-dark: #DC5A5A;
   --vp-c-brand-darker: #C45050;
+
+  --vp-c-bg-alt-up: #fff;
+  --vp-c-bg-alt-down: #fff;
+}
+
+.dark {
+  --vp-c-bg-alt-up: #1B1B1D;
+  --vp-c-bg-alt-down: #0F0F10;
 }
 
 .VPNavBarTitle .logo {
@@ -14,9 +22,9 @@
   font-size: 21px;
 }
 
-/* .VPHomeHero > .container {
-  flex-direction: column-reverse;
-} */
+.VPHomeHero > .container {
+  gap: 24px;
+}
 
 .VPHomeHero .image-container {
   transform: none;
@@ -43,10 +51,36 @@
   justify-content: flex-end;
 }
 
+.VPHomeHero .container .image-bg {
+  display: none;
+}
+
+
+
+.vp-doc[class*=" _icons_"] > div {
+  max-width: 100%;
+}
+
+.VPDoc:has(.vp-doc[class*=" _icons_"]) > .container > .content{
+  padding-right: 0;
+  padding-left: 0;
+}
+@media (min-width: 720px) {
+  .vp-doc[class^="_icons_"], .vp-doc[class*=" _icons_"] {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    gap: 24px;
+    align-items: flex-start;
+  }
+}
+
 @media (min-width: 960px) {
+
   .VPHomeHero .container .image {
     order: 1;
-    margin-top: auto;
+    margin-bottom: auto;
+    margin-top: 0;
+    position: relative;
   }
 }
 
diff --git a/docs/.vitepress/vercel.json b/docs/.vitepress/vercel.json
new file mode 100644
index 000000000..831dfac3e
--- /dev/null
+++ b/docs/.vitepress/vercel.json
@@ -0,0 +1,10 @@
+{
+  "cleanUrls" : true,
+  "redirects": [
+    {
+      "source": "/icon/:path*",
+      "destination":"/icons/:path*",
+      "permanent": true
+    }
+  ]
+}
diff --git a/docs/guide/installation.md b/docs/guide/installation.md
index 416e23644..15b8ba3d6 100644
--- a/docs/guide/installation.md
+++ b/docs/guide/installation.md
@@ -8,15 +8,21 @@ title: Installation
 
 Implementation of the lucide icon library for web applications.
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide
+```
+
+```sh [yarn]
+yarn add lucide
+```
+
+```sh [npm]
 npm install lucide
 ```
 
-or
-
-```sh
-yarn add lucide
-```
+:::
 
 For more details, see the [documentation](packages/lucide.md).
 
@@ -24,16 +30,22 @@ For more details, see the [documentation](packages/lucide.md).
 
 Implementation of the lucide icon library for react applications.
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-react
+```
+
+```sh [yarn]
 yarn add lucide-react
 ```
 
-or
-
-```sh
+```sh [npm]
 npm install lucide-react
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-react.md).
 
 ## Vue 2
diff --git a/docs/iconMetaData.ts b/docs/iconMetaData.ts
new file mode 100644
index 000000000..30f2aa710
--- /dev/null
+++ b/docs/iconMetaData.ts
@@ -0,0 +1,936 @@
+export { default as accessibility } from '../icons/accessibility.json';
+export { default as activity } from '../icons/activity.json';
+export { default as airVent } from '../icons/air-vent.json';
+export { default as airplay } from '../icons/airplay.json';
+export { default as alarmCheck } from '../icons/alarm-check.json';
+export { default as alarmClockOff } from '../icons/alarm-clock-off.json';
+export { default as alarmClock } from '../icons/alarm-clock.json';
+export { default as alarmMinus } from '../icons/alarm-minus.json';
+export { default as alarmPlus } from '../icons/alarm-plus.json';
+export { default as album } from '../icons/album.json';
+export { default as alertCircle } from '../icons/alert-circle.json';
+export { default as alertOctagon } from '../icons/alert-octagon.json';
+export { default as alertTriangle } from '../icons/alert-triangle.json';
+export { default as alignCenterHorizontal } from '../icons/align-center-horizontal.json';
+export { default as alignCenterVertical } from '../icons/align-center-vertical.json';
+export { default as alignCenter } from '../icons/align-center.json';
+export { default as alignEndHorizontal } from '../icons/align-end-horizontal.json';
+export { default as alignEndVertical } from '../icons/align-end-vertical.json';
+export { default as alignHorizontalDistributeCenter } from '../icons/align-horizontal-distribute-center.json';
+export { default as alignHorizontalDistributeEnd } from '../icons/align-horizontal-distribute-end.json';
+export { default as alignHorizontalDistributeStart } from '../icons/align-horizontal-distribute-start.json';
+export { default as alignHorizontalJustifyCenter } from '../icons/align-horizontal-justify-center.json';
+export { default as alignHorizontalJustifyEnd } from '../icons/align-horizontal-justify-end.json';
+export { default as alignHorizontalJustifyStart } from '../icons/align-horizontal-justify-start.json';
+export { default as alignHorizontalSpaceAround } from '../icons/align-horizontal-space-around.json';
+export { default as alignHorizontalSpaceBetween } from '../icons/align-horizontal-space-between.json';
+export { default as alignJustify } from '../icons/align-justify.json';
+export { default as alignLeft } from '../icons/align-left.json';
+export { default as alignRight } from '../icons/align-right.json';
+export { default as alignStartHorizontal } from '../icons/align-start-horizontal.json';
+export { default as alignStartVertical } from '../icons/align-start-vertical.json';
+export { default as alignVerticalDistributeCenter } from '../icons/align-vertical-distribute-center.json';
+export { default as alignVerticalDistributeEnd } from '../icons/align-vertical-distribute-end.json';
+export { default as alignVerticalDistributeStart } from '../icons/align-vertical-distribute-start.json';
+export { default as alignVerticalJustifyCenter } from '../icons/align-vertical-justify-center.json';
+export { default as alignVerticalJustifyEnd } from '../icons/align-vertical-justify-end.json';
+export { default as alignVerticalJustifyStart } from '../icons/align-vertical-justify-start.json';
+export { default as alignVerticalSpaceAround } from '../icons/align-vertical-space-around.json';
+export { default as alignVerticalSpaceBetween } from '../icons/align-vertical-space-between.json';
+export { default as anchor } from '../icons/anchor.json';
+export { default as angry } from '../icons/angry.json';
+export { default as annoyed } from '../icons/annoyed.json';
+export { default as aperture } from '../icons/aperture.json';
+export { default as apple } from '../icons/apple.json';
+export { default as archiveRestore } from '../icons/archive-restore.json';
+export { default as archive } from '../icons/archive.json';
+export { default as armchair } from '../icons/armchair.json';
+export { default as arrowBigDown } from '../icons/arrow-big-down.json';
+export { default as arrowBigLeft } from '../icons/arrow-big-left.json';
+export { default as arrowBigRight } from '../icons/arrow-big-right.json';
+export { default as arrowBigUp } from '../icons/arrow-big-up.json';
+export { default as arrowDownCircle } from '../icons/arrow-down-circle.json';
+export { default as arrowDownLeft } from '../icons/arrow-down-left.json';
+export { default as arrowDownRight } from '../icons/arrow-down-right.json';
+export { default as arrowDown } from '../icons/arrow-down.json';
+export { default as arrowLeftCircle } from '../icons/arrow-left-circle.json';
+export { default as arrowLeftRight } from '../icons/arrow-left-right.json';
+export { default as arrowLeft } from '../icons/arrow-left.json';
+export { default as arrowRightCircle } from '../icons/arrow-right-circle.json';
+export { default as arrowRight } from '../icons/arrow-right.json';
+export { default as arrowUpCircle } from '../icons/arrow-up-circle.json';
+export { default as arrowUpDown } from '../icons/arrow-up-down.json';
+export { default as arrowUpLeft } from '../icons/arrow-up-left.json';
+export { default as arrowUpRight } from '../icons/arrow-up-right.json';
+export { default as arrowUp } from '../icons/arrow-up.json';
+export { default as asterisk } from '../icons/asterisk.json';
+export { default as atSign } from '../icons/at-sign.json';
+export { default as atom } from '../icons/atom.json';
+export { default as award } from '../icons/award.json';
+export { default as axe } from '../icons/axe.json';
+export { default as axis3d } from '../icons/axis-3d.json';
+export { default as baby } from '../icons/baby.json';
+export { default as backpack } from '../icons/backpack.json';
+export { default as baggageClaim } from '../icons/baggage-claim.json';
+export { default as banana } from '../icons/banana.json';
+export { default as banknote } from '../icons/banknote.json';
+export { default as barChart2 } from '../icons/bar-chart-2.json';
+export { default as barChart3 } from '../icons/bar-chart-3.json';
+export { default as barChart4 } from '../icons/bar-chart-4.json';
+export { default as barChartHorizontal } from '../icons/bar-chart-horizontal.json';
+export { default as barChart } from '../icons/bar-chart.json';
+export { default as baseline } from '../icons/baseline.json';
+export { default as bath } from '../icons/bath.json';
+export { default as batteryCharging } from '../icons/battery-charging.json';
+export { default as batteryFull } from '../icons/battery-full.json';
+export { default as batteryLow } from '../icons/battery-low.json';
+export { default as batteryMedium } from '../icons/battery-medium.json';
+export { default as batteryWarning } from '../icons/battery-warning.json';
+export { default as battery } from '../icons/battery.json';
+export { default as beaker } from '../icons/beaker.json';
+export { default as beanOff } from '../icons/bean-off.json';
+export { default as bean } from '../icons/bean.json';
+export { default as bedDouble } from '../icons/bed-double.json';
+export { default as bedSingle } from '../icons/bed-single.json';
+export { default as bed } from '../icons/bed.json';
+export { default as beef } from '../icons/beef.json';
+export { default as beer } from '../icons/beer.json';
+export { default as bellMinus } from '../icons/bell-minus.json';
+export { default as bellOff } from '../icons/bell-off.json';
+export { default as bellPlus } from '../icons/bell-plus.json';
+export { default as bellRing } from '../icons/bell-ring.json';
+export { default as bell } from '../icons/bell.json';
+export { default as bike } from '../icons/bike.json';
+export { default as binary } from '../icons/binary.json';
+export { default as bird } from '../icons/bird.json';
+export { default as bitcoin } from '../icons/bitcoin.json';
+export { default as blinds } from '../icons/blinds.json';
+export { default as bluetoothConnected } from '../icons/bluetooth-connected.json';
+export { default as bluetoothOff } from '../icons/bluetooth-off.json';
+export { default as bluetoothSearching } from '../icons/bluetooth-searching.json';
+export { default as bluetooth } from '../icons/bluetooth.json';
+export { default as bold } from '../icons/bold.json';
+export { default as bomb } from '../icons/bomb.json';
+export { default as bone } from '../icons/bone.json';
+export { default as bookOpenCheck } from '../icons/book-open-check.json';
+export { default as bookOpen } from '../icons/book-open.json';
+export { default as book } from '../icons/book.json';
+export { default as bookmarkMinus } from '../icons/bookmark-minus.json';
+export { default as bookmarkPlus } from '../icons/bookmark-plus.json';
+export { default as bookmark } from '../icons/bookmark.json';
+export { default as bot } from '../icons/bot.json';
+export { default as boxSelect } from '../icons/box-select.json';
+export { default as box } from '../icons/box.json';
+export { default as boxes } from '../icons/boxes.json';
+export { default as brainCircuit } from '../icons/brain-circuit.json';
+export { default as brainCog } from '../icons/brain-cog.json';
+export { default as brain } from '../icons/brain.json';
+export { default as briefcase } from '../icons/briefcase.json';
+export { default as brush } from '../icons/brush.json';
+export { default as bug } from '../icons/bug.json';
+export { default as building2 } from '../icons/building-2.json';
+export { default as building } from '../icons/building.json';
+export { default as bus } from '../icons/bus.json';
+export { default as cake } from '../icons/cake.json';
+export { default as calculator } from '../icons/calculator.json';
+export { default as calendarCheck2 } from '../icons/calendar-check-2.json';
+export { default as calendarCheck } from '../icons/calendar-check.json';
+export { default as calendarClock } from '../icons/calendar-clock.json';
+export { default as calendarDays } from '../icons/calendar-days.json';
+export { default as calendarHeart } from '../icons/calendar-heart.json';
+export { default as calendarMinus } from '../icons/calendar-minus.json';
+export { default as calendarOff } from '../icons/calendar-off.json';
+export { default as calendarPlus } from '../icons/calendar-plus.json';
+export { default as calendarRange } from '../icons/calendar-range.json';
+export { default as calendarSearch } from '../icons/calendar-search.json';
+export { default as calendarX2 } from '../icons/calendar-x-2.json';
+export { default as calendarX } from '../icons/calendar-x.json';
+export { default as calendar } from '../icons/calendar.json';
+export { default as cameraOff } from '../icons/camera-off.json';
+export { default as camera } from '../icons/camera.json';
+export { default as candyOff } from '../icons/candy-off.json';
+export { default as candy } from '../icons/candy.json';
+export { default as car } from '../icons/car.json';
+export { default as carrot } from '../icons/carrot.json';
+export { default as caseLower } from '../icons/case-lower.json';
+export { default as caseSensitive } from '../icons/case-sensitive.json';
+export { default as caseUpper } from '../icons/case-upper.json';
+export { default as cast } from '../icons/cast.json';
+export { default as castle } from '../icons/castle.json';
+export { default as cat } from '../icons/cat.json';
+export { default as checkCheck } from '../icons/check-check.json';
+export { default as checkCircle2 } from '../icons/check-circle-2.json';
+export { default as checkCircle } from '../icons/check-circle.json';
+export { default as checkSquare } from '../icons/check-square.json';
+export { default as check } from '../icons/check.json';
+export { default as chefHat } from '../icons/chef-hat.json';
+export { default as cherry } from '../icons/cherry.json';
+export { default as chevronDownSquare } from '../icons/chevron-down-square.json';
+export { default as chevronDown } from '../icons/chevron-down.json';
+export { default as chevronFirst } from '../icons/chevron-first.json';
+export { default as chevronLast } from '../icons/chevron-last.json';
+export { default as chevronLeftSquare } from '../icons/chevron-left-square.json';
+export { default as chevronLeft } from '../icons/chevron-left.json';
+export { default as chevronRightSquare } from '../icons/chevron-right-square.json';
+export { default as chevronRight } from '../icons/chevron-right.json';
+export { default as chevronUpSquare } from '../icons/chevron-up-square.json';
+export { default as chevronUp } from '../icons/chevron-up.json';
+export { default as chevronsDownUp } from '../icons/chevrons-down-up.json';
+export { default as chevronsDown } from '../icons/chevrons-down.json';
+export { default as chevronsLeftRight } from '../icons/chevrons-left-right.json';
+export { default as chevronsLeft } from '../icons/chevrons-left.json';
+export { default as chevronsRightLeft } from '../icons/chevrons-right-left.json';
+export { default as chevronsRight } from '../icons/chevrons-right.json';
+export { default as chevronsUpDown } from '../icons/chevrons-up-down.json';
+export { default as chevronsUp } from '../icons/chevrons-up.json';
+export { default as chrome } from '../icons/chrome.json';
+export { default as church } from '../icons/church.json';
+export { default as cigaretteOff } from '../icons/cigarette-off.json';
+export { default as cigarette } from '../icons/cigarette.json';
+export { default as circleDot } from '../icons/circle-dot.json';
+export { default as circleEllipsis } from '../icons/circle-ellipsis.json';
+export { default as circleSlashed } from '../icons/circle-slashed.json';
+export { default as circle } from '../icons/circle.json';
+export { default as citrus } from '../icons/citrus.json';
+export { default as clapperboard } from '../icons/clapperboard.json';
+export { default as clipboardCheck } from '../icons/clipboard-check.json';
+export { default as clipboardCopy } from '../icons/clipboard-copy.json';
+export { default as clipboardEdit } from '../icons/clipboard-edit.json';
+export { default as clipboardList } from '../icons/clipboard-list.json';
+export { default as clipboardSignature } from '../icons/clipboard-signature.json';
+export { default as clipboardType } from '../icons/clipboard-type.json';
+export { default as clipboardX } from '../icons/clipboard-x.json';
+export { default as clipboard } from '../icons/clipboard.json';
+export { default as clock1 } from '../icons/clock-1.json';
+export { default as clock10 } from '../icons/clock-10.json';
+export { default as clock11 } from '../icons/clock-11.json';
+export { default as clock12 } from '../icons/clock-12.json';
+export { default as clock2 } from '../icons/clock-2.json';
+export { default as clock3 } from '../icons/clock-3.json';
+export { default as clock4 } from '../icons/clock-4.json';
+export { default as clock5 } from '../icons/clock-5.json';
+export { default as clock6 } from '../icons/clock-6.json';
+export { default as clock7 } from '../icons/clock-7.json';
+export { default as clock8 } from '../icons/clock-8.json';
+export { default as clock9 } from '../icons/clock-9.json';
+export { default as clock } from '../icons/clock.json';
+export { default as cloudCog } from '../icons/cloud-cog.json';
+export { default as cloudDrizzle } from '../icons/cloud-drizzle.json';
+export { default as cloudFog } from '../icons/cloud-fog.json';
+export { default as cloudHail } from '../icons/cloud-hail.json';
+export { default as cloudLightning } from '../icons/cloud-lightning.json';
+export { default as cloudMoonRain } from '../icons/cloud-moon-rain.json';
+export { default as cloudMoon } from '../icons/cloud-moon.json';
+export { default as cloudOff } from '../icons/cloud-off.json';
+export { default as cloudRainWind } from '../icons/cloud-rain-wind.json';
+export { default as cloudRain } from '../icons/cloud-rain.json';
+export { default as cloudSnow } from '../icons/cloud-snow.json';
+export { default as cloudSunRain } from '../icons/cloud-sun-rain.json';
+export { default as cloudSun } from '../icons/cloud-sun.json';
+export { default as cloud } from '../icons/cloud.json';
+export { default as cloudy } from '../icons/cloudy.json';
+export { default as clover } from '../icons/clover.json';
+export { default as code2 } from '../icons/code-2.json';
+export { default as code } from '../icons/code.json';
+export { default as codepen } from '../icons/codepen.json';
+export { default as codesandbox } from '../icons/codesandbox.json';
+export { default as coffee } from '../icons/coffee.json';
+export { default as cog } from '../icons/cog.json';
+export { default as coins } from '../icons/coins.json';
+export { default as columns } from '../icons/columns.json';
+export { default as command } from '../icons/command.json';
+export { default as compass } from '../icons/compass.json';
+export { default as component } from '../icons/component.json';
+export { default as conciergeBell } from '../icons/concierge-bell.json';
+export { default as construction } from '../icons/construction.json';
+export { default as contact } from '../icons/contact.json';
+export { default as contrast } from '../icons/contrast.json';
+export { default as cookie } from '../icons/cookie.json';
+export { default as copy } from '../icons/copy.json';
+export { default as copyleft } from '../icons/copyleft.json';
+export { default as copyright } from '../icons/copyright.json';
+export { default as cornerDownLeft } from '../icons/corner-down-left.json';
+export { default as cornerDownRight } from '../icons/corner-down-right.json';
+export { default as cornerLeftDown } from '../icons/corner-left-down.json';
+export { default as cornerLeftUp } from '../icons/corner-left-up.json';
+export { default as cornerRightDown } from '../icons/corner-right-down.json';
+export { default as cornerRightUp } from '../icons/corner-right-up.json';
+export { default as cornerUpLeft } from '../icons/corner-up-left.json';
+export { default as cornerUpRight } from '../icons/corner-up-right.json';
+export { default as cpu } from '../icons/cpu.json';
+export { default as creativeCommons } from '../icons/creative-commons.json';
+export { default as creditCard } from '../icons/credit-card.json';
+export { default as croissant } from '../icons/croissant.json';
+export { default as crop } from '../icons/crop.json';
+export { default as cross } from '../icons/cross.json';
+export { default as crosshair } from '../icons/crosshair.json';
+export { default as crown } from '../icons/crown.json';
+export { default as cupSoda } from '../icons/cup-soda.json';
+export { default as curlyBraces } from '../icons/curly-braces.json';
+export { default as currency } from '../icons/currency.json';
+export { default as databaseBackup } from '../icons/database-backup.json';
+export { default as database } from '../icons/database.json';
+export { default as delete } from '../icons/delete.json';
+export { default as diamond } from '../icons/diamond.json';
+export { default as dice1 } from '../icons/dice-1.json';
+export { default as dice2 } from '../icons/dice-2.json';
+export { default as dice3 } from '../icons/dice-3.json';
+export { default as dice4 } from '../icons/dice-4.json';
+export { default as dice5 } from '../icons/dice-5.json';
+export { default as dice6 } from '../icons/dice-6.json';
+export { default as dices } from '../icons/dices.json';
+export { default as diff } from '../icons/diff.json';
+export { default as disc } from '../icons/disc.json';
+export { default as divideCircle } from '../icons/divide-circle.json';
+export { default as divideSquare } from '../icons/divide-square.json';
+export { default as divide } from '../icons/divide.json';
+export { default as dnaOff } from '../icons/dna-off.json';
+export { default as dna } from '../icons/dna.json';
+export { default as dog } from '../icons/dog.json';
+export { default as dollarSign } from '../icons/dollar-sign.json';
+export { default as doorClosed } from '../icons/door-closed.json';
+export { default as doorOpen } from '../icons/door-open.json';
+export { default as downloadCloud } from '../icons/download-cloud.json';
+export { default as download } from '../icons/download.json';
+export { default as dribbble } from '../icons/dribbble.json';
+export { default as droplet } from '../icons/droplet.json';
+export { default as droplets } from '../icons/droplets.json';
+export { default as drumstick } from '../icons/drumstick.json';
+export { default as dumbbell } from '../icons/dumbbell.json';
+export { default as earOff } from '../icons/ear-off.json';
+export { default as ear } from '../icons/ear.json';
+export { default as edit2 } from '../icons/edit-2.json';
+export { default as edit3 } from '../icons/edit-3.json';
+export { default as edit } from '../icons/edit.json';
+export { default as eggFried } from '../icons/egg-fried.json';
+export { default as eggOff } from '../icons/egg-off.json';
+export { default as egg } from '../icons/egg.json';
+export { default as equalNot } from '../icons/equal-not.json';
+export { default as equal } from '../icons/equal.json';
+export { default as eraser } from '../icons/eraser.json';
+export { default as euro } from '../icons/euro.json';
+export { default as expand } from '../icons/expand.json';
+export { default as externalLink } from '../icons/external-link.json';
+export { default as eyeOff } from '../icons/eye-off.json';
+export { default as eye } from '../icons/eye.json';
+export { default as facebook } from '../icons/facebook.json';
+export { default as factory } from '../icons/factory.json';
+export { default as fan } from '../icons/fan.json';
+export { default as fastForward } from '../icons/fast-forward.json';
+export { default as feather } from '../icons/feather.json';
+export { default as figma } from '../icons/figma.json';
+export { default as fileArchive } from '../icons/file-archive.json';
+export { default as fileAudio2 } from '../icons/file-audio-2.json';
+export { default as fileAudio } from '../icons/file-audio.json';
+export { default as fileAxis3d } from '../icons/file-axis-3d.json';
+export { default as fileBadge2 } from '../icons/file-badge-2.json';
+export { default as fileBadge } from '../icons/file-badge.json';
+export { default as fileBarChart2 } from '../icons/file-bar-chart-2.json';
+export { default as fileBarChart } from '../icons/file-bar-chart.json';
+export { default as fileBox } from '../icons/file-box.json';
+export { default as fileCheck2 } from '../icons/file-check-2.json';
+export { default as fileCheck } from '../icons/file-check.json';
+export { default as fileClock } from '../icons/file-clock.json';
+export { default as fileCode } from '../icons/file-code.json';
+export { default as fileCog2 } from '../icons/file-cog-2.json';
+export { default as fileCog } from '../icons/file-cog.json';
+export { default as fileDiff } from '../icons/file-diff.json';
+export { default as fileDigit } from '../icons/file-digit.json';
+export { default as fileDown } from '../icons/file-down.json';
+export { default as fileEdit } from '../icons/file-edit.json';
+export { default as fileHeart } from '../icons/file-heart.json';
+export { default as fileImage } from '../icons/file-image.json';
+export { default as fileInput } from '../icons/file-input.json';
+export { default as fileJson2 } from '../icons/file-json-2.json';
+export { default as fileJson } from '../icons/file-json.json';
+export { default as fileKey2 } from '../icons/file-key-2.json';
+export { default as fileKey } from '../icons/file-key.json';
+export { default as fileLineChart } from '../icons/file-line-chart.json';
+export { default as fileLock2 } from '../icons/file-lock-2.json';
+export { default as fileLock } from '../icons/file-lock.json';
+export { default as fileMinus2 } from '../icons/file-minus-2.json';
+export { default as fileMinus } from '../icons/file-minus.json';
+export { default as fileOutput } from '../icons/file-output.json';
+export { default as filePieChart } from '../icons/file-pie-chart.json';
+export { default as filePlus2 } from '../icons/file-plus-2.json';
+export { default as filePlus } from '../icons/file-plus.json';
+export { default as fileQuestion } from '../icons/file-question.json';
+export { default as fileScan } from '../icons/file-scan.json';
+export { default as fileSearch2 } from '../icons/file-search-2.json';
+export { default as fileSearch } from '../icons/file-search.json';
+export { default as fileSignature } from '../icons/file-signature.json';
+export { default as fileSpreadsheet } from '../icons/file-spreadsheet.json';
+export { default as fileSymlink } from '../icons/file-symlink.json';
+export { default as fileTerminal } from '../icons/file-terminal.json';
+export { default as fileText } from '../icons/file-text.json';
+export { default as fileType2 } from '../icons/file-type-2.json';
+export { default as fileType } from '../icons/file-type.json';
+export { default as fileUp } from '../icons/file-up.json';
+export { default as fileVideo2 } from '../icons/file-video-2.json';
+export { default as fileVideo } from '../icons/file-video.json';
+export { default as fileVolume2 } from '../icons/file-volume-2.json';
+export { default as fileVolume } from '../icons/file-volume.json';
+export { default as fileWarning } from '../icons/file-warning.json';
+export { default as fileX2 } from '../icons/file-x-2.json';
+export { default as fileX } from '../icons/file-x.json';
+export { default as file } from '../icons/file.json';
+export { default as files } from '../icons/files.json';
+export { default as film } from '../icons/film.json';
+export { default as filterX } from '../icons/filter-x.json';
+export { default as filter } from '../icons/filter.json';
+export { default as fingerprint } from '../icons/fingerprint.json';
+export { default as fishOff } from '../icons/fish-off.json';
+export { default as fish } from '../icons/fish.json';
+export { default as flagOff } from '../icons/flag-off.json';
+export { default as flagTriangleLeft } from '../icons/flag-triangle-left.json';
+export { default as flagTriangleRight } from '../icons/flag-triangle-right.json';
+export { default as flag } from '../icons/flag.json';
+export { default as flame } from '../icons/flame.json';
+export { default as flashlightOff } from '../icons/flashlight-off.json';
+export { default as flashlight } from '../icons/flashlight.json';
+export { default as flaskConicalOff } from '../icons/flask-conical-off.json';
+export { default as flaskConical } from '../icons/flask-conical.json';
+export { default as flaskRound } from '../icons/flask-round.json';
+export { default as flipHorizontal2 } from '../icons/flip-horizontal-2.json';
+export { default as flipHorizontal } from '../icons/flip-horizontal.json';
+export { default as flipVertical2 } from '../icons/flip-vertical-2.json';
+export { default as flipVertical } from '../icons/flip-vertical.json';
+export { default as flower2 } from '../icons/flower-2.json';
+export { default as flower } from '../icons/flower.json';
+export { default as focus } from '../icons/focus.json';
+export { default as folderArchive } from '../icons/folder-archive.json';
+export { default as folderCheck } from '../icons/folder-check.json';
+export { default as folderClock } from '../icons/folder-clock.json';
+export { default as folderClosed } from '../icons/folder-closed.json';
+export { default as folderCog2 } from '../icons/folder-cog-2.json';
+export { default as folderCog } from '../icons/folder-cog.json';
+export { default as folderDown } from '../icons/folder-down.json';
+export { default as folderEdit } from '../icons/folder-edit.json';
+export { default as folderHeart } from '../icons/folder-heart.json';
+export { default as folderInput } from '../icons/folder-input.json';
+export { default as folderKey } from '../icons/folder-key.json';
+export { default as folderLock } from '../icons/folder-lock.json';
+export { default as folderMinus } from '../icons/folder-minus.json';
+export { default as folderOpen } from '../icons/folder-open.json';
+export { default as folderOutput } from '../icons/folder-output.json';
+export { default as folderPlus } from '../icons/folder-plus.json';
+export { default as folderSearch2 } from '../icons/folder-search-2.json';
+export { default as folderSearch } from '../icons/folder-search.json';
+export { default as folderSymlink } from '../icons/folder-symlink.json';
+export { default as folderTree } from '../icons/folder-tree.json';
+export { default as folderUp } from '../icons/folder-up.json';
+export { default as folderX } from '../icons/folder-x.json';
+export { default as folder } from '../icons/folder.json';
+export { default as folders } from '../icons/folders.json';
+export { default as footprints } from '../icons/footprints.json';
+export { default as forklift } from '../icons/forklift.json';
+export { default as formInput } from '../icons/form-input.json';
+export { default as forward } from '../icons/forward.json';
+export { default as frame } from '../icons/frame.json';
+export { default as framer } from '../icons/framer.json';
+export { default as frown } from '../icons/frown.json';
+export { default as fuel } from '../icons/fuel.json';
+export { default as functionSquare } from '../icons/function-square.json';
+export { default as gamepad2 } from '../icons/gamepad-2.json';
+export { default as gamepad } from '../icons/gamepad.json';
+export { default as gauge } from '../icons/gauge.json';
+export { default as gavel } from '../icons/gavel.json';
+export { default as gem } from '../icons/gem.json';
+export { default as ghost } from '../icons/ghost.json';
+export { default as gift } from '../icons/gift.json';
+export { default as gitBranchPlus } from '../icons/git-branch-plus.json';
+export { default as gitBranch } from '../icons/git-branch.json';
+export { default as gitCommit } from '../icons/git-commit.json';
+export { default as gitCompare } from '../icons/git-compare.json';
+export { default as gitFork } from '../icons/git-fork.json';
+export { default as gitMerge } from '../icons/git-merge.json';
+export { default as gitPullRequestClosed } from '../icons/git-pull-request-closed.json';
+export { default as gitPullRequestDraft } from '../icons/git-pull-request-draft.json';
+export { default as gitPullRequest } from '../icons/git-pull-request.json';
+export { default as github } from '../icons/github.json';
+export { default as gitlab } from '../icons/gitlab.json';
+export { default as glassWater } from '../icons/glass-water.json';
+export { default as glasses } from '../icons/glasses.json';
+export { default as globe2 } from '../icons/globe-2.json';
+export { default as globe } from '../icons/globe.json';
+export { default as grab } from '../icons/grab.json';
+export { default as graduationCap } from '../icons/graduation-cap.json';
+export { default as grape } from '../icons/grape.json';
+export { default as grid } from '../icons/grid.json';
+export { default as gripHorizontal } from '../icons/grip-horizontal.json';
+export { default as gripVertical } from '../icons/grip-vertical.json';
+export { default as grip } from '../icons/grip.json';
+export { default as hammer } from '../icons/hammer.json';
+export { default as handMetal } from '../icons/hand-metal.json';
+export { default as hand } from '../icons/hand.json';
+export { default as hardDrive } from '../icons/hard-drive.json';
+export { default as hardHat } from '../icons/hard-hat.json';
+export { default as hash } from '../icons/hash.json';
+export { default as haze } from '../icons/haze.json';
+export { default as heading1 } from '../icons/heading-1.json';
+export { default as heading2 } from '../icons/heading-2.json';
+export { default as heading3 } from '../icons/heading-3.json';
+export { default as heading4 } from '../icons/heading-4.json';
+export { default as heading5 } from '../icons/heading-5.json';
+export { default as heading6 } from '../icons/heading-6.json';
+export { default as heading } from '../icons/heading.json';
+export { default as headphones } from '../icons/headphones.json';
+export { default as heartCrack } from '../icons/heart-crack.json';
+export { default as heartHandshake } from '../icons/heart-handshake.json';
+export { default as heartOff } from '../icons/heart-off.json';
+export { default as heartPulse } from '../icons/heart-pulse.json';
+export { default as heart } from '../icons/heart.json';
+export { default as helpCircle } from '../icons/help-circle.json';
+export { default as helpingHand } from '../icons/helping-hand.json';
+export { default as hexagon } from '../icons/hexagon.json';
+export { default as highlighter } from '../icons/highlighter.json';
+export { default as history } from '../icons/history.json';
+export { default as home } from '../icons/home.json';
+export { default as hopOff } from '../icons/hop-off.json';
+export { default as hop } from '../icons/hop.json';
+export { default as hotel } from '../icons/hotel.json';
+export { default as hourglass } from '../icons/hourglass.json';
+export { default as iceCream2 } from '../icons/ice-cream-2.json';
+export { default as iceCream } from '../icons/ice-cream.json';
+export { default as imageMinus } from '../icons/image-minus.json';
+export { default as imageOff } from '../icons/image-off.json';
+export { default as imagePlus } from '../icons/image-plus.json';
+export { default as image } from '../icons/image.json';
+export { default as import } from '../icons/import.json';
+export { default as inbox } from '../icons/inbox.json';
+export { default as indent } from '../icons/indent.json';
+export { default as indianRupee } from '../icons/indian-rupee.json';
+export { default as infinity } from '../icons/infinity.json';
+export { default as info } from '../icons/info.json';
+export { default as inspect } from '../icons/inspect.json';
+export { default as instagram } from '../icons/instagram.json';
+export { default as italic } from '../icons/italic.json';
+export { default as japaneseYen } from '../icons/japanese-yen.json';
+export { default as joystick } from '../icons/joystick.json';
+export { default as key } from '../icons/key.json';
+export { default as keyboard } from '../icons/keyboard.json';
+export { default as lampCeiling } from '../icons/lamp-ceiling.json';
+export { default as lampDesk } from '../icons/lamp-desk.json';
+export { default as lampFloor } from '../icons/lamp-floor.json';
+export { default as lampWallDown } from '../icons/lamp-wall-down.json';
+export { default as lampWallUp } from '../icons/lamp-wall-up.json';
+export { default as lamp } from '../icons/lamp.json';
+export { default as landmark } from '../icons/landmark.json';
+export { default as languages } from '../icons/languages.json';
+export { default as laptop2 } from '../icons/laptop-2.json';
+export { default as laptop } from '../icons/laptop.json';
+export { default as lassoSelect } from '../icons/lasso-select.json';
+export { default as lasso } from '../icons/lasso.json';
+export { default as laugh } from '../icons/laugh.json';
+export { default as layers } from '../icons/layers.json';
+export { default as layoutDashboard } from '../icons/layout-dashboard.json';
+export { default as layoutGrid } from '../icons/layout-grid.json';
+export { default as layoutList } from '../icons/layout-list.json';
+export { default as layoutTemplate } from '../icons/layout-template.json';
+export { default as layout } from '../icons/layout.json';
+export { default as leaf } from '../icons/leaf.json';
+export { default as library } from '../icons/library.json';
+export { default as lifeBuoy } from '../icons/life-buoy.json';
+export { default as lightbulbOff } from '../icons/lightbulb-off.json';
+export { default as lightbulb } from '../icons/lightbulb.json';
+export { default as lineChart } from '../icons/line-chart.json';
+export { default as link2Off } from '../icons/link-2-off.json';
+export { default as link2 } from '../icons/link-2.json';
+export { default as link } from '../icons/link.json';
+export { default as linkedin } from '../icons/linkedin.json';
+export { default as listChecks } from '../icons/list-checks.json';
+export { default as listEnd } from '../icons/list-end.json';
+export { default as listMinus } from '../icons/list-minus.json';
+export { default as listMusic } from '../icons/list-music.json';
+export { default as listOrdered } from '../icons/list-ordered.json';
+export { default as listPlus } from '../icons/list-plus.json';
+export { default as listStart } from '../icons/list-start.json';
+export { default as listVideo } from '../icons/list-video.json';
+export { default as listX } from '../icons/list-x.json';
+export { default as list } from '../icons/list.json';
+export { default as loader2 } from '../icons/loader-2.json';
+export { default as loader } from '../icons/loader.json';
+export { default as locateFixed } from '../icons/locate-fixed.json';
+export { default as locateOff } from '../icons/locate-off.json';
+export { default as locate } from '../icons/locate.json';
+export { default as lock } from '../icons/lock.json';
+export { default as logIn } from '../icons/log-in.json';
+export { default as logOut } from '../icons/log-out.json';
+export { default as luggage } from '../icons/luggage.json';
+export { default as magnet } from '../icons/magnet.json';
+export { default as mailCheck } from '../icons/mail-check.json';
+export { default as mailMinus } from '../icons/mail-minus.json';
+export { default as mailOpen } from '../icons/mail-open.json';
+export { default as mailPlus } from '../icons/mail-plus.json';
+export { default as mailQuestion } from '../icons/mail-question.json';
+export { default as mailSearch } from '../icons/mail-search.json';
+export { default as mailWarning } from '../icons/mail-warning.json';
+export { default as mailX } from '../icons/mail-x.json';
+export { default as mail } from '../icons/mail.json';
+export { default as mailbox } from '../icons/mailbox.json';
+export { default as mails } from '../icons/mails.json';
+export { default as mapPinOff } from '../icons/map-pin-off.json';
+export { default as mapPin } from '../icons/map-pin.json';
+export { default as map } from '../icons/map.json';
+export { default as martini } from '../icons/martini.json';
+export { default as maximize2 } from '../icons/maximize-2.json';
+export { default as maximize } from '../icons/maximize.json';
+export { default as medal } from '../icons/medal.json';
+export { default as megaphoneOff } from '../icons/megaphone-off.json';
+export { default as megaphone } from '../icons/megaphone.json';
+export { default as meh } from '../icons/meh.json';
+export { default as menu } from '../icons/menu.json';
+export { default as messageCircle } from '../icons/message-circle.json';
+export { default as messageSquare } from '../icons/message-square.json';
+export { default as mic2 } from '../icons/mic-2.json';
+export { default as micOff } from '../icons/mic-off.json';
+export { default as mic } from '../icons/mic.json';
+export { default as microscope } from '../icons/microscope.json';
+export { default as microwave } from '../icons/microwave.json';
+export { default as milestone } from '../icons/milestone.json';
+export { default as milkOff } from '../icons/milk-off.json';
+export { default as milk } from '../icons/milk.json';
+export { default as minimize2 } from '../icons/minimize-2.json';
+export { default as minimize } from '../icons/minimize.json';
+export { default as minusCircle } from '../icons/minus-circle.json';
+export { default as minusSquare } from '../icons/minus-square.json';
+export { default as minus } from '../icons/minus.json';
+export { default as monitorOff } from '../icons/monitor-off.json';
+export { default as monitorSmartphone } from '../icons/monitor-smartphone.json';
+export { default as monitorSpeaker } from '../icons/monitor-speaker.json';
+export { default as monitor } from '../icons/monitor.json';
+export { default as moon } from '../icons/moon.json';
+export { default as moreHorizontal } from '../icons/more-horizontal.json';
+export { default as moreVertical } from '../icons/more-vertical.json';
+export { default as mountainSnow } from '../icons/mountain-snow.json';
+export { default as mountain } from '../icons/mountain.json';
+export { default as mousePointer2 } from '../icons/mouse-pointer-2.json';
+export { default as mousePointerClick } from '../icons/mouse-pointer-click.json';
+export { default as mousePointer } from '../icons/mouse-pointer.json';
+export { default as mouse } from '../icons/mouse.json';
+export { default as move3d } from '../icons/move-3d.json';
+export { default as moveDiagonal2 } from '../icons/move-diagonal-2.json';
+export { default as moveDiagonal } from '../icons/move-diagonal.json';
+export { default as moveHorizontal } from '../icons/move-horizontal.json';
+export { default as moveVertical } from '../icons/move-vertical.json';
+export { default as move } from '../icons/move.json';
+export { default as music2 } from '../icons/music-2.json';
+export { default as music3 } from '../icons/music-3.json';
+export { default as music4 } from '../icons/music-4.json';
+export { default as music } from '../icons/music.json';
+export { default as navigation2Off } from '../icons/navigation-2-off.json';
+export { default as navigation2 } from '../icons/navigation-2.json';
+export { default as navigationOff } from '../icons/navigation-off.json';
+export { default as navigation } from '../icons/navigation.json';
+export { default as network } from '../icons/network.json';
+export { default as newspaper } from '../icons/newspaper.json';
+export { default as nfc } from '../icons/nfc.json';
+export { default as nutOff } from '../icons/nut-off.json';
+export { default as nut } from '../icons/nut.json';
+export { default as octagon } from '../icons/octagon.json';
+export { default as option } from '../icons/option.json';
+export { default as orbit } from '../icons/orbit.json';
+export { default as outdent } from '../icons/outdent.json';
+export { default as package2 } from '../icons/package-2.json';
+export { default as packageCheck } from '../icons/package-check.json';
+export { default as packageMinus } from '../icons/package-minus.json';
+export { default as packageOpen } from '../icons/package-open.json';
+export { default as packagePlus } from '../icons/package-plus.json';
+export { default as packageSearch } from '../icons/package-search.json';
+export { default as packageX } from '../icons/package-x.json';
+export { default as package } from '../icons/package.json';
+export { default as paintBucket } from '../icons/paint-bucket.json';
+export { default as paintbrush2 } from '../icons/paintbrush-2.json';
+export { default as paintbrush } from '../icons/paintbrush.json';
+export { default as palette } from '../icons/palette.json';
+export { default as palmtree } from '../icons/palmtree.json';
+export { default as paperclip } from '../icons/paperclip.json';
+export { default as parkingCircleOff } from '../icons/parking-circle-off.json';
+export { default as parkingCircle } from '../icons/parking-circle.json';
+export { default as parkingSquareOff } from '../icons/parking-square-off.json';
+export { default as parkingSquare } from '../icons/parking-square.json';
+export { default as partyPopper } from '../icons/party-popper.json';
+export { default as pauseCircle } from '../icons/pause-circle.json';
+export { default as pauseOctagon } from '../icons/pause-octagon.json';
+export { default as pause } from '../icons/pause.json';
+export { default as penTool } from '../icons/pen-tool.json';
+export { default as pencil } from '../icons/pencil.json';
+export { default as percent } from '../icons/percent.json';
+export { default as personStanding } from '../icons/person-standing.json';
+export { default as phoneCall } from '../icons/phone-call.json';
+export { default as phoneForwarded } from '../icons/phone-forwarded.json';
+export { default as phoneIncoming } from '../icons/phone-incoming.json';
+export { default as phoneMissed } from '../icons/phone-missed.json';
+export { default as phoneOff } from '../icons/phone-off.json';
+export { default as phoneOutgoing } from '../icons/phone-outgoing.json';
+export { default as phone } from '../icons/phone.json';
+export { default as pictureInPicture2 } from '../icons/picture-in-picture-2.json';
+export { default as pictureInPicture } from '../icons/picture-in-picture.json';
+export { default as pieChart } from '../icons/pie-chart.json';
+export { default as piggyBank } from '../icons/piggy-bank.json';
+export { default as pilcrow } from '../icons/pilcrow.json';
+export { default as pill } from '../icons/pill.json';
+export { default as pinOff } from '../icons/pin-off.json';
+export { default as pin } from '../icons/pin.json';
+export { default as pipette } from '../icons/pipette.json';
+export { default as pizza } from '../icons/pizza.json';
+export { default as planeLanding } from '../icons/plane-landing.json';
+export { default as planeTakeoff } from '../icons/plane-takeoff.json';
+export { default as plane } from '../icons/plane.json';
+export { default as playCircle } from '../icons/play-circle.json';
+export { default as play } from '../icons/play.json';
+export { default as plug2 } from '../icons/plug-2.json';
+export { default as plugZap } from '../icons/plug-zap.json';
+export { default as plug } from '../icons/plug.json';
+export { default as plusCircle } from '../icons/plus-circle.json';
+export { default as plusSquare } from '../icons/plus-square.json';
+export { default as plus } from '../icons/plus.json';
+export { default as pocket } from '../icons/pocket.json';
+export { default as podcast } from '../icons/podcast.json';
+export { default as pointer } from '../icons/pointer.json';
+export { default as poundSterling } from '../icons/pound-sterling.json';
+export { default as powerOff } from '../icons/power-off.json';
+export { default as power } from '../icons/power.json';
+export { default as printer } from '../icons/printer.json';
+export { default as puzzle } from '../icons/puzzle.json';
+export { default as qrCode } from '../icons/qr-code.json';
+export { default as quote } from '../icons/quote.json';
+export { default as radioReceiver } from '../icons/radio-receiver.json';
+export { default as radio } from '../icons/radio.json';
+export { default as receipt } from '../icons/receipt.json';
+export { default as rectangleHorizontal } from '../icons/rectangle-horizontal.json';
+export { default as rectangleVertical } from '../icons/rectangle-vertical.json';
+export { default as recycle } from '../icons/recycle.json';
+export { default as redo2 } from '../icons/redo-2.json';
+export { default as redo } from '../icons/redo.json';
+export { default as refreshCcw } from '../icons/refresh-ccw.json';
+export { default as refreshCw } from '../icons/refresh-cw.json';
+export { default as refrigerator } from '../icons/refrigerator.json';
+export { default as regex } from '../icons/regex.json';
+export { default as removeFormatting } from '../icons/remove-formatting.json';
+export { default as repeat1 } from '../icons/repeat-1.json';
+export { default as repeat } from '../icons/repeat.json';
+export { default as replaceAll } from '../icons/replace-all.json';
+export { default as replace } from '../icons/replace.json';
+export { default as replyAll } from '../icons/reply-all.json';
+export { default as reply } from '../icons/reply.json';
+export { default as rewind } from '../icons/rewind.json';
+export { default as rocket } from '../icons/rocket.json';
+export { default as rockingChair } from '../icons/rocking-chair.json';
+export { default as rotate3d } from '../icons/rotate-3d.json';
+export { default as rotateCcw } from '../icons/rotate-ccw.json';
+export { default as rotateCw } from '../icons/rotate-cw.json';
+export { default as router } from '../icons/router.json';
+export { default as rss } from '../icons/rss.json';
+export { default as ruler } from '../icons/ruler.json';
+export { default as russianRuble } from '../icons/russian-ruble.json';
+export { default as sailboat } from '../icons/sailboat.json';
+export { default as salad } from '../icons/salad.json';
+export { default as sandwich } from '../icons/sandwich.json';
+export { default as save } from '../icons/save.json';
+export { default as scale3d } from '../icons/scale-3d.json';
+export { default as scale } from '../icons/scale.json';
+export { default as scaling } from '../icons/scaling.json';
+export { default as scanFace } from '../icons/scan-face.json';
+export { default as scanLine } from '../icons/scan-line.json';
+export { default as scan } from '../icons/scan.json';
+export { default as school2 } from '../icons/school-2.json';
+export { default as school } from '../icons/school.json';
+export { default as scissors } from '../icons/scissors.json';
+export { default as screenShareOff } from '../icons/screen-share-off.json';
+export { default as screenShare } from '../icons/screen-share.json';
+export { default as scroll } from '../icons/scroll.json';
+export { default as search } from '../icons/search.json';
+export { default as send } from '../icons/send.json';
+export { default as separatorHorizontal } from '../icons/separator-horizontal.json';
+export { default as separatorVertical } from '../icons/separator-vertical.json';
+export { default as serverCog } from '../icons/server-cog.json';
+export { default as serverCrash } from '../icons/server-crash.json';
+export { default as serverOff } from '../icons/server-off.json';
+export { default as server } from '../icons/server.json';
+export { default as settings2 } from '../icons/settings-2.json';
+export { default as settings } from '../icons/settings.json';
+export { default as share2 } from '../icons/share-2.json';
+export { default as share } from '../icons/share.json';
+export { default as sheet } from '../icons/sheet.json';
+export { default as shieldAlert } from '../icons/shield-alert.json';
+export { default as shieldCheck } from '../icons/shield-check.json';
+export { default as shieldClose } from '../icons/shield-close.json';
+export { default as shieldOff } from '../icons/shield-off.json';
+export { default as shield } from '../icons/shield.json';
+export { default as ship } from '../icons/ship.json';
+export { default as shirt } from '../icons/shirt.json';
+export { default as shoppingBag } from '../icons/shopping-bag.json';
+export { default as shoppingCart } from '../icons/shopping-cart.json';
+export { default as shovel } from '../icons/shovel.json';
+export { default as showerHead } from '../icons/shower-head.json';
+export { default as shrink } from '../icons/shrink.json';
+export { default as shrub } from '../icons/shrub.json';
+export { default as shuffle } from '../icons/shuffle.json';
+export { default as sidebarClose } from '../icons/sidebar-close.json';
+export { default as sidebarOpen } from '../icons/sidebar-open.json';
+export { default as sidebar } from '../icons/sidebar.json';
+export { default as sigma } from '../icons/sigma.json';
+export { default as signalHigh } from '../icons/signal-high.json';
+export { default as signalLow } from '../icons/signal-low.json';
+export { default as signalMedium } from '../icons/signal-medium.json';
+export { default as signalZero } from '../icons/signal-zero.json';
+export { default as signal } from '../icons/signal.json';
+export { default as siren } from '../icons/siren.json';
+export { default as skipBack } from '../icons/skip-back.json';
+export { default as skipForward } from '../icons/skip-forward.json';
+export { default as skull } from '../icons/skull.json';
+export { default as slack } from '../icons/slack.json';
+export { default as slash } from '../icons/slash.json';
+export { default as slice } from '../icons/slice.json';
+export { default as slidersHorizontal } from '../icons/sliders-horizontal.json';
+export { default as sliders } from '../icons/sliders.json';
+export { default as smartphoneCharging } from '../icons/smartphone-charging.json';
+export { default as smartphoneNfc } from '../icons/smartphone-nfc.json';
+export { default as smartphone } from '../icons/smartphone.json';
+export { default as smilePlus } from '../icons/smile-plus.json';
+export { default as smile } from '../icons/smile.json';
+export { default as snowflake } from '../icons/snowflake.json';
+export { default as sofa } from '../icons/sofa.json';
+export { default as sortAsc } from '../icons/sort-asc.json';
+export { default as sortDesc } from '../icons/sort-desc.json';
+export { default as soup } from '../icons/soup.json';
+export { default as space } from '../icons/space.json';
+export { default as speaker } from '../icons/speaker.json';
+export { default as spline } from '../icons/spline.json';
+export { default as splitSquareHorizontal } from '../icons/split-square-horizontal.json';
+export { default as splitSquareVertical } from '../icons/split-square-vertical.json';
+export { default as sprout } from '../icons/sprout.json';
+export { default as square } from '../icons/square.json';
+export { default as stamp } from '../icons/stamp.json';
+export { default as starHalf } from '../icons/star-half.json';
+export { default as starOff } from '../icons/star-off.json';
+export { default as star } from '../icons/star.json';
+export { default as stethoscope } from '../icons/stethoscope.json';
+export { default as sticker } from '../icons/sticker.json';
+export { default as stickyNote } from '../icons/sticky-note.json';
+export { default as stopCircle } from '../icons/stop-circle.json';
+export { default as store } from '../icons/store.json';
+export { default as stretchHorizontal } from '../icons/stretch-horizontal.json';
+export { default as stretchVertical } from '../icons/stretch-vertical.json';
+export { default as strikethrough } from '../icons/strikethrough.json';
+export { default as subscript } from '../icons/subscript.json';
+export { default as subtitles } from '../icons/subtitles.json';
+export { default as sunDim } from '../icons/sun-dim.json';
+export { default as sunMedium } from '../icons/sun-medium.json';
+export { default as sunMoon } from '../icons/sun-moon.json';
+export { default as sunSnow } from '../icons/sun-snow.json';
+export { default as sun } from '../icons/sun.json';
+export { default as sunrise } from '../icons/sunrise.json';
+export { default as sunset } from '../icons/sunset.json';
+export { default as superscript } from '../icons/superscript.json';
+export { default as swissFranc } from '../icons/swiss-franc.json';
+export { default as switchCamera } from '../icons/switch-camera.json';
+export { default as sword } from '../icons/sword.json';
+export { default as swords } from '../icons/swords.json';
+export { default as syringe } from '../icons/syringe.json';
+export { default as table2 } from '../icons/table-2.json';
+export { default as table } from '../icons/table.json';
+export { default as tablet } from '../icons/tablet.json';
+export { default as tablets } from '../icons/tablets.json';
+export { default as tag } from '../icons/tag.json';
+export { default as tags } from '../icons/tags.json';
+export { default as target } from '../icons/target.json';
+export { default as tent } from '../icons/tent.json';
+export { default as terminalSquare } from '../icons/terminal-square.json';
+export { default as terminal } from '../icons/terminal.json';
+export { default as textCursorInput } from '../icons/text-cursor-input.json';
+export { default as textCursor } from '../icons/text-cursor.json';
+export { default as textSelection } from '../icons/text-selection.json';
+export { default as thermometerSnowflake } from '../icons/thermometer-snowflake.json';
+export { default as thermometerSun } from '../icons/thermometer-sun.json';
+export { default as thermometer } from '../icons/thermometer.json';
+export { default as thumbsDown } from '../icons/thumbs-down.json';
+export { default as thumbsUp } from '../icons/thumbs-up.json';
+export { default as ticket } from '../icons/ticket.json';
+export { default as timerOff } from '../icons/timer-off.json';
+export { default as timerReset } from '../icons/timer-reset.json';
+export { default as timer } from '../icons/timer.json';
+export { default as toggleLeft } from '../icons/toggle-left.json';
+export { default as toggleRight } from '../icons/toggle-right.json';
+export { default as tornado } from '../icons/tornado.json';
+export { default as towerControl } from '../icons/tower-control.json';
+export { default as toyBrick } from '../icons/toy-brick.json';
+export { default as train } from '../icons/train.json';
+export { default as trash2 } from '../icons/trash-2.json';
+export { default as trash } from '../icons/trash.json';
+export { default as treeDeciduous } from '../icons/tree-deciduous.json';
+export { default as treePine } from '../icons/tree-pine.json';
+export { default as trees } from '../icons/trees.json';
+export { default as trello } from '../icons/trello.json';
+export { default as trendingDown } from '../icons/trending-down.json';
+export { default as trendingUp } from '../icons/trending-up.json';
+export { default as triangle } from '../icons/triangle.json';
+export { default as trophy } from '../icons/trophy.json';
+export { default as truck } from '../icons/truck.json';
+export { default as tv2 } from '../icons/tv-2.json';
+export { default as tv } from '../icons/tv.json';
+export { default as twitch } from '../icons/twitch.json';
+export { default as twitter } from '../icons/twitter.json';
+export { default as type } from '../icons/type.json';
+export { default as umbrella } from '../icons/umbrella.json';
+export { default as underline } from '../icons/underline.json';
+export { default as undo2 } from '../icons/undo-2.json';
+export { default as undo } from '../icons/undo.json';
+export { default as unlink2 } from '../icons/unlink-2.json';
+export { default as unlink } from '../icons/unlink.json';
+export { default as unlock } from '../icons/unlock.json';
+export { default as uploadCloud } from '../icons/upload-cloud.json';
+export { default as upload } from '../icons/upload.json';
+export { default as usb } from '../icons/usb.json';
+export { default as userCheck } from '../icons/user-check.json';
+export { default as userCog } from '../icons/user-cog.json';
+export { default as userMinus } from '../icons/user-minus.json';
+export { default as userPlus } from '../icons/user-plus.json';
+export { default as userX } from '../icons/user-x.json';
+export { default as user } from '../icons/user.json';
+export { default as users } from '../icons/users.json';
+export { default as utensilsCrossed } from '../icons/utensils-crossed.json';
+export { default as utensils } from '../icons/utensils.json';
+export { default as utilityPole } from '../icons/utility-pole.json';
+export { default as vegan } from '../icons/vegan.json';
+export { default as venetianMask } from '../icons/venetian-mask.json';
+export { default as verified } from '../icons/verified.json';
+export { default as vibrateOff } from '../icons/vibrate-off.json';
+export { default as vibrate } from '../icons/vibrate.json';
+export { default as videoOff } from '../icons/video-off.json';
+export { default as video } from '../icons/video.json';
+export { default as view } from '../icons/view.json';
+export { default as voicemail } from '../icons/voicemail.json';
+export { default as volume1 } from '../icons/volume-1.json';
+export { default as volume2 } from '../icons/volume-2.json';
+export { default as volumeX } from '../icons/volume-x.json';
+export { default as volume } from '../icons/volume.json';
+export { default as vote } from '../icons/vote.json';
+export { default as wallet } from '../icons/wallet.json';
+export { default as wand2 } from '../icons/wand-2.json';
+export { default as wand } from '../icons/wand.json';
+export { default as warehouse } from '../icons/warehouse.json';
+export { default as watch } from '../icons/watch.json';
+export { default as waves } from '../icons/waves.json';
+export { default as webcam } from '../icons/webcam.json';
+export { default as webhook } from '../icons/webhook.json';
+export { default as wheatOff } from '../icons/wheat-off.json';
+export { default as wheat } from '../icons/wheat.json';
+export { default as wholeWord } from '../icons/whole-word.json';
+export { default as wifiOff } from '../icons/wifi-off.json';
+export { default as wifi } from '../icons/wifi.json';
+export { default as wind } from '../icons/wind.json';
+export { default as wineOff } from '../icons/wine-off.json';
+export { default as wine } from '../icons/wine.json';
+export { default as wrapText } from '../icons/wrap-text.json';
+export { default as wrench } from '../icons/wrench.json';
+export { default as xCircle } from '../icons/x-circle.json';
+export { default as xOctagon } from '../icons/x-octagon.json';
+export { default as xSquare } from '../icons/x-square.json';
+export { default as x } from '../icons/x.json';
+export { default as youtube } from '../icons/youtube.json';
+export { default as zapOff } from '../icons/zap-off.json';
+export { default as zap } from '../icons/zap.json';
+export { default as zoomIn } from '../icons/zoom-in.json';
+export { default as zoomOut } from '../icons/zoom-out.json';
diff --git a/docs/icons/[name].md b/docs/icons/[name].md
index 92dbad0c1..73e96d527 100644
--- a/docs/icons/[name].md
+++ b/docs/icons/[name].md
@@ -1,31 +1,72 @@
 ---
 layout: doc
 footer: false
+aside: false
 editLink: false
 next: false
 prev: false
 ---
-
 <script setup>
-import { onMounted, computed } from 'vue'
-import { useData } from 'vitepress'
-// import { data } from './index.data.ts'
 import IconPreview from '../.vitepress/components/IconPreview.vue'
+import IconDetailName from '../.vitepress/components/IconDetailName.vue'
+import useIconCodeExamples from '../.vitepress/composables/useIconCodeExample.ts'
+import { useData } from 'vitepress'
 
-const { params } = useData()
-
-onMounted(() => {
-  console.log(params, 'data')
-})
-const tags = computed(() => {
-  if (!params.tags) return []
-  return params.tags.join(' • ')
-})
-
+  const { params } = useData()
+  const codeExample = useIconCodeExamples(params.value.name)
 </script>
 
+<IconPreview
+  :name="$params.name"
+  :iconNode="$params.iconNode"
+  :class="$style.preview"
+/>
+</div><div>
+<IconDetailName>
+  {{$params.name}}
+</IconDetailName>
 
+::: code-group
 
-# {{ $params.name }} {#name}
+```html-vue [HTML]
+{{codeExample.html.codes[0].code}}
+```
 
-<IconPreview :name="$params.name" :iconNode="$params.iconNode" />
+```jsx-vue [React]
+{{codeExample.react.codes[0].code}}
+```
+
+```vue-vue [Vue]
+{{codeExample.vue.codes[0].code}}
+```
+
+```svelte-vue [Svelte]
+{{codeExample.svelte.codes[0].code}}
+```
+
+```jsx-vue [Preact]
+{{codeExample.preact.codes[0].code}}
+```
+
+```jsx-vue [Solid]
+{{codeExample.solid.codes[0].code}}
+```
+
+```tsx-vue [Angular]
+{{codeExample.angular.codes[0].code}}
+```
+
+```html-vue [Font]
+{{codeExample.font.codes[0].code}}
+```
+
+```html-vue [Flutter]
+{{codeExample.flutter.codes[0].code}}
+```
+:::
+
+<style module>
+  .preview {
+    margin-bottom: 24px;
+  }
+</style>
diff --git a/docs/icons/categories.md b/docs/icons/categories.md
index d5a47eaee..29c12d5eb 100644
--- a/docs/icons/categories.md
+++ b/docs/icons/categories.md
@@ -4,8 +4,7 @@ outline: 2
 outlineTitle: Categories
 ---
 
-<script setup lang="ts">
-import { onMounted, computed } from 'vue'
+<script setup>
 import { data } from './index.data.ts'
 import PageContainer from '../.vitepress/components/PageContainer.vue'
 import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOverview.vue'
@@ -14,6 +13,9 @@ import IconsCategoryOverview from '../.vitepress/components/IconsCategoryOvervie
 
 <div class="VPDoc content">
   <PageContainer>
-    <IconsCategoryOverview :categories="data.categories" :icons="data.icons" />
+    <IconsCategoryOverview
+      :categories="data.categories"
+      :icons="data.icons"
+    />
   </PageContainer>
 </div>
diff --git a/docs/index.md b/docs/index.md
index bc3401674..62f07fa83 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -14,8 +14,8 @@ hero:
       text: View all icons
       link: icons/index
     - theme: alt
-      text: Documentation
-      link: docs/index
+      text: Get Started
+      link: guide/index
     - theme: alt
       text: GitHub
       link: https://github.com/lucide-icons/lucide
diff --git a/docs/license.md b/docs/license.md
new file mode 100644
index 000000000..18562509b
--- /dev/null
+++ b/docs/license.md
@@ -0,0 +1,3 @@
+# Lucide License
+
+<!--@include: ../LICENSE -->
diff --git a/docs/nitro.config.ts b/docs/nitro.config.ts
index dc2e11d22..1518e28ee 100644
--- a/docs/nitro.config.ts
+++ b/docs/nitro.config.ts
@@ -1,5 +1,20 @@
 import { defineNitroConfig } from "nitropack";
+
 export default defineNitroConfig({
   preset: 'vercel-edge',
   srcDir: '.vitepress',
+  routeRules: {
+    '/api/**': { cors: false, swr: true },
+  },
+  esbuild: {
+    options: {
+      include: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.json'],
+      loaders: {
+        '.js': 'js',
+        '.jsx': 'jsx',
+        '.ts': 'ts',
+        '.tsx': 'tsx',
+      }
+    },
+  },
 })
diff --git a/docs/package.json b/docs/package.json
index efd05d48f..fbf4b62a7 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,26 +8,35 @@
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview",
+    "build:iconNodes": "node ../scripts/writeIconNodes.mjs",
+    "build:metaJson": "node ../scripts/writeIconMetaIndex.mjs",
     "dev": "npx nitropack dev",
-    "build": "npx nitropack build && pnpm docs:build",
+    "build:api": "npx nitropack build",
+    "build": "pnpm build:iconNodes && pnpm build:metaJson && pnpm build:api && pnpm docs:build",
     "preview": "node .output/server/index.mjs"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@lucide/docs": "workspace:*",
+    "h3": "^1.6.4",
     "nitropack": "latest",
     "node-fetch": "2",
-    "vitepress": "1.0.0-alpha.65"
+    "vitepress": "1.0.0-alpha.73"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.13",
     "@vueuse/core": "^10.1.0",
+    "element-to-path": "^1.2.1",
     "fuse.js": "^6.5.3",
     "js-yaml": "^4.1.0",
     "jszip": "^3.7.0",
+    "lodash-es": "^4.17.21",
     "lucide-vue-next": "workspace:*",
+    "lucide-react": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "svg-pathdata": "^6.0.3",
     "vue": "^3.2.47"
   }
 }
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 43008af1c..4905ed1c9 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -1,3 +1,7 @@
 {
-  "extends": "./.nitro/types/tsconfig.json"
+  "extends": "./.nitro/types/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowImportingTsExtensions": true
+  }
 }
diff --git a/docs/vercel.json b/docs/vercel.json
index d63ec4332..1eaaea3b7 100644
--- a/docs/vercel.json
+++ b/docs/vercel.json
@@ -1,3 +1,3 @@
 {
   "cleanUrls" : true
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08821492d..7a566859f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,9 @@ importers:
       '@vueuse/core':
         specifier: ^10.1.0
         version: 10.1.0(vue@3.2.47)
+      element-to-path:
+        specifier: ^1.2.1
+        version: 1.2.1
       fuse.js:
         specifier: ^6.5.3
         version: 6.6.2
@@ -58,16 +61,31 @@ importers:
       jszip:
         specifier: ^3.7.0
         version: 3.10.1
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
+      lucide-react:
+        specifier: workspace:*
+        version: link:../packages/lucide-react
       lucide-vue-next:
         specifier: workspace:*
         version: link:../packages/lucide-vue-next
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      svg-pathdata:
+        specifier: ^6.0.3
+        version: 6.0.3
       vue:
         specifier: ^3.2.47
         version: 3.2.47
     devDependencies:
-      '@lucide/docs':
-        specifier: workspace:*
-        version: 'link:'
+      h3:
+        specifier: ^1.6.4
+        version: 1.6.4
       nitropack:
         specifier: latest
         version: 2.3.3
@@ -75,8 +93,8 @@ importers:
         specifier: '2'
         version: 2.6.7
       vitepress:
-        specifier: 1.0.0-alpha.65
-        version: 1.0.0-alpha.65(@algolia/client-search@4.17.0)
+        specifier: 1.0.0-alpha.73
+        version: 1.0.0-alpha.73(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
 
   packages/lucide:
     devDependencies:
@@ -4740,7 +4758,7 @@ packages:
       '@babel/helper-module-imports': 7.18.6
       '@babel/helper-plugin-utils': 7.20.2
       '@babel/plugin-syntax-jsx': 7.18.6(@babel/core@7.20.2)
-      '@babel/types': 7.20.7
+      '@babel/types': 7.20.2
     dev: false
 
   /@babel/plugin-transform-react-jsx@7.19.0(@babel/core@7.18.13):
@@ -6756,10 +6774,10 @@ packages:
     resolution: {integrity: sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==}
     dev: true
 
-  /@docsearch/js@3.3.3(@algolia/client-search@4.17.0):
+  /@docsearch/js@3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2xAv2GFuHzzmG0SSZgf8wHX0qZX8n9Y1ZirKUk5Wrdc+vH9CL837x2hZIUdwcPZI9caBA+/CzxsS68O4waYjUQ==}
     dependencies:
-      '@docsearch/react': 3.3.3(@algolia/client-search@4.17.0)
+      '@docsearch/react': 3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
       preact: 10.11.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -6768,7 +6786,7 @@ packages:
       - react-dom
     dev: true
 
-  /@docsearch/react@3.3.3(@algolia/client-search@4.17.0):
+  /@docsearch/react@3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-pLa0cxnl+G0FuIDuYlW+EBK6Rw2jwLw9B1RHIeS4N4s2VhsfJ/wzeCi3CWcs5yVfxLd5ZK50t//TMA5e79YT7Q==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -6786,6 +6804,8 @@ packages:
       '@algolia/autocomplete-preset-algolia': 1.7.4(@algolia/client-search@4.17.0)(algoliasearch@4.17.0)
       '@docsearch/css': 3.3.3
       algoliasearch: 4.17.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -9935,7 +9955,7 @@ packages:
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.3.7
+      semver: 7.4.0
       tsutils: 3.21.0(typescript@4.8.4)
       typescript: 4.8.4
     transitivePeerDependencies:
@@ -10045,14 +10065,14 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /@vitejs/plugin-vue@4.1.0(vite@4.2.1)(vue@3.2.47):
+  /@vitejs/plugin-vue@4.1.0(vite@4.3.1)(vue@3.2.47):
     resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.2.1
+      vite: 4.3.1
       vue: 3.2.47
     dev: true
 
@@ -10255,27 +10275,9 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
-
-  /@vueuse/core@9.13.0(vue@3.2.47):
-    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
-    dependencies:
-      '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.2.47)
-      vue-demi: 0.14.0(vue@3.2.47)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
 
   /@vueuse/metadata@10.1.0:
     resolution: {integrity: sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==}
-    dev: false
-
-  /@vueuse/metadata@9.13.0:
-    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
-    dev: true
 
   /@vueuse/shared@10.1.0(vue@3.2.47):
     resolution: {integrity: sha512-2X52ogu12i9DkKOQ01yeb/BKg9UO87RNnpm5sXkQvyORlbq8ONS5l39MYkjkeVWWjdT0teJru7a2S41dmHmqjQ==}
@@ -10284,16 +10286,6 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
-
-  /@vueuse/shared@9.13.0(vue@3.2.47):
-    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
-    dependencies:
-      vue-demi: 0.14.0(vue@3.2.47)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    dev: true
 
   /@webassemblyjs/ast@1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
@@ -16332,12 +16324,6 @@ packages:
       ci-info: 2.0.0
     dev: true
 
-  /is-core-module@2.10.0:
-    resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==}
-    dependencies:
-      has: 1.0.3
-    dev: true
-
   /is-core-module@2.11.0:
     resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
     dependencies:
@@ -18240,6 +18226,10 @@ packages:
       object-visit: 1.0.1
     dev: true
 
+  /mark.js@8.11.1:
+    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
+    dev: true
+
   /markdown-escapes@1.0.4:
     resolution: {integrity: sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==}
     dev: false
@@ -18808,6 +18798,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /minisearch@6.0.1:
+    resolution: {integrity: sha512-Ly1w0nHKnlhAAh6/BF/+9NgzXfoJxaJ8nhopFhQ3NcvFJrFIL+iCg9gw9e9UMBD+XIsp/RyznJ/o5UIe5Kw+kg==}
+    dev: true
+
   /minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
@@ -19272,7 +19266,7 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     dependencies:
       hosted-git-info: 5.1.0
-      is-core-module: 2.10.0
+      is-core-module: 2.11.0
       semver: 7.4.0
       validate-npm-package-license: 3.0.4
     dev: true
@@ -20950,6 +20944,15 @@ packages:
       scheduler: 0.21.0
     dev: true
 
+  /react-dom@18.2.0(react@18.2.0):
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+
   /react-error-boundary@3.1.4(react@17.0.2):
     resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
     engines: {node: '>=10', npm: '>=6'}
@@ -21207,6 +21210,12 @@ packages:
       loose-envify: 1.4.0
     dev: true
 
+  /react@18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+
   /reactcss@1.2.3(react@17.0.2):
     resolution: {integrity: sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==}
     peerDependencies:
@@ -21983,6 +21992,11 @@ packages:
       loose-envify: 1.4.0
     dev: true
 
+  /scheduler@0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+
   /schema-utils@2.7.1:
     resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
     engines: {node: '>= 8.9.0'}
@@ -24317,8 +24331,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite@4.2.1:
-    resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
+  /vite@4.3.1:
+    resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -24344,7 +24358,6 @@ packages:
     dependencies:
       esbuild: 0.17.16
       postcss: 8.4.21
-      resolve: 1.22.1
       rollup: 3.20.2
     optionalDependencies:
       fsevents: 2.3.2
@@ -24361,18 +24374,20 @@ packages:
       vite: 3.1.8
     dev: true
 
-  /vitepress@1.0.0-alpha.65(@algolia/client-search@4.17.0):
-    resolution: {integrity: sha512-iGWC0AQC6WrfRZTJf5+TiGG4o8PLhqIJNyai8NVxZCY9YpmMJhddvQeqqjJdQniF/LQK/hQ5nQZ9HgSZDGRPGQ==}
+  /vitepress@1.0.0-alpha.73(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-BWK7b5yYxdA3SeBnUV+ly8vJU2MFcQhjooycLDc2AsSd07uGp+WO6J6gBmjwHuOz5hgcNa+/VxGWKKwBycdbnA==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.3.3
-      '@docsearch/js': 3.3.3(@algolia/client-search@4.17.0)
-      '@vitejs/plugin-vue': 4.1.0(vite@4.2.1)(vue@3.2.47)
+      '@docsearch/js': 3.3.3(@algolia/client-search@4.17.0)(react-dom@18.2.0)(react@18.2.0)
+      '@vitejs/plugin-vue': 4.1.0(vite@4.3.1)(vue@3.2.47)
       '@vue/devtools-api': 6.5.0
-      '@vueuse/core': 9.13.0(vue@3.2.47)
+      '@vueuse/core': 10.1.0(vue@3.2.47)
       body-scroll-lock: 4.0.0-beta.0
+      mark.js: 8.11.1
+      minisearch: 6.0.1
       shiki: 0.14.1
-      vite: 4.2.1
+      vite: 4.3.1
       vue: 3.2.47
     transitivePeerDependencies:
       - '@algolia/client-search'
diff --git a/scripts/writeIconMetaIndex.mjs b/scripts/writeIconMetaIndex.mjs
new file mode 100644
index 000000000..647ab5b2d
--- /dev/null
+++ b/scripts/writeIconMetaIndex.mjs
@@ -0,0 +1,29 @@
+import fs from 'fs';
+import path from 'path';
+import { readSvgDirectory, toCamelCase } from './helpers.mjs';
+
+const currentDir = process.cwd();
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+const iconJsonFiles = readSvgDirectory(ICONS_DIR, '.json');
+
+fs.unlinkSync(path.resolve(currentDir, 'iconMetaData.ts'));
+
+const location = path.resolve(currentDir, `iconMetaData.ts`);
+
+let outputString = '';
+
+iconJsonFiles.forEach((iconJsonFile) => {
+  const iconName = path.basename(iconJsonFile, '.json');
+  outputString += `export { default as ${toCamelCase(
+    iconName,
+  )} } from '../icons/${iconName}.json';\n`;
+});
+
+fs.promises
+  .writeFile(location, outputString, 'utf-8')
+  .then(() => {
+    console.log('Successfully write icon json file index');
+  })
+  .catch((error) => {
+    throw new Error(`Something went wrong generating icon json file index file,\n ${error}`);
+  });
diff --git a/scripts/writeIconNodes.mjs b/scripts/writeIconNodes.mjs
new file mode 100644
index 000000000..90b8042f1
--- /dev/null
+++ b/scripts/writeIconNodes.mjs
@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+import renderIconsObject from './render/renderIconsObject.mjs';
+import { readSvgDirectory, toCamelCase } from './helpers.mjs';
+
+const currentDir = process.cwd();
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+const svgFiles = readSvgDirectory(ICONS_DIR);
+const icons = renderIconsObject(svgFiles, ICONS_DIR, true);
+
+const iconNodesDirectory = path.resolve(currentDir, 'iconNodes');
+
+fs.unlinkSync(path.resolve(currentDir, 'iconNodes/index.ts'));
+
+if (!fs.existsSync(iconNodesDirectory)) {
+  fs.mkdirSync(iconNodesDirectory);
+}
+
+const writeIconFiles = Object.entries(icons).map(async ([iconName, { children }]) => {
+  const location = path.resolve(iconNodesDirectory, `${iconName}.json`);
+  const iconNode = children.map(({ name, attributes }) => [name, attributes]);
+
+  const output = JSON.stringify(iconNode, null, 2);
+  await fs.promises.writeFile(location, output, 'utf-8');
+
+  const indexFile = path.resolve(iconNodesDirectory, `index.ts`);
+  await fs.promises.appendFile(
+    indexFile,
+    `export { default as ${toCamelCase(iconName)} } from './${iconName}.json';\n`,
+    'utf-8',
+  );
+});
+
+Promise.all(writeIconFiles)
+  .then(() => {
+    console.log('Successfully write', writeIconFiles.length, 'iconNodes.');
+  })
+  .catch((error) => {
+    throw new Error(`Something went wrong generating iconNode files,\n ${error}`);
+  });
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 000000000..831dfac3e
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,10 @@
+{
+  "cleanUrls" : true,
+  "redirects": [
+    {
+      "source": "/icon/:path*",
+      "destination":"/icons/:path*",
+      "permanent": true
+    }
+  ]
+}