docs/.vitepress/data/teamData.json

@@ -0,0 +1,48 @@
+[
+  {
+    "name": "Eric Fennis",
+    "title": "Creator of Lucide & Software engineer @nedap",
+    "image": "https://github.com/ericfennis.png?size=192",
+    "sponsor": "https://github.com/sponsors/ericfennis",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/ericfennis"
+      },
+      {
+        "icon": "x",
+        "link": "https://github.com/ericfennis"
+      }
+    ]
+  },
+  {
+    "name": "Karsa Rigó",
+    "title": "Maintainer of Lucide & Software engineer @sztaki",
+    "image": "https://github.com/karsa-mistmere.png?size=192",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/karsa-mistmere"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://www.linkedin.com/in/karsamistmere"
+      }
+    ]
+  },
+  {
+    "name": "jguddas",
+    "title": "Maintainer of Lucide & Software engineer @lego",
+    "image": "https://github.com/jguddas.png?size=192",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/jguddas"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://www.linkedin.com/in/jguddas"
+      }
+    ]
+  }
+]

docs/.vitepress/theme/components/base/Badge.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-
 import { useRouter } from 'vitepress';
 
 const { go } = useRouter()

docs/.vitepress/theme/components/base/CardGrid.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="grid">
+  <div class="card-grid-flex">
     <slot />
   </div>
 </template>
 
-<style scoped>
-.grid {
+<style>
+.card-grid-flex {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
@@ -15,20 +15,20 @@
   margin: -8px;
 }
 
-.grid > * {
+.card-grid-flex > * {
   flex-basis: 100%;
   box-sizing: border-box;
   padding: 8px;
 }
 
 @media (min-width: 960px) {
-  .grid > * {
+  .card-grid-flex > * {
     flex-basis: 50%;
   }
 }
 
 @media (min-width: 1280px) {
-  .grid > * {
+  .card-grid-flex > * {
     flex-basis: 33.33%;
   }
 }

docs/.vitepress/theme/components/base/GridSection.vue

@@ -24,40 +24,10 @@ const headingElement = computed(() => `h${props.headingLevel}`)
   font-size: 32px;
   font-weight: bold;
   text-align: center;
-  margin-bottom: 32px;
+  margin-bottom: 36px;
 }
 
 section {
   margin-bottom: 96px;
 }
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: center;
-  align-content: space-evenly;
-  box-sizing: border-box;
-  margin: -8px;
-}
-
-.grid > * {
-  flex-basis: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-}
-
-@media (min-width: 960px) {
-  .grid > * {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .grid > * {
-    flex-basis: 33.33%;
-  }
-}
-
-
 </style>

docs/.vitepress/theme/components/home/HomeHeroIconsCard.vue

@@ -28,8 +28,6 @@ function insert() {
   const replaceIndex = random(0, 48)
   const newIcon = getRandomNewIcon()
 
-  // items.value.splice(replaceIndex, 0, newIcon);
-
   items.value[replaceIndex] = newIcon
 }
 
@@ -76,7 +74,6 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .card-wrapper {
-  /* padding: 0 24px; */
   margin-left: auto;
   margin-bottom: auto;
   margin-top: 48px;
@@ -87,13 +84,10 @@ onBeforeUnmount(() => {
   border-radius: 8px;
   width: 100%;
   height:100%;
-  /* box-shadow: var(--vp-shadow-2); */
   max-height: 220px;
   max-width: 560px;
   margin: 0 auto;
   position: relative;
-  /* max-height: 240px; */
-  /* margin-top: 96px; */
 }
 
 .card-grid {
@@ -107,7 +101,6 @@ onBeforeUnmount(() => {
   max-width: 512px;
   overflow: hidden;
   position: relative;
-  /* white-space: nowrap; */
 }
 
 .list-enter-active {

docs/.vitepress/theme/components/home/HomePackagesSection.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HomeContainer from './HomeContainer.vue'
+import HomeSectionTitle from './HomeSectionTitle.vue'
 import { useRouter } from 'vitepress';
 import { data } from './HomePackagesSection.data'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
@@ -9,7 +10,7 @@ const { go } = useRouter()
 
 <template>
   <HomeContainer>
-    <h2 class="section-title">Available For:</h2>
+    <HomeSectionTitle>Available For:</HomeSectionTitle>
     <div class="packages-list">
       <a
         v-for="{ name, logo } in data.packages"
@@ -34,14 +35,6 @@ const { go } = useRouter()
 </template>
 
 <style scoped>
-.section-title {
-  color: var(--vp-c-text-2);
-  font-weight: 500;
-  line-height: 32px;
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 16px;
-}
 .packages-list {
   display: flex;
   flex-wrap: wrap;

docs/.vitepress/theme/components/home/HomeSectionTitle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  headingLevel: 1 | 2 | 3 | 4 | 5 | 6,
+}>()
+
+const headingElement = computed(() => `h${props.headingLevel ?? 2}`)
+</script>
+
+<template>
+  <component :is="headingElement" class="section-title">
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.section-title {
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+</style>

docs/.vitepress/theme/components/home/HomeSponsorCard.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Card from '../base/Card.vue'
+import HomeSectionTitle from './HomeSectionTitle.vue'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+</script>
+
+<template>
+  <HomeSectionTitle :headingLevel="3">
+    Sponsor the Lucide maintainers
+  </HomeSectionTitle>
+  <Card class="sponsor-card">
+    <img
+      src="/open-collective.png"
+      alt="Open Collective logo"
+      width="242"
+      height="42"
+    />
+    <VPButton
+      href="https://opencollective.com/lucide-icons"
+      class="sponsor-button"
+      text="Become a sponsor"
+    />
+  </Card>
+</template>
+
+<style scoped>
+.sponsor-card {
+  margin: 0 auto;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.sponsor-button {
+  margin: auto 0;
+}
+
+@media (min-width: 640px) {
+  .sponsor-card {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+</style>

docs/.vitepress/theme/components/home/HomeTeamSection.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import HomeContainer from './HomeContainer.vue'
+import GridSection from '../base/GridSection.vue'
+import TeamMemberCard, { TeamMember } from './TeamMemberCard.vue'
+import teamData from '../../../data/teamData.json'
+import HomeSponsorCard from './HomeSponsorCard.vue';
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
+
+
+const { theme } = useData()
+</script>
+
+<template>
+   <HomeContainer>
+    <GridSection
+      title="Meet the team"
+      :headingLevel="2"
+      class="team-members"
+    >
+      <TeamMemberCard
+        v-for="teamMember in (teamData as TeamMember[])"
+        v-bind="teamMember"
+      />
+    </GridSection>
+    <HomeSponsorCard />
+    <VPDocAsideCarbonAds
+      :carbon-ads="theme.carbonAds"
+      class="ad-card"
+    />
+  </HomeContainer>
+</template>
+
+
+<style scoped>
+.team-members {
+  gap: 24px;
+  margin-top: 48px;
+  margin-bottom: 48px;
+}
+
+@media (min-width: 640px) {
+  .team-members :deep(.card-grid > *) {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 768px) {
+  .team-members :deep(.card-grid > *) {
+    flex-basis: 33.33%;
+  }
+}
+
+.ad-card {
+  margin: 32px auto 0;
+  width: 100%;;
+  max-width: 500px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  display: none;
+}
+
+@media (min-width: 960px) {
+  .ad-card {
+    display: block;
+  }
+}
+
+.ad-card :deep(.VPCarbonAds) {
+  width: 100%;
+  text-align: left;
+  min-height: auto;
+}
+
+.ad-card :deep(.VPCarbonAds .carbon-wrap) {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.ad-card :deep(.VPCarbonAds .carbon-text) {
+  padding-top: 0;
+}
+
+.ad-card :deep(.VPCarbonAds .carbon-poweredby) {
+  text-align: right;
+  margin-top: -24px;
+}
+</style>

docs/.vitepress/theme/components/home/TeamMemberCard.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+export interface TeamMember {
+  name: string
+  title: string
+  image: string
+  sponsor: string
+  socialLinks: DefaultTheme.SocialLink[]
+}
+</script>
+
+<script setup lang="ts">
+import { DefaultTheme } from 'vitepress';
+import Card from '../base/Card.vue'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+import VPSocialLinks from 'vitepress/dist/client/theme-default/components/VPSocialLinks.vue'
+
+defineProps<TeamMember>()
+</script>
+
+<template>
+  <div>
+    <Card class="member-card">
+      <img :src="image" :alt="name" class="member-image"/>
+      <h3 class="member-name">
+        {{name}}
+      </h3>
+      <p class="member-title">
+        {{title}}
+      </p>
+      <div class="member-links">
+        <VPButton
+          v-if="sponsor"
+          :href="sponsor"
+          text="Sponsor"
+          theme="sponsor"
+          class="sponsor-button"
+          size="medium"
+        />
+        <VPSocialLinks
+          :links="socialLinks"
+        />
+      </div>
+
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.member-card {
+  flex-basis: 100%;
+  height:100%;
+}
+
+.member-image {
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  margin: 0 auto;
+  background-color: var(--vp-c-bg);
+}
+
+.member-name {
+  text-align: center;
+  margin-top: 16px;
+  font-size: 21px;
+  font-weight: 500;
+  color: var(--textColor);
+}
+
+.member-title {
+  flex-grow: 1;
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  margin-bottom: 16px;;
+}
+
+.sponsor-button {
+  width: auto;
+}
+
+.member-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+</style>

docs/.vitepress/theme/components/icons/CarbonAdOverlay.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useData } from 'vitepress';
+import { useSessionStorage } from '@vueuse/core';
+import IconButton from '../base/IconButton.vue';
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
+import { x } from '../../../data/iconNodes'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+
+const { theme } = useData()
+const showAd = useSessionStorage('show-carbon-ads',true)
+
+defineProps<{
+  drawerOpen: boolean
+}>()
+
+const CloseIcon = createLucideIcon('Close', x)
+</script>
+
+<template>
+  <div
+    :class="{
+      'drawer-open': drawerOpen,
+      'hide-ad': !showAd
+    }"
+    class="floating-ad"
+    v-if="theme.carbonAds"
+  >
+    <IconButton @click="showAd = false" class="hide-button">
+      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
+    </IconButton>
+    <VPDocAsideCarbonAds
+      :carbon-ads="theme.carbonAds"
+    />
+  </div>
+</template>
+
+<style scoped>
+.floating-ad {
+  display: none;
+  position: fixed;
+  bottom: 32px;
+  width: 224px;
+  right: 32px;
+  transition: opacity 0.5s, transform 0.25s ease;
+}
+
+.floating-ad.drawer-open {
+  transform: translateY(-288px);
+}
+
+.floating-ad.hide-ad {
+  transform: translateX(224px);
+  opacity: 0;
+}
+
+.floating-ad.drawer-open.hide-ad {
+  transform: translateY(-288px) translateX(224px);
+}
+
+.floating-ad.drawer-open, .floating-ad.hide-ad {
+  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+@media (min-width: 1280px) {
+  .floating-ad {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .floating-ad {
+    right: calc(((100% - (var(--vp-layout-max-width) - var(--vp-sidebar-width))) - 272px) / 2);
+  }
+}
+
+.hide-button {
+  padding: 4px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: transparent;
+}
+</style>

docs/.vitepress/theme/components/icons/IconDetailOverlay.vue

@@ -13,12 +13,18 @@ import { computedAsync } from '@vueuse/core';
 import { satisfies } from 'semver';
 
 const props = defineProps<{
-  iconName: string
+  iconName: string | null
 }>()
 
+const { go } = useRouter()
+
 const icon = computedAsync<IconEntity | null>(async () => {
   if (props.iconName) {
-    return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+    try {
+      return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+    } catch (err) {
+      go(`/icons/${props.iconName}`)
+    }
   }
   return null
 }, null)
@@ -36,8 +42,6 @@ function onClose() {
   emit('close')
 }
 
-const { go } = useRouter()
-
 const CloseIcon = createLucideIcon('Close', x)
 const Expand = createLucideIcon('Expand', expand)
 </script>
@@ -144,11 +148,11 @@ const Expand = createLucideIcon('Expand', expand)
 }
 
 .drawer-enter-active {
-  transition: all 0.2s cubic-bezier(.21,.8,.46,.9);
+  transition: opacity 0.5s, transform 0.25s ease;
 }
 
 .drawer-leave-active {
-  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
+  transition: opacity 0.25s ease, transform 1.6s ease-out;
 }
 
 .drawer-enter-from,

docs/.vitepress/theme/components/icons/IconItem.vue

@@ -52,8 +52,7 @@ async function navigateToIcon(event) {
     event.preventDefault()
     window.history.pushState({}, '', `/icons/${props.name}`)
     emit('setActiveIcon', props.name)
-  }
-  else {
+  } else {
     event.preventDefault()
     go(`/icons/${props.name}`)
   }

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -12,6 +12,7 @@ import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import chunkArray from '../../utils/chunkArray';
 import { CategoryRow } from './IconsCategory.vue';
 import useScrollToCategory from '../../composables/useScrollToCategory';
+import CarbonAdOverlay from './CarbonAdOverlay.vue';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -133,6 +134,12 @@ function onFocusSearchInput() {
 
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
+
+function handleCloseDrawer() {
+  setActiveIconName('');
+
+  window.history.pushState({}, '', '/icons/categories');
+}
 </script>
 
 <template>
@@ -164,8 +171,10 @@ const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay
   <IconDetailOverlay
     v-if="activeIconName != null"
     :iconName="activeIconName"
-    @close="setActiveIconName('')"
+    @close="handleCloseDrawer"
   />
+
+  <CarbonAdOverlay :drawerOpen="!!activeIconName" />
 </template>
 
 <style scoped>

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -10,6 +10,7 @@ import StickyBar from './StickyBar.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
 import chunkArray from '../../utils/chunkArray';
+import CarbonAdOverlay from './CarbonAdOverlay.vue';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -93,6 +94,12 @@ const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay
 watch(searchQueryDebounced, () => {
   scrollTo(0)
 })
+
+function handleCloseDrawer() {
+  setActiveIconName('');
+
+  window.history.pushState({}, '', '/icons/');
+}
 </script>
 
 <template>
@@ -124,10 +131,11 @@ watch(searchQueryDebounced, () => {
   </div>
 
   <IconDetailOverlay
-    v-if="activeIconName != null"
     :iconName="activeIconName"
-    @close="setActiveIconName('')"
+    @close="handleCloseDrawer"
   />
+
+  <CarbonAdOverlay :drawerOpen="!!activeIconName" />
 </template>
 
 <style>

docs/.vitepress/theme/components/packages/PackageList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {data} from './PackageList.data'
+import { data } from './PackageList.data'
 import GridSection from '../base/GridSection.vue'
 import PackageListItem from "./PackageListItem.vue";</script>
 
@@ -38,33 +38,4 @@ import PackageListItem from "./PackageListItem.vue";</script>
 .package-group {
   margin-bottom: 96px;
 }
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: center;
-  align-content: space-evenly;
-  box-sizing: border-box;
-  margin: -8px;
-}
-
-.grid > * {
-  flex-basis: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-}
-
-@media (min-width: 960px) {
-  .grid > * {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .grid > * {
-    flex-basis: 33.33%;
-  }
-}
-
 </style>

docs/.vitepress/theme/components/showcase/ShowcaseList.vue

@@ -40,33 +40,4 @@ import ShowcaseListItem from "./ShowcaseListItem.vue";
 .package-group {
   margin-bottom: 96px;
 }
-
-.grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  justify-content: center;
-  align-content: space-evenly;
-  box-sizing: border-box;
-  margin: -8px;
-}
-
-.grid > * {
-  flex-basis: 100%;
-  box-sizing: border-box;
-  padding: 8px;
-}
-
-@media (min-width: 960px) {
-  .grid > * {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 1280px) {
-  .grid > * {
-    flex-basis: 33.33%;
-  }
-}
-
 </style>

docs/.vitepress/vue-shim.d.ts

@@ -1,5 +1,7 @@
+import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
+import Vue from 'vue';
+
 declare module '*.vue' {
-  import Vue from 'vue';
   export default Vue;
 }
 
@@ -16,3 +18,7 @@ declare const resvg_wasm: RequestInfo | URL | Response | BufferSource | WebAssem
 declare module 'node:module' {
   function createRequire(filename: string): NodeRequire;
 }
+
+declare module '*.node.json' {
+  export default IconNode;
+}

docs/icons/categories.md

@@ -10,7 +10,6 @@ import { data } from './icons.data.ts'
 import { data as categoriesData } from './categories.data.ts'
 import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 import IconsCategoryOverview from '../.vitepress/theme/components/icons/IconsCategoryOverview.vue'
-
 </script>
 
 <div class="VPDoc content">

docs/index.md

@@ -56,7 +56,9 @@ features:
 <script setup>
 import HomePackagesSection from './.vitepress/theme/components/home/HomePackagesSection.vue'
 import HomeIconCustomizer from './.vitepress/theme/components/home/HomeIconCustomizer.vue'
+import HomeTeamSection from './.vitepress/theme/components/home/HomeTeamSection.vue'
 </script>
 
 <HomePackagesSection />
 <HomeIconCustomizer />
+<HomeTeamSection />

icons/drumstick.json

@@ -3,7 +3,8 @@
   "contributors": [
     "Andreto",
     "mittalyashu",
-    "ericfennis"
+    "ericfennis",
+    "karsa-mistmere"
   ],
   "tags": [
     "food",

icons/mouse-off.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "karsa-mistmere",
+    "mittalyashu",
+    "ericfennis"
+  ],
+  "tags": [
+    "device",
+    "scroll",
+    "click",
+    "disabled"
+  ],
+  "categories": [
+    "devices"
+  ]
+}

packages/lucide-static/README.md

@@ -13,7 +13,8 @@ This package include the following lucide implementations:
 
 This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
 
-> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](https://github.com/lucide-icons/lucide/tree/main/packages/lucide), [lucide-react](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react), [lucide-vue](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue), [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next), [lucide-angular](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular), [lucide-preact](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact)
+> [!WARNING]
+> It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](https://github.com/lucide-icons/lucide/tree/main/packages/lucide), [lucide-react](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react), [lucide-vue](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue), [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next), [lucide-angular](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-angular), [lucide-preact](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-preact)
 
 ## Installation