Add code examples

docs/.gitignore

@@ -2,4 +2,5 @@ node_modules
 .vitepress/cache
 .vitepress/dist
 .vercel
-.nitro
+.nitro
+iconNodes

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
+})

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]
+        })]
+    })
+  )
+})

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
+
+})

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 ])
+  )
+})

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>

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,

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>

docs/.vitepress/components/HomeInfo.vue

@@ -23,9 +23,4 @@
 }
 
 
-
-
-
-
-
 </style>

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>

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>

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>

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 {

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%;
 }

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)"

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))
+}

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' },
     ],
 

docs/.vitepress/lib/SvgPreview/index.tsx

@@ -0,0 +1,225 @@
+import React from 'react';
+import { PathProps, Path } from './types';
+import { getPaths, assert } from './utils';
+
+const Grid = ({
+  radius,
+  fill,
+  ...props
+}: {
+  strokeWidth: number;
+  radius: number;
+} & PathProps<'stroke', 'strokeWidth'>) => (
+  <g className="svg-preview-grid-group" strokeLinecap="butt" {...props}>
+    <rect
+      width={24 - props.strokeWidth}
+      height={24 - props.strokeWidth}
+      x={props.strokeWidth / 2}
+      y={props.strokeWidth / 2}
+      rx={radius}
+      fill={fill}
+    />
+    <path
+      d={
+        props.d ||
+        new Array(Math.floor(24 - 1))
+          .fill(null)
+          .flatMap((_, i) => [
+            `M${props.strokeWidth} ${i + 1}h${24 - props.strokeWidth * 2}`,
+            `M${i + 1} ${props.strokeWidth}v${24 - props.strokeWidth * 2}`,
+          ])
+          .join('')
+      }
+    />
+  </g>
+);
+
+const Shadow = ({
+  radius,
+  paths,
+  ...props
+}: {
+  radius: number;
+  paths: Path[];
+} & PathProps<'stroke' | 'strokeWidth' | 'strokeOpacity', 'd'>) => {
+  const groupedPaths = Object.entries(
+    paths.reduce((groups, val) => {
+      const key = val.c.id;
+      groups[key] = [...(groups[key] || []), val];
+      return groups;
+    }, {} as Record<number, Path[]>)
+  );
+  return (
+    <>
+      <g className="svg-preview-shadow-mask-group" {...props}>
+        {groupedPaths.map(([id, paths]) => (
+          <mask
+            id={`svg-preview-shadow-mask-${id}`}
+            maskUnits="userSpaceOnUse"
+            strokeOpacity="1"
+            strokeWidth={props.strokeWidth}
+            stroke="#000"
+          >
+            <rect x={0} y={0} width={24} height={24} fill="#fff" stroke="none" rx={radius} />
+            <path
+              d={paths
+                .flatMap(({ prev, next }) => [
+                  `M${prev.x} ${prev.y}h.01`,
+                  `M${next.x} ${next.y}h.01`,
+                ])
+                .filter((val, idx, arr) => arr.indexOf(val) === idx)
+                .join('')}
+            />
+          </mask>
+        ))}
+      </g>
+      <g className="svg-preview-shadow-group" {...props}>
+        {paths.map(({ d, c: { id } }, i) => (
+          <path key={i} mask={`url(#svg-preview-shadow-mask-${id})`} d={d} />
+        ))}
+        <path
+          d={paths
+            .flatMap(({ prev, next }) => [`M${prev.x} ${prev.y}h.01`, `M${next.x} ${next.y}h.01`])
+            .filter((val, idx, arr) => arr.indexOf(val) === idx)
+            .join('')}
+        />
+      </g>
+    </>
+  );
+};
+
+const ColoredPath = ({
+  colors,
+  paths,
+  ...props
+}: { paths: Path[]; colors: string[] } & PathProps<never, 'd' | 'stroke'>) => (
+  <g className="svg-preview-colored-path-group" {...props}>
+    {paths.map(({ d, c }, i) => (
+      <path key={i} d={d} stroke={colors[(c.name === 'path' ? i : c.id) % colors.length]} />
+    ))}
+  </g>
+);
+
+const ControlPath = ({
+  paths,
+  radius,
+  pointSize,
+  ...props
+}: { pointSize: number; paths: Path[]; radius: number } & PathProps<
+  'stroke' | 'strokeWidth',
+  'd'
+>) => {
+  const controlPaths = paths.map((path, i) => {
+    const element = paths.filter((p) => p.c.id === path.c.id);
+    const lastElement = element.at(-1)?.next;
+    assert(lastElement);
+    const isClosed = element[0].prev.x === lastElement.x && element[0].prev.y === lastElement.y;
+    const showMarker = !['rect', 'circle', 'ellipse'].includes(path.c.name);
+    return {
+      ...path,
+      showMarker,
+      startMarker: showMarker && path.isStart && !isClosed,
+      endMarker: showMarker && paths[i + 1]?.isStart !== false && !isClosed,
+    };
+  });
+  return (
+    <>
+      <g
+        className="svg-preview-control-path-marker-mask-group"
+        strokeWidth={pointSize}
+        stroke="#000"
+      >
+        {controlPaths.map(({ prev, next, showMarker }, i) => {
+          return (
+            showMarker && (
+              <mask
+                id={`svg-preview-control-path-marker-mask-${i}`}
+                key={i}
+                maskUnits="userSpaceOnUse"
+              >
+                <rect x="0" y="0" width="24" height="24" fill="#fff" stroke="none" rx={radius} />
+                <path d={`M${prev.x} ${prev.y}h.01`} />
+                <path d={`M${next.x} ${next.y}h.01`} />
+              </mask>
+            )
+          );
+        })}
+      </g>
+      <g className="svg-preview-control-path-group" {...props}>
+        {controlPaths.map(({ d, showMarker }, i) => (
+          <path
+            key={i}
+            mask={showMarker ? `url(#svg-preview-control-path-marker-mask-${i})` : undefined}
+            d={d}
+          />
+        ))}
+      </g>
+      <g className="svg-preview-control-path-marker-group" {...props}>
+        <path
+          d={controlPaths
+            .flatMap(({ prev, next, showMarker }) =>
+              showMarker ? [`M${prev.x} ${prev.y}h.01`, `M${next.x} ${next.y}h.01`] : []
+            )
+            .join('')}
+        />
+        {controlPaths.map(({ d, prev, next, startMarker, endMarker }, i) => (
+          <React.Fragment key={i}>
+            {startMarker && <circle cx={prev.x} cy={prev.y} r={pointSize / 2} />}
+            {endMarker && <circle cx={next.x} cy={next.y} r={pointSize / 2} />}
+          </React.Fragment>
+        ))}
+      </g>
+    </>
+  );
+};
+
+const SvgPreview = React.forwardRef<SVGSVGElement, { src: string; showGrid?: boolean }>(
+  ({ src, showGrid = false }, ref) => {
+    const paths = getPaths(src);
+    const darkModeCss = `@media screen and (prefers-color-scheme: dark) {
+  .svg-preview-grid-group,
+  .svg-preview-shadow-mask-group,
+  .svg-preview-shadow-group {
+    stroke: #fff;
+  }
+}`;
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <style>{darkModeCss}</style>
+        {showGrid && <Grid strokeWidth={0.1} stroke="#777" strokeOpacity={0.3} radius={1} />}
+        <Shadow paths={paths} strokeWidth={4} stroke="#777" radius={1} strokeOpacity={0.15} />
+        <ColoredPath
+          paths={paths}
+          colors={[
+            '#1982c4',
+            '#4267AC',
+            '#6a4c93',
+            '#B55379',
+            '#FF595E',
+            '#FF7655',
+            '#ff924c',
+            '#FFAE43',
+            '#ffca3a',
+            '#C5CA30',
+            '#8ac926',
+            '#52A675',
+          ]}
+        />
+        <ControlPath radius={1} paths={paths} pointSize={1} stroke="#fff" strokeWidth={0.125} />
+      </svg>
+    );
+  }
+);
+
+export default SvgPreview;

docs/.vitepress/lib/SvgPreview/types.ts

@@ -0,0 +1,21 @@
+import { SVGProps } from 'react';
+import { getCommands } from './utils';
+
+export type Point = { x: number; y: number };
+
+export type Path = {
+  d: string;
+  prev: Point;
+  next: Point;
+  isStart: boolean;
+  c: ReturnType<typeof getCommands>[number];
+};
+
+export type PathProps<
+  RequiredProps extends keyof SVGProps<SVGPathElement | SVGRectElement | SVGCircleElement>,
+  NeverProps extends keyof SVGProps<SVGPathElement | SVGRectElement | SVGCircleElement>
+> = Required<Pick<React.SVGProps<SVGElement & SVGRectElement & SVGCircleElement>, RequiredProps>> &
+  Omit<
+    React.SVGProps<SVGPathElement & SVGRectElement & SVGCircleElement>,
+    RequiredProps & NeverProps
+  >;

docs/.vitepress/lib/SvgPreview/utils.ts

@@ -0,0 +1,186 @@
+import { INode, parseSync } from 'svgson';
+import toPath from 'element-to-path';
+import { SVGPathData, encodeSVGPath } from 'svg-pathdata';
+import { Path, Point } from './types';
+
+function assertNever(x: never): never {
+  throw new Error('Unknown type: ' + x['type']);
+}
+export function assert(value: unknown): asserts value {
+  if (value === undefined) {
+    throw new Error('value must be defined');
+  }
+}
+
+const extractPaths = (node: INode): { d: string; name: typeof node.name }[] => {
+  if (/(rect|circle|ellipse|polygon|polyline|line|path)/.test(node.name)) {
+    return [{ d: toPath(node), name: node.name }];
+  } else if (node.children && Array.isArray(node.children)) {
+    return node.children.flatMap(extractPaths);
+  }
+
+  return [];
+};
+
+export const getCommands = (src: string) =>
+  extractPaths(parseSync(src)).flatMap(({ d, name }, idx) =>
+    new SVGPathData(d).toAbs().commands.map((c) => ({ ...c, id: idx, name }))
+  );
+
+export const getPaths = (src: string) => {
+  const commands = getCommands(src);
+  const paths: Path[] = [];
+  let prev: Point | undefined = undefined;
+  let start: Point | undefined = undefined;
+  const addPath = (c: (typeof commands)[number], next: Point, d?: string) => {
+    assert(prev);
+    paths.push({
+      c,
+      d: d || `M${prev.x} ${prev.y}L${next.x} ${next.y}`,
+      prev,
+      next,
+      isStart: start === prev,
+    });
+    prev = next;
+  };
+  let prevCP: Point | undefined = undefined;
+  for (let i = 0; i < commands.length; i++) {
+    const previousCommand = commands[i - 1];
+    const c = commands[i];
+    switch (c.type) {
+      case SVGPathData.MOVE_TO: {
+        prev = c;
+        start = c;
+        break;
+      }
+      case SVGPathData.LINE_TO: {
+        assert(prev);
+        addPath(c, c);
+        break;
+      }
+      case SVGPathData.HORIZ_LINE_TO: {
+        assert(prev);
+        addPath(c, { x: c.x, y: prev.y });
+        break;
+      }
+      case SVGPathData.VERT_LINE_TO: {
+        assert(prev);
+        addPath(c, { x: prev.x, y: c.y });
+        break;
+      }
+      case SVGPathData.CLOSE_PATH: {
+        assert(prev);
+        assert(start);
+        addPath(c, start);
+        start = undefined;
+        break;
+      }
+      case SVGPathData.CURVE_TO: {
+        assert(prev);
+        addPath(c, c, `M ${prev.x},${prev.y} ${encodeSVGPath(c)}`);
+        break;
+      }
+      case SVGPathData.SMOOTH_CURVE_TO: {
+        assert(prev);
+        assert(previousCommand);
+        const reflectedCp1 = {
+          x:
+            previousCommand &&
+              (previousCommand.type === SVGPathData.SMOOTH_CURVE_TO ||
+                previousCommand.type === SVGPathData.CURVE_TO)
+              ? previousCommand.relative
+                ? previousCommand.x2 - previousCommand.x
+                : previousCommand.x2 - prev.x
+              : 0,
+          y:
+            previousCommand &&
+              (previousCommand.type === SVGPathData.SMOOTH_CURVE_TO ||
+                previousCommand.type === SVGPathData.CURVE_TO)
+              ? previousCommand.relative
+                ? previousCommand.y2 - previousCommand.y
+                : previousCommand.y2 - prev.y
+              : 0,
+        };
+        addPath(
+          c,
+          c,
+          `M ${prev.x},${prev.y} ${encodeSVGPath({
+            type: SVGPathData.CURVE_TO,
+            relative: false,
+            x: c.x,
+            y: c.y,
+            x1: prev.x - reflectedCp1.x,
+            y1: prev.y - reflectedCp1.y,
+            x2: c.x2,
+            y2: c.y2,
+          })}`
+        );
+        break;
+      }
+      case SVGPathData.QUAD_TO: {
+        assert(prev);
+        addPath(c, c, `M ${prev.x},${prev.y} ${encodeSVGPath(c)}`);
+        break;
+      }
+      case SVGPathData.SMOOTH_QUAD_TO: {
+        assert(prev);
+        const backTrackCP = (
+          index: number,
+          currentPoint: { x: number; y: number }
+        ): { x: number; y: number } => {
+          const previousCommand = commands[index - 1];
+          if (!previousCommand) {
+            return currentPoint;
+          }
+          if (previousCommand.type === SVGPathData.QUAD_TO) {
+            return {
+              x: previousCommand.relative
+                ? currentPoint.x - (previousCommand.x1 - previousCommand.x)
+                : currentPoint.x - (previousCommand.x1 - currentPoint.x),
+              y: previousCommand.relative
+                ? currentPoint.y - (previousCommand.y1 - previousCommand.y)
+                : currentPoint.y - (previousCommand.y1 - currentPoint.y),
+            };
+          }
+          if (previousCommand.type === SVGPathData.SMOOTH_QUAD_TO) {
+            if (!prevCP) {
+              return currentPoint;
+            }
+            return {
+              x: currentPoint.x - (prevCP.x - currentPoint.x),
+              y: currentPoint.y - (prevCP.y - currentPoint.y),
+            };
+          }
+          return currentPoint;
+        };
+        prevCP = backTrackCP(i, prev);
+        addPath(
+          c,
+          c,
+          `M ${prev.x},${prev.y} ${encodeSVGPath({
+            type: SVGPathData.QUAD_TO,
+            relative: false,
+            x: c.x,
+            y: c.y,
+            x1: prevCP.x,
+            y1: prevCP.y,
+          })}`
+        );
+        break;
+      }
+      case SVGPathData.ARC: {
+        assert(prev);
+        addPath(
+          c,
+          c,
+          `M ${prev.x},${prev.y} A ${c.rX} ${c.rY} ${c.xRot} ${c.lArcFlag} ${c.sweepFlag} ${c.x} ${c.y}`
+        );
+        break;
+      }
+      default: {
+        assertNever(c);
+      }
+    }
+  }
+  return paths;
+};

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;
   }
 }
 

docs/.vitepress/vercel.json

@@ -0,0 +1,10 @@
+{
+  "cleanUrls" : true,
+  "redirects": [
+    {
+      "source": "/icon/:path*",
+      "destination":"/icons/:path*",
+      "permanent": true
+    }
+  ]
+}

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

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';

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>

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>

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

docs/license.md

@@ -0,0 +1,3 @@
+# Lucide License
+
+<!--@include: ../LICENSE -->

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',
+      }
+    },
+  },
 })

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"
   }
 }

docs/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "./.nitro/types/tsconfig.json"
+  "extends": "./.nitro/types/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowImportingTsExtensions": true
+  }
 }

docs/vercel.json

@@ -1,3 +1,3 @@
 {
   "cleanUrls" : true
-}
+}