fix(icons): added rounding to coffee icon (#2004)

* Updated icons/coffee.svg

* Updated icons/coffee.json

.cspell/custom-words.txt

@@ -8,6 +8,7 @@ squircle
 strikethrough
 touchpad
 ungroup
+pilcrow
 
 # Brands
 codepen

.github/workflows/pull-request.yml

@@ -94,6 +94,10 @@ jobs:
           comment-author: 'github-actions[bot]'
           body-includes: Added or changed icons
 
+      - uses: actions/setup-node@v4
+      - name: Install svgson for code preview (safer and faster than installing all deps)
+        run: npm install svgson
+
       - name: Generate comment markup
         run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
         id: comment-markup

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/cctv.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 9h.01" />
-  <path d="M16.75 12H22l-3.5 7-3.09-4.32" />
-  <path d="M18 9.5l-4 8-10.39-5.2a2.92 2.92 0 0 1-1.3-3.91L3.69 5.6a2.92 2.92 0 0 1 3.92-1.3Z" />
+  <path d="M16.75 12h3.632a1 1 0 0 1 .894 1.447l-2.034 4.069a1 1 0 0 1-1.708.134l-2.124-2.97" />
+  <path d="M17.106 9.053a1 1 0 0 1 .447 1.341l-3.106 6.211a1 1 0 0 1-1.342.447L3.61 12.3a2.92 2.92 0 0 1-1.3-3.91L3.69 5.6a2.92 2.92 0 0 1 3.92-1.3z" />
   <path d="M2 19h3.76a2 2 0 0 0 1.8-1.1L9 15" />
   <path d="M2 21v-4" />
+  <path d="M7 9h.01" />
 </svg>

icons/coffee.json

@@ -5,7 +5,8 @@
     "csandman",
     "mittalyashu",
     "ericfennis",
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jguddas"
   ],
   "tags": [
     "drink",

icons/coffee.svg

@@ -9,9 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
-  <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
-  <line x1="6" x2="6" y1="2" y2="4" />
-  <line x1="10" x2="10" y1="2" y2="4" />
-  <line x1="14" x2="14" y1="2" y2="4" />
+  <path d="M10 2v2" />
+  <path d="M14 2v2" />
+  <path d="M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1" />
+  <path d="M6 2v2" />
 </svg>

icons/drumstick.json

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

icons/drumstick.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M15.45 15.4c-2.13.65-4.3.32-5.7-1.1-2.29-2.27-1.76-6.5 1.17-9.42 2.93-2.93 7.15-3.46 9.43-1.18 1.41 1.41 1.74 3.57 1.1 5.71-1.4-.51-3.26-.02-4.64 1.36-1.38 1.38-1.87 3.23-1.36 4.63z" />
-  <path d="m11.25 15.6-2.16 2.16a2.5 2.5 0 1 1-4.56 1.73 2.49 2.49 0 0 1-1.41-4.24 2.5 2.5 0 0 1 3.14-.32l2.16-2.16" />
+  <path d="M15.4 15.63a7.875 6 135 1 1 6.23-6.23 4.5 3.43 135 0 0-6.23 6.23" />
+  <path d="m8.29 12.71-2.6 2.6a2.5 2.5 0 1 0-1.65 4.65A2.5 2.5 0 1 0 8.7 18.3l2.59-2.59" />
 </svg>

icons/fingerprint.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jguddas"
   ],
   "tags": [
     "2fa",

icons/fingerprint.svg

@@ -9,13 +9,13 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M2 12C2 6.5 6.5 2 12 2a10 10 0 0 1 8 4" />
-  <path d="M5 19.5C5.5 18 6 15 6 12c0-.7.12-1.37.34-2" />
-  <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
   <path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" />
-  <path d="M8.65 22c.21-.66.45-1.32.57-2" />
   <path d="M14 13.12c0 2.38 0 6.38-1 8.88" />
+  <path d="M17.29 21.02c.12-.6.43-2.3.5-3.02" />
+  <path d="M2 12a10 10 0 0 1 18-6" />
   <path d="M2 16h.01" />
   <path d="M21.8 16c.2-2 .131-5.354 0-6" />
-  <path d="M9 6.8a6 6 0 0 1 9 5.2c0 .47 0 1.17-.02 2" />
+  <path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" />
+  <path d="M8.65 22c.21-.66.45-1.32.57-2" />
+  <path d="M9 6.8a6 6 0 0 1 9 5.2v2" />
 </svg>

icons/mouse-off.json

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

icons/mouse-off.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 6v.343" />
+  <path d="M18.218 18.218A7 7 0 0 1 5 15V9a7 7 0 0 1 .782-3.218" />
+  <path d="M19 13.343V9A7 7 0 0 0 8.56 2.902" />
+  <path d="M22 22 2 2" />
+</svg>

icons/pen-tool.json

@@ -3,7 +3,8 @@
   "contributors": [
     "ashygee",
     "mittalyashu",
-    "ericfennis"
+    "ericfennis",
+    "jguddas"
   ],
   "tags": [
     "vector",

icons/pen-tool.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m12 19 7-7 3 3-7 7-3-3z" />
-  <path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
-  <path d="m2 2 7.586 7.586" />
+  <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" />
+  <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" />
+  <path d="m2.3 2.3 7.286 7.286" />
   <circle cx="11" cy="11" r="2" />
 </svg>

icons/pilcrow-left.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "zaaakher",
+    "danielbayley",
+    "jonas-hoebenreich"
+  ],
+  "tags": [
+    "direction",
+    "paragraph",
+    "mark",
+    "paraph",
+    "blind",
+    "typography",
+    "type",
+    "text",
+    "prose",
+    "symbol"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/pilcrow-left.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M14 3v11" />
+  <path d="M14 9h-3a3 3 0 0 1 0-6h9" />
+  <path d="M18 3v11" />
+  <path d="M22 18H2l4-4" />
+  <path d="m6 22-4-4" />
+</svg>

icons/pilcrow-right.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "zaaakher",
+    "danielbayley",
+    "jonas-hoebenreich"
+  ],
+  "tags": [
+    "direction",
+    "paragraph",
+    "mark",
+    "paraph",
+    "blind",
+    "typography",
+    "type",
+    "text",
+    "prose",
+    "symbol"
+  ],
+  "categories": [
+    "text"
+  ]
+}

icons/pilcrow-right.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 3v11" />
+  <path d="M10 9H7a1 1 0 0 1 0-6h8" />
+  <path d="M14 3v11" />
+  <path d="m18 14 4 4H2" />
+  <path d="m22 18-4 4" />
+</svg>

icons/rotate-3d.json

@@ -7,7 +7,8 @@
     "gizmo",
     "transform",
     "orientation",
-    "orbit"
+    "orbit",
+    "axis"
   ],
   "categories": [
     "design"

icons/tram-front.svg

@@ -14,6 +14,6 @@
   <path d="M12 3v8" />
   <path d="m8 19-2 3" />
   <path d="m18 22-2-3" />
-  <path d="M8 15h0" />
-  <path d="M16 15h0" />
+  <path d="M8 15h.01" />
+  <path d="M16 15h.01" />
 </svg>

packages/lucide-figma/package.json

@@ -24,7 +24,7 @@
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.0.0",
     "typescript": "^4.3.2",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vite-plugin-singlefile": "^0.5.1"
   }
 }

packages/lucide-preact/package.json

@@ -53,7 +53,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^5.3.3",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-react-native/package.json

@@ -58,7 +58,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.8.4",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-react/package.json

@@ -62,7 +62,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.9.5",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-solid/package.json

@@ -65,7 +65,7 @@
     "rollup": "^4.9.2",
     "solid-js": "^1.8.7",
     "typescript": "^4.9.4",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vite-plugin-solid": "^2.10.1",
     "vitest": "^1.1.1",
     "esbuild": "^0.19.11"

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
 

packages/lucide-svelte/package.json

@@ -67,7 +67,7 @@
     "svelte-check": "^3.4.4",
     "svelte-preprocess": "^5.0.4",
     "typescript": "^5.1.6",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-vue-next/package.json

@@ -53,7 +53,7 @@
     "@vue/test-utils": "2.4.3",
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^1.1.1",
     "vue": "^3.0.1"
   },

packages/lucide-vue/package.json

@@ -52,7 +52,7 @@
     "@vue/test-utils": "1.3.0",
     "rollup": "^3.23.0",
     "typescript": "^4.9.5",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^0.32.2",
     "vue": "2.7.14",
     "vue-template-compiler": "2.7.14"

packages/lucide/package.json

@@ -50,7 +50,7 @@
     "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.9.3",
-    "vite": "5.0.12",
+    "vite": "5.0.13",
     "vitest": "^1.1.1"
   }
 }

pnpm-lock.yaml

@@ -210,8 +210,8 @@ importers:
         specifier: ^4.9.3
         version: 4.9.5
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -353,11 +353,11 @@ importers:
         specifier: ^4.3.2
         version: 4.9.5
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vite-plugin-singlefile:
         specifier: ^0.5.1
-        version: 0.5.1(vite@5.0.12)
+        version: 0.5.1(vite@5.0.13)
 
   packages/lucide-preact:
     devDependencies:
@@ -372,7 +372,7 @@ importers:
         version: link:../shared
       '@preact/preset-vite':
         specifier: ^2.7.0
-        version: 2.8.1(@babel/core@7.23.9)(preact@10.19.4)(vite@5.0.12)
+        version: 2.8.1(@babel/core@7.23.9)(preact@10.19.4)(vite@5.0.13)
       '@testing-library/jest-dom':
         specifier: ^6.1.4
         version: 6.4.2(vitest@1.2.2)
@@ -395,8 +395,8 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -423,7 +423,7 @@ importers:
         version: 18.2.55
       '@vitejs/plugin-react':
         specifier: ^4.2.1
-        version: 4.2.1(vite@5.0.12)
+        version: 4.2.1(vite@5.0.13)
       jest-serializer-html:
         specifier: ^7.1.0
         version: 7.1.0
@@ -443,8 +443,8 @@ importers:
         specifier: ^4.9.5
         version: 4.9.5
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -471,7 +471,7 @@ importers:
         version: 18.2.17
       '@vitejs/plugin-react':
         specifier: ^4.2.1
-        version: 4.2.1(vite@5.0.12)
+        version: 4.2.1(vite@5.0.13)
       jest-serializer-html:
         specifier: ^7.1.0
         version: 7.1.0
@@ -497,8 +497,8 @@ importers:
         specifier: ^4.8.4
         version: 4.9.5
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -551,11 +551,11 @@ importers:
         specifier: ^4.9.4
         version: 4.9.5
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vite-plugin-solid:
         specifier: ^2.10.1
-        version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.14)(vite@5.0.12)
+        version: 2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.14)(vite@5.0.13)
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -591,7 +591,7 @@ importers:
         version: 2.2.6(svelte@4.1.2)(typescript@5.1.6)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^2.4.2
-        version: 2.4.3(svelte@4.1.2)(vite@5.0.12)
+        version: 2.4.3(svelte@4.1.2)(vite@5.0.13)
       '@testing-library/jest-dom':
         specifier: ^6.1.4
         version: 6.4.2(vitest@1.2.2)
@@ -620,8 +620,8 @@ importers:
         specifier: ^5.1.6
         version: 5.1.6
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -645,7 +645,7 @@ importers:
         version: 5.9.0(vue-template-compiler@2.7.14)(vue@2.7.14)
       '@vitejs/plugin-vue2':
         specifier: 2.2.0
-        version: 2.2.0(vite@5.0.12)(vue@2.7.14)
+        version: 2.2.0(vite@5.0.13)(vue@2.7.14)
       '@vue/test-utils':
         specifier: 1.3.0
         version: 1.3.0(vue-template-compiler@2.7.14)(vue@2.7.14)
@@ -656,8 +656,8 @@ importers:
         specifier: ^4.9.5
         version: 4.9.5
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^0.32.2
         version: 0.32.4
@@ -687,7 +687,7 @@ importers:
         version: 8.0.2(vue@3.4.18)
       '@vitejs/plugin-vue':
         specifier: ^4.6.2
-        version: 4.6.2(vite@5.0.12)(vue@3.4.18)
+        version: 4.6.2(vite@5.0.13)(vue@3.4.18)
       '@vue/test-utils':
         specifier: 2.4.3
         version: 2.4.3(vue@3.4.18)
@@ -698,8 +698,8 @@ importers:
         specifier: ^6.1.0
         version: 6.1.0(rollup@4.9.6)(typescript@4.9.5)
       vite:
-        specifier: 5.0.12
-        version: 5.0.12
+        specifier: 5.0.13
+        version: 5.0.13
       vitest:
         specifier: ^1.1.1
         version: 1.2.2(jsdom@20.0.3)
@@ -6335,7 +6335,7 @@ packages:
     dev: false
     optional: true
 
-  /@preact/preset-vite@2.8.1(@babel/core@7.23.9)(preact@10.19.4)(vite@5.0.12):
+  /@preact/preset-vite@2.8.1(@babel/core@7.23.9)(preact@10.19.4)(vite@5.0.13):
     resolution: {integrity: sha512-a9KV4opdj17X2gOFuGup0aE+sXYABX/tJi/QDptOrleX4FlnoZgDWvz45tHOdVfrZX+3uvVsIYPHxRsTerkDNA==}
     peerDependencies:
       '@babel/core': 7.x
@@ -6344,7 +6344,7 @@ packages:
       '@babel/core': 7.23.9
       '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.23.9)
       '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.23.9)
-      '@prefresh/vite': 2.4.1(preact@10.19.4)(vite@5.0.12)
+      '@prefresh/vite': 2.4.1(preact@10.19.4)(vite@5.0.13)
       '@rollup/pluginutils': 4.2.1
       babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.23.9)
       debug: 4.3.4
@@ -6352,7 +6352,7 @@ packages:
       magic-string: 0.30.5
       node-html-parser: 6.1.12
       resolve: 1.22.8
-      vite: 5.0.12
+      vite: 5.0.13
     transitivePeerDependencies:
       - preact
       - supports-color
@@ -6374,7 +6374,7 @@ packages:
     resolution: {integrity: sha512-KtC/fZw+oqtwOLUFM9UtiitB0JsVX0zLKNyRTA332sqREqSALIIQQxdUCS1P3xR/jT1e2e8/5rwH6gdcMLEmsQ==}
     dev: true
 
-  /@prefresh/vite@2.4.1(preact@10.19.4)(vite@5.0.12):
+  /@prefresh/vite@2.4.1(preact@10.19.4)(vite@5.0.13):
     resolution: {integrity: sha512-vthWmEqu8TZFeyrBNc9YE5SiC3DVSzPgsOCp/WQ7FqdHpOIJi7Z8XvCK06rBPOtG4914S52MjG9Ls22eVAiuqQ==}
     peerDependencies:
       preact: ^10.4.0
@@ -6386,7 +6386,7 @@ packages:
       '@prefresh/utils': 1.2.0
       '@rollup/pluginutils': 4.2.1
       preact: 10.19.4
-      vite: 5.0.12
+      vite: 5.0.13
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7096,7 +7096,7 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@types/estree': 1.0.1
+      '@types/estree': 1.0.5
       estree-walker: 2.0.2
       picomatch: 2.3.1
       rollup: 4.9.6
@@ -7297,7 +7297,7 @@ packages:
       - typescript
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.3)(svelte@4.1.2)(vite@5.0.12):
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.3)(svelte@4.1.2)(vite@5.0.13):
     resolution: {integrity: sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -7305,30 +7305,30 @@ packages:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.3(svelte@4.1.2)(vite@5.0.12)
+      '@sveltejs/vite-plugin-svelte': 2.4.3(svelte@4.1.2)(vite@5.0.13)
       debug: 4.3.4
       svelte: 4.1.2
-      vite: 5.0.12
+      vite: 5.0.13
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.4.3(svelte@4.1.2)(vite@5.0.12):
+  /@sveltejs/vite-plugin-svelte@2.4.3(svelte@4.1.2)(vite@5.0.13):
     resolution: {integrity: sha512-NY2h+B54KHZO3kDURTdARqthn6D4YSIebtfW75NvZ/fwyk4G+AJw3V/i0OBjyN4406Ht9yZcnNWMuRUFnDNNiA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.3)(svelte@4.1.2)(vite@5.0.12)
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.3)(svelte@4.1.2)(vite@5.0.13)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.2
       svelte: 4.1.2
       svelte-hmr: 0.15.2(svelte@4.1.2)
-      vite: 5.0.12
-      vitefu: 0.2.4(vite@5.0.12)
+      vite: 5.0.13
+      vitefu: 0.2.4(vite@5.0.13)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -7668,6 +7668,7 @@ packages:
 
   /@types/estree@1.0.1:
     resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+    dev: true
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
@@ -8350,7 +8351,7 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-react@4.2.1(vite@5.0.12):
+  /@vitejs/plugin-react@4.2.1(vite@5.0.13):
     resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -8361,30 +8362,30 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.9)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.0.12
+      vite: 5.0.13
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue2@2.2.0(vite@5.0.12)(vue@2.7.14):
+  /@vitejs/plugin-vue2@2.2.0(vite@5.0.13)(vue@2.7.14):
     resolution: {integrity: sha512-1km7zEuZ/9QRPvzXSjikbTYGQPG86Mq1baktpC4sXqsXlb02HQKfi+fl8qVS703JM7cgm24Ga9j+RwKmvFn90A==}
     engines: {node: ^14.18.0 || >= 16.0.0}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
       vue: ^2.7.0-0
     dependencies:
-      vite: 5.0.12
+      vite: 5.0.13
       vue: 2.7.14
     dev: true
 
-  /@vitejs/plugin-vue@4.6.2(vite@5.0.12)(vue@3.4.18):
+  /@vitejs/plugin-vue@4.6.2(vite@5.0.13)(vue@3.4.18):
     resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 5.0.12
+      vite: 5.0.13
       vue: 3.4.18(typescript@4.9.5)
     dev: true
 
@@ -8495,7 +8496,7 @@ packages:
     resolution: {integrity: sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==}
     dependencies:
       '@babel/parser': 7.23.9
-      postcss: 8.4.27
+      postcss: 8.4.35
       source-map: 0.6.1
     dev: true
 
@@ -10700,7 +10701,7 @@ packages:
       css-select: 4.3.0
       parse5: 6.0.1
       parse5-htmlparser2-tree-adapter: 6.0.1
-      postcss: 8.4.27
+      postcss: 8.4.35
       pretty-bytes: 5.6.0
     dev: true
 
@@ -10762,12 +10763,12 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.27)
-      postcss: 8.4.27
-      postcss-modules-extract-imports: 3.0.0(postcss@8.4.27)
-      postcss-modules-local-by-default: 4.0.3(postcss@8.4.27)
-      postcss-modules-scope: 3.0.0(postcss@8.4.27)
-      postcss-modules-values: 4.0.0(postcss@8.4.27)
+      icss-utils: 5.1.0(postcss@8.4.35)
+      postcss: 8.4.35
+      postcss-modules-extract-imports: 3.0.0(postcss@8.4.35)
+      postcss-modules-local-by-default: 4.0.3(postcss@8.4.35)
+      postcss-modules-scope: 3.0.0(postcss@8.4.35)
+      postcss-modules-values: 4.0.0(postcss@8.4.35)
       postcss-value-parser: 4.2.0
       semver: 7.5.4
       webpack: 5.76.1(esbuild@0.14.22)
@@ -13933,13 +13934,13 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
-  /icss-utils@5.1.0(postcss@8.4.27):
+  /icss-utils@5.1.0(postcss@8.4.35):
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.35
     dev: true
 
   /ieee754@1.2.1:
@@ -16243,12 +16244,6 @@ packages:
     resolution: {integrity: sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==}
     dev: false
 
-  /nanoid@3.3.6:
-    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-    dev: true
-
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -17898,45 +17893,45 @@ packages:
       postcss: 8.4.5
     dev: true
 
-  /postcss-modules-extract-imports@3.0.0(postcss@8.4.27):
+  /postcss-modules-extract-imports@3.0.0(postcss@8.4.35):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.35
     dev: true
 
-  /postcss-modules-local-by-default@4.0.3(postcss@8.4.27):
+  /postcss-modules-local-by-default@4.0.3(postcss@8.4.35):
     resolution: {integrity: sha512-2/u2zraspoACtrbFRnTijMiQtb4GW4BvatjaG/bCjYQo8kLTdevCUlwuBHx2sCnSyrI3x3qj4ZK1j5LQBgzmwA==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.27)
-      postcss: 8.4.27
+      icss-utils: 5.1.0(postcss@8.4.35)
+      postcss: 8.4.35
       postcss-selector-parser: 6.0.13
       postcss-value-parser: 4.2.0
     dev: true
 
-  /postcss-modules-scope@3.0.0(postcss@8.4.27):
+  /postcss-modules-scope@3.0.0(postcss@8.4.35):
     resolution: {integrity: sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.35
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-modules-values@4.0.0(postcss@8.4.27):
+  /postcss-modules-values@4.0.0(postcss@8.4.35):
     resolution: {integrity: sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==}
     engines: {node: ^10 || ^12 || >= 14}
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      icss-utils: 5.1.0(postcss@8.4.27)
-      postcss: 8.4.27
+      icss-utils: 5.1.0(postcss@8.4.35)
+      postcss: 8.4.35
     dev: true
 
   /postcss-nesting@10.2.0(postcss@8.4.27):
@@ -18210,7 +18205,7 @@ packages:
     resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
     dev: true
@@ -18227,7 +18222,7 @@ packages:
     resolution: {integrity: sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
     dev: true
@@ -18857,7 +18852,7 @@ packages:
       adjust-sourcemap-loader: 4.0.0
       convert-source-map: 1.9.0
       loader-utils: 2.0.4
-      postcss: 8.4.27
+      postcss: 8.4.35
       source-map: 0.6.1
     dev: true
 
@@ -21562,7 +21557,7 @@ packages:
       debug: 4.3.4
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.0.12
+      vite: 5.0.13
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -21574,7 +21569,7 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-singlefile@0.5.1(vite@5.0.12):
+  /vite-plugin-singlefile@0.5.1(vite@5.0.13):
     resolution: {integrity: sha512-yA9lWd6bSet0Br4/s34YPNnVBlDl2MbxlHDRrLrBCncD7q+HO5GGsw29Ymp+ydZ3eb4UU2GECgX2MJZW+qnoeQ==}
     peerDependencies:
       vite: ^2.1.2
@@ -21583,10 +21578,10 @@ packages:
       esbuild: 0.9.7
       rollup: 2.79.1
       rollup-plugin-esbuild: 3.0.4(esbuild@0.9.7)(rollup@2.79.1)
-      vite: 5.0.12
+      vite: 5.0.13
     dev: true
 
-  /vite-plugin-solid@2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.14)(vite@5.0.12):
+  /vite-plugin-solid@2.10.1(@testing-library/jest-dom@6.4.2)(solid-js@1.8.14)(vite@5.0.13):
     resolution: {integrity: sha512-kfVdNLWaJqaJVL52U6iCCKNW/nXE7bS1VVGOWPGllOkJfcNILymVSY0LCBLSnyy0iYnRtrXpiHm14rMuzeC7CA==}
     peerDependencies:
       '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
@@ -21603,8 +21598,8 @@ packages:
       merge-anything: 5.1.7
       solid-js: 1.8.14
       solid-refresh: 0.6.3(solid-js@1.8.14)
-      vite: 5.0.12
-      vitefu: 0.2.5(vite@5.0.12)
+      vite: 5.0.13
+      vitefu: 0.2.5(vite@5.0.13)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -21639,7 +21634,7 @@ packages:
     dependencies:
       '@types/node': 20.4.5
       esbuild: 0.18.20
-      postcss: 8.4.27
+      postcss: 8.4.35
       rollup: 3.29.4
     optionalDependencies:
       fsevents: 2.3.3
@@ -21680,7 +21675,42 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitefu@0.2.4(vite@5.0.12):
+  /vite@5.0.13:
+    resolution: {integrity: sha512-/9ovhv2M2dGTuA+dY93B9trfyWMDRQw2jdVBhHNP6wr0oF34wG2i/N55801iZIpgUpnHDm4F/FabGQLyc+eOgg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.19.12
+      postcss: 8.4.35
+      rollup: 4.9.6
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vitefu@0.2.4(vite@5.0.13):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
@@ -21688,10 +21718,10 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.0.12
+      vite: 5.0.13
     dev: true
 
-  /vitefu@0.2.5(vite@5.0.12):
+  /vitefu@0.2.5(vite@5.0.13):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
@@ -21699,7 +21729,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.0.12
+      vite: 5.0.13
     dev: true
 
   /vitepress@1.0.0-rc.36(@algolia/client-search@4.19.1)(fuse.js@6.6.2)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.8.2)(typescript@4.9.5):
@@ -21866,7 +21896,7 @@ packages:
       strip-literal: 1.3.0
       tinybench: 2.6.0
       tinypool: 0.8.2
-      vite: 5.0.12
+      vite: 5.0.13
       vite-node: 1.2.2
       why-is-node-running: 2.2.2
     transitivePeerDependencies:

scripts/generateChangedIconsCommentMarkup.mjs

@@ -1,6 +1,13 @@
 import fs from 'fs';
 import path from 'path';
-import { shuffle, readSvgDirectory, getCurrentDirPath, minifySvg } from './helpers.mjs';
+import { parseSync } from 'svgson';
+import {
+  shuffle,
+  readSvgDirectory,
+  getCurrentDirPath,
+  minifySvg,
+  toPascalCase,
+} from './helpers.mjs';
 
 const currentDir = getCurrentDirPath(import.meta.url);
 const ICONS_DIR = path.resolve(currentDir, '../icons');
@@ -70,6 +77,18 @@ const changeFilesXRayImageTags = getImageTagsByFiles(
   400,
 ).join(' ');
 
+const readyToUseCode = changedFiles
+  .map((changedFile) => {
+    const svgContent = fs.readFileSync(path.join(process.cwd(), changedFile), 'utf-8');
+    const name = path.basename(changedFile, '.svg');
+    return `const ${toPascalCase(name)}Icon = createLucideIcon('${toPascalCase(name)}', [
+  ${parseSync(svgContent)
+    .children.map(({ name, attributes }) => JSON.stringify([name, attributes]))
+    .join(',\n  ')}
+])`;
+  })
+  .join('\n\n');
+
 const commentMarkup = `\
 ### Added or changed icons
 ${changeFiles2pxStrokeImageTags}
@@ -93,6 +112,20 @@ ${changeFilesLowDPIImageTags}<br/>
 <summary>Icon X-rays</summary>
 ${changeFilesXRayImageTags}
 </details>
+
+${
+  // collapse code block if it's too long
+  readyToUseCode.split('/n').length < 20
+    ? '### Icons as code'
+    : `<details>
+<summary><h3>Icons as code</h3></summary>
+`
+}
+Only working for:
+\`lucide-react\`, \`lucide-react-native\`, \`lucide-preact\`, \`lucide-vue-next\`
+\`\`\`ts
+${readyToUseCode}
+\`\`\`${readyToUseCode.split('/n').length < 20 ? '' : '\n\n</details>'}
 `;
 
 console.log(commentMarkup);