fix(packages/icons): finalize exportTemplate before migration to input signals & effect to build component data

# Conflicts:
#	packages/lucide-angular/package.json
#	packages/lucide-angular/scripts/exportTemplate.mts
#	pnpm-lock.yaml
#	tools/build-icons/building/generateExportsFile.ts
#	tools/build-icons/building/generateIconFiles.ts

docs/.vitepress/api/release-info/index.get.ts

@@ -1,13 +0,0 @@
-import { eventHandler, setResponseHeader } from 'h3';
-import releaseMeta from '../../data/releaseMetaData.json';
-
-export default eventHandler((event) => {
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
-
-  return Object.fromEntries(
-    Object.entries(releaseMeta).map(
-      ([name, { createdRelease }]) => [name, createdRelease.version]
-    )
-  );
-});

docs/.vitepress/api/test.ts

@@ -0,0 +1,3 @@
+export default eventHandler(() => {
+  return { nitro: 'Is Awesome! asda' };
+});

docs/.vitepress/lib/getFallbackZip.tsx

@@ -1,5 +1,5 @@
 import { createLucideIcon } from 'lucide-react/src/lucide-react';
-import { type LucideProps, type IconNode } from 'lucide-react/src/createLucideIcon';
+import { type LucideProps, type IconNode } from 'lucide-react/src/types';
 import { IconEntity } from '../theme/types';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { IconContent } from './generateZip';

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

@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import { useData } from 'vitepress';
 import { computed } from 'vue';
 
 const props = defineProps<{
-  modelValue: string
+  modelValue: string;
-  id: string
+  id: string;
-}>()
+}>();
 
-const emit = defineEmits(['update:modelValue'])
+const { isDark } = useData();
+
+const emit = defineEmits(['update:modelValue']);
 
 const value = computed({
-  get: () => props.modelValue,
+  get: () => {
-  set: (val) => emit('update:modelValue', val)
+    if (props.modelValue == null || props.modelValue === 'currentColor') {
-})
+      return isDark.value ? '#ffffff' : '#000000';
+    }
+
+    return props.modelValue;
+  },
+  set: (val) => emit('update:modelValue', val),
+});
 </script>
 
 <template>
   <div class="color-picker">
     <div class="color-input-wrapper">
-      <!-- TODO: Add currentColor div if value is currentColor -->
       <input
         type="color"
         :id="id"
@@ -33,6 +41,7 @@ const value = computed({
       class="color-input-text"
       aria-label="Color picker input"
       v-model="value"
+      placeholder="[default]"
     />
   </div>
 </template>
@@ -45,19 +54,21 @@ const value = computed({
   top: -5px;
   left: -5px;
 }
+
 .color-input-wrapper {
   height: 24px;
   width: 24px;
   overflow: hidden;
   position: relative;
-  border-radius: 12px;
+  border-radius: 4px;
   flex-shrink: 0;
 }
+
 .color-picker {
   background: var(--color-picker-bg, var(--vp-c-bg-alt));
   border-radius: 8px;
   color: var(--vp-c-text-2);
-  padding: 4px 8px;
+  padding: 3px 8px 3px 3px;
   height: auto;
   font-size: 14px;
   text-align: left;
@@ -66,6 +77,10 @@ const value = computed({
   display: flex;
   align-items: center;
   gap: 2px;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
 .color-input-text {
@@ -79,15 +94,18 @@ const value = computed({
   text-align: left;
   border-radius: 8px;
   cursor: text;
-  transition: border-color 0.25s, background 0.4s ease;
+  transition:
+    border-color 0.25s,
+    background 0.4s ease;
+  letter-spacing: 1px;
 }
 
-.color-picker:hover, .color-picker:focus {
+.color-picker:hover,
+.color-picker:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }
 
-.color-input[value="currentColor"] {
+.color-input[value='currentColor'] {
-
 }
 </style>

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

@@ -1,22 +1,27 @@
 <script setup>
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import Icon from 'lucide-vue-next/src/Icon';
-import { search }  from '../../../data/iconNodes'
+import { search } from '../../../data/iconNodes';
-
-const SearchIcon = createLucideIcon('search', search)
 
 defineProps({
   shortcut: {
     type: String,
-    required: false
+    required: false,
-  }
+  },
-})
+});
 </script>
 
 <template>
   <button class="fake-input">
-    <component :is="SearchIcon" class="search-icon"/>
+    <Icon
-    <slot/>
+      :iconNode="search"
-    <kbd v-if="shortcut" class="shortcut">{{ shortcut }}</kbd>
+      class="search-icon"
+    />
+    <slot />
+    <kbd
+      v-if="shortcut"
+      class="shortcut"
+      >{{ shortcut }}</kbd
+    >
   </button>
 </template>
 
@@ -34,10 +39,14 @@ defineProps({
   cursor: text;
   display: flex;
   gap: 12px;
-  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
-.fake-input:hover, .fake-input:focus {
+.fake-input:hover,
+.fake-input:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }

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

@@ -5,7 +5,6 @@
 </template>
 
 <style scoped>
-
 .icon-button {
   display: inline-flex;
   border: 1px solid transparent;

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

@@ -12,6 +12,9 @@ export interface InputProps {
 
 <script setup lang="ts">
 import { ref, onMounted, nextTick, watch } from 'vue';
+import Icon from 'lucide-vue-next/src/Icon';
+import { x } from '../../../data/iconNodes';
+import IconButton from './IconButton.vue';
 
 const props = withDefaults(defineProps<InputProps>(), {
   type: 'text',
@@ -21,7 +24,7 @@ const input = ref();
 const wrapperEl = ref();
 const shortcutEl = ref();
 
-defineEmits(['change', 'input', 'update:modelValue']);
+const emit = defineEmits(['change', 'input', 'update:modelValue']);
 
 const updateShortcutSpacing = () => {
   nextTick(() => {
@@ -35,6 +38,11 @@ const updateShortcutSpacing = () => {
 onMounted(updateShortcutSpacing);
 watch(() => props.shortcut, updateShortcutSpacing);
 
+function onClear() {
+  emit('update:modelValue', '');
+  input.value.focus();
+}
+
 defineExpose({
   focus: () => {
     input.value.focus();
@@ -60,6 +68,17 @@ defineExpose({
       v-bind="$attrs"
       @input="$emit('update:modelValue', $event.target.value)"
     />
+    <IconButton
+      @click="onClear"
+      v-if="type === 'search' && modelValue"
+      class="clear-button"
+      aria-label="Clear input"
+    >
+      <Icon
+        :iconNode="x"
+        :size="20"
+      />
+    </IconButton>
     <kbd
       v-if="shortcut"
       class="shortcut"
@@ -73,6 +92,7 @@ defineExpose({
 .input-wrapper {
   position: relative;
 }
+
 .input {
   justify-content: flex-start;
   border: 1px solid transparent;
@@ -82,7 +102,10 @@ defineExpose({
   height: 40px;
   background-color: var(--vp-c-bg-alt);
   font-size: 14px;
-  transition: border-color 0.2s ease-in-out;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
 .input.has-shortcut {
@@ -99,6 +122,14 @@ defineExpose({
   padding-left: 52px;
 }
 
+.clear-button {
+  position: absolute;
+  right: 56px;
+  top: 9px;
+  padding: 4px;
+  transition: background-color .25s;
+}
+
 .shortcut {
   position: absolute;
   right: 12px;

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

@@ -7,11 +7,8 @@ export default {
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import Input from './Input.vue';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import Icon from 'lucide-vue-next/src/Icon';
-import { search, x } from '../../../data/iconNodes';
+import { search } from '../../../data/iconNodes';
-
-const SearchIcon = createLucideIcon('search', search);
-const XIcon = createLucideIcon('close', x);
 
 interface Props {
   modelValue: string;
@@ -34,10 +31,6 @@ const value = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 });
-
-const clear = () => {
-  value.value = '';
-};
 </script>
 
 <template>
@@ -50,26 +43,12 @@ const clear = () => {
     v-model="value"
     class="input-wrapper"
   >
-    <template #startIcon>
+    <template #icon>
-      <component
+      <Icon
-        :is="SearchIcon"
+        :iconNode="search"
         class="search-icon"
       />
     </template>
-
-    <template #endIcon>
-      <button
-        class="clear-button"
-        type="button"
-        v-if="value"
-      >
-        <component
-          :is="XIcon"
-          class="x-icon"
-          @click="clear"
-        />
-      </button>
-    </template>
   </Input>
 </template>
 
@@ -81,9 +60,7 @@ const clear = () => {
   padding: 0 10px 0 12px;
   width: 100%;
   height: 40px;
-  color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg-alt);
-  transition: border-color 0.15s ease-in-out;
 }
 
 .input:hover,
@@ -93,31 +70,9 @@ const clear = () => {
 }
 
 .input-wrapper:deep(.input) {
+  /* padding: 12px 24px; */
   padding-block: 12px;
   font-size: 14px;
   height: 48px;
 }
-
-.clear-button {
-  position: absolute;
-  padding: 4px;
-  right: 8px;
-  top: 8px;
-  width: 32px;
-  height: 32px;
-  background: transparent;
-  border-radius: 6px;
-  transition: background 0.2s ease;
-}
-
-.clear-button:hover {
-  background: var(--vp-button-alt-bg);
-}
-
-.input-wrapper:deep(.input)::-webkit-search-decoration,
-.input-wrapper:deep(.input)::-webkit-search-cancel-button,
-.input-wrapper:deep(.input)::-webkit-search-results-button,
-.input-wrapper:deep(.input)::-webkit-search-results-decoration {
-  display: none;
-}
 </style>

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { rotateCw } from '../../../data/iconNodes'
+import { rotateCw } from '../../../data/iconNodes';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import Icon from 'lucide-vue-next/src/Icon';
-import IconButton from "./IconButton.vue";
+import IconButton from './IconButton.vue';
-
-const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
 </script>
 
 <template>
   <IconButton class="reset-button">
-    <RotateIcon :size="20"/>
+    <Icon
+      :size="20"
+      :iconNode="rotateCw"
+    />
   </IconButton>
 </template>
 
@@ -32,6 +33,7 @@ const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(359deg);
   }

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

@@ -52,6 +52,7 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
+  /* background-color: var(--vp-c-neutral); */
   box-shadow: var(--vp-shadow-1);
 }
 

docs/.vitepress/theme/components/home/HomePackagesSection.data.ts

@@ -22,16 +22,16 @@ export default {
           logo: '/framework-logos/svelte.svg',
           label: 'Lucide documentation for Svelte',
         },
-        {
-          name: 'lucide-preact',
-          logo: '/framework-logos/preact.svg',
-          label: 'Lucide documentation for Preact',
-        },
         {
           name: 'lucide-solid',
           logo: '/framework-logos/solid.svg',
           label: 'Lucide documentation for Solid',
         },
+        {
+          name: 'lucide-preact',
+          logo: '/framework-logos/preact.svg',
+          label: 'Lucide documentation for Preact',
+        },
         {
           name: 'lucide-angular',
           logo: '/framework-logos/angular.svg',
@@ -48,11 +48,6 @@ export default {
           logo: '/framework-logos/react-native.svg',
           label: 'Lucide documentation for React Native',
         },
-        {
-          name: 'lucide-flutter',
-          logo: '/framework-logos/flutter.svg',
-          label: 'Lucide documentation for Flutter',
-        },
       ],
     };
   },

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

@@ -2,45 +2,48 @@
 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 VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue';
-import { x } from '../../../data/iconNodes'
+import { x } from '../../../data/iconNodes';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import Icon from 'lucide-vue-next/src/Icon';
 import { onMounted, ref } from 'vue';
 
-const { theme } = useData()
+const { theme } = useData();
-const showAd = useSessionStorage('show-carbon-ads', true)
+const showAd = useSessionStorage('show-carbon-ads', true);
-const carbonLoaded = ref(true)
+const carbonLoaded = ref(true);
 
 defineProps<{
-  drawerOpen: boolean
+  drawerOpen: boolean;
-}>()
+}>();
-
-const CloseIcon = createLucideIcon('Close', x)
 
 onMounted(() => {
   setTimeout(() => {
     if (window?._carbonads == null) {
-      carbonLoaded.value = false
+      carbonLoaded.value = false;
     }
-  }, 5000)
+  }, 5000);
-})
+});
 </script>
 
 <template>
   <div
     :class="{
       'drawer-open': drawerOpen,
-      'hide-ad': !(showAd && carbonLoaded)
+      'hide-ad': !(showAd && carbonLoaded),
     }"
     class="floating-ad"
     v-if="theme.carbonAds"
   >
-    <IconButton @click="showAd = false" class="hide-button">
+    <IconButton
-      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
+      @click="showAd = false"
-    </IconButton>
+      class="hide-button"
-    <VPDocAsideCarbonAds
+    >
-      :carbon-ads="theme.carbonAds"
+      <Icon
+        :iconNode="x"
+        :size="20"
+        absoluteStrokeWidth
       />
+    </IconButton>
+    <VPDocAsideCarbonAds :carbon-ads="theme.carbonAds" />
   </div>
 </template>
 
@@ -51,7 +54,9 @@ onMounted(() => {
   bottom: 32px;
   width: 224px;
   right: 32px;
-  transition: opacity 0.5s, transform 0.25s ease;
+  transition:
+    opacity 0.5s,
+    transform 0.25s ease;
 }
 
 .floating-ad.drawer-open {
@@ -67,8 +72,11 @@ onMounted(() => {
   transform: translateY(-288px) translateX(224px);
 }
 
-.floating-ad.drawer-open, .floating-ad.hide-ad {
+.floating-ad.drawer-open,
-  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+.floating-ad.hide-ad {
+  transition:
+    opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 @media (min-width: 1280px) {

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

@@ -1,70 +1,68 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import ButtonMenu from '../base/ButtonMenu.vue'
+import ButtonMenu from '../base/ButtonMenu.vue';
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
 import getSVGIcon from '../../utils/getSVGIcon';
 import downloadData from '../../utils/downloadData';
 
-const downloadText = 'Download!'
+const downloadText = 'Download!';
-const copiedText = 'Copied!'
+const copiedText = 'Copied!';
-const confettiText = ref(copiedText)
+const confettiText = ref(copiedText);
 const props = defineProps<{
-  name: string
+  name: string;
-  popoverPosition?: 'top' | 'bottom'
+  popoverPosition?: 'top' | 'bottom';
-}>()
+}>();
 
-const { size } = useIconStyleContext()
+const { size } = useIconStyleContext();
 
-const { animate, confetti } = useConfetti()
+const { animate, confetti } = useConfetti();
 
 function copySVG() {
-  confettiText.value = copiedText
+  confettiText.value = copiedText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
-  navigator.clipboard.writeText(svgString)
+  navigator.clipboard.writeText(svgString);
 
-  confetti()
+  confetti();
 }
 
 function copyDataUrl() {
-  confettiText.value = copiedText
+  confettiText.value = copiedText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
   // Create SVG data url
-  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
+  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
-  navigator.clipboard.writeText(dataUrl)
+  navigator.clipboard.writeText(dataUrl);
 
-  confetti()
+  confetti();
 }
 
 function downloadSVG() {
-  confettiText.value = downloadText
+  confettiText.value = downloadText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
-  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`);
-  confetti()
+  confetti();
 }
 
 function downloadPNG() {
-  confettiText.value = downloadText
+  confettiText.value = downloadText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
   const canvas = document.createElement('canvas');
   canvas.width = size.value;
   canvas.height = size.value;
-  const ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext('2d');
 
   const image = new Image();
   image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
-  image.onload = function() {
+  image.onload = function () {
     ctx.drawImage(image, 0, 0);
-    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'))
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'));
-    confetti()
+    confetti();
-  }
+  };
 }
-
-
 </script>
 
 <template>
@@ -75,10 +73,10 @@ function downloadPNG() {
     :data-confetti-text="confettiText"
     :popoverPosition="popoverPosition"
     :options="[
-      { text: 'Copy SVG' , onClick: copySVG },
+      { text: 'Copy SVG', onClick: copySVG },
-      { text: 'Copy Data URL' , onClick: copyDataUrl },
+      { text: 'Copy Data URL', onClick: copyDataUrl },
-      { text: 'Download SVG' , onClick: downloadSVG },
+      { text: 'Download SVG', onClick: downloadSVG },
-      { text: 'Download PNG' , onClick: downloadPNG },
+      { text: 'Download PNG', onClick: downloadPNG },
     ]"
   />
 </template>

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

@@ -1,41 +1,44 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { copy } from '../../../data/iconNodes';
-import { copy }  from '../../../data/iconNodes'
 import useConfetti from '../../composables/useConfetti';
-const { animate, confetti } = useConfetti()
+import Icon from 'lucide-vue-next/src/Icon';
-const slots = useSlots()
+const { animate, confetti } = useConfetti();
+const slots = useSlots();
 
-const copiedText = computed(() => slots.default?.()[0].children)
+const copiedText = computed(() => slots.default?.()[0].children);
 
 function copyText() {
-  navigator.clipboard.writeText(copiedText.value)
+  navigator.clipboard.writeText(copiedText.value);
 
-  confetti()
+  confetti();
 }
-
-const Copy = createLucideIcon('ChevronUp', copy)
 </script>
 
 <template>
   <h1
     class="icon-name confetti-button"
-    :class="{animate}"
+    :class="{ animate }"
     data-confetti-text="Copied!"
     @click="copyText"
   >
     <slot />
-    <Copy :size="20" class="copy-icon"/>
+    <Icon
+      :iconNode="copy"
+      :size="20"
+      class="copy-icon"
+    />
   </h1>
 </template>
 
 <style scoped>
 @import './confetti.css';
+
 .icon-name {
   font-size: 24px;
   font-weight: 500;
   line-height: 32px;
-  transition: background ease-in .15s;;
+  transition: background ease-in 0.15s;
   padding: 2px 8px;
   border-radius: 8px;
   width: auto;
@@ -48,7 +51,7 @@ const Copy = createLucideIcon('ChevronUp', copy)
 }
 
 .icon-name:hover .copy-icon {
-  opacity: .9;
+  opacity: 0.9;
 }
 
 .icon-name:before,
@@ -65,10 +68,10 @@ const Copy = createLucideIcon('ChevronUp', copy)
   opacity: 0;
   margin-left: 12px;
   margin-top: 6px;
-  transition:ease .3s opacity;
+  transition: ease 0.3s opacity;
 }
 
 .icon-name:hover .copy-icon:hover {
-  opacity: .6;
+  opacity: 0.6;
 }
 </style>

docs/.vitepress/theme/components/icons/IconsOverview.data.ts

@@ -1,21 +0,0 @@
-import { getAllData } from '../../../lib/icons';
-import { getAllCategoryFiles, mapCategoryIconCount } from '../../../lib/categories';
-import iconsMetaData from '../../../data/iconMetaData';
-import { fetchAllReleases } from '../../../../scripts/writeReleaseMetadata.mts';
-import { satisfies } from 'semver';
-
-export default {
-  async load() {
-    const versions = await fetchAllReleases();
-
-    const mappedVersions = versions
-      .map((tag) => tag.replace('v', ''))
-      .reverse()
-
-    mappedVersions.length = 100
-
-    return {
-      versions: mappedVersions,
-    };
-  },
-};

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted, watch, watchEffect } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, watch } from 'vue';
 import type { IconEntity } from '../../types';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import { useRoute } from 'vitepress';
@@ -11,13 +11,9 @@ import useSearchShortcut from '../../utils/useSearchShortcut';
 import StickyBar from './StickyBar.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
-import useFetchVersionIcons from '../../composables/useFetchVersionIcons';
 import chunkArray from '../../utils/chunkArray';
 import CarbonAdOverlay from './CarbonAdOverlay.vue';
-import VersionSelect from './VersionSelect.vue';
-import { sort, satisfies } from 'semver';
 import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
-import { data as versionData } from './IconsOverview.data';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -36,15 +32,9 @@ const props = defineProps<{
 }>();
 
 const activeIconName = ref(null);
-const selectedVersion = ref();
 
 const { execute: fetchTags, data: tags } = useFetchTags();
 const { execute: fetchCategories, data: categories } = useFetchCategories();
-const { execute: fetchVersionIcons, data: versionIcons } = useFetchVersionIcons(selectedVersion);
-
-watch(selectedVersion, () => {
-  fetchVersionIcons();
-});
 
 const overviewEl = ref<HTMLElement | null>(null);
 const { width: containerWidth } = useElementSize(overviewEl);
@@ -54,10 +44,11 @@ const columnSize = computed(() => {
 });
 
 const mappedIcons = computed(() => {
-  let icons = props.icons;
+  if (tags.value == null) {
+    return props.icons;
+  }
 
-  if (tags.value != null && categories.value != null) {
+  return props.icons.map((icon) => {
-    icons = props.icons.map((icon) => {
     const iconTags = tags.value[icon.name];
     const iconCategories = categories.value?.[icon.name] ?? [];
 
@@ -67,18 +58,6 @@ const mappedIcons = computed(() => {
       categories: iconCategories,
     };
   });
-  }
-
-  if (selectedVersion.value == null || versionIcons.value == null) {
-    console.log('no release info');
-
-    return icons;
-  }
-
-  return Object.values(versionIcons.value).filter(([name, iconNode]) => ({
-    name,
-    iconNode,
-  }));
 });
 
 const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput();
@@ -128,12 +107,6 @@ function onFocusSearchInput() {
   }
 }
 
-// function onFocusVersionSelect() {
-//   if (releaseInfo.value == null) {
-//     fetchReleaseInfo();
-//   }
-// }
-
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
@@ -156,17 +129,13 @@ function handleCloseDrawer() {
   >
     <StickyBar>
       <InputSearch
-        :placeholder="`Search ${mappedIcons.length} icons ...`"
+        :placeholder="`Search ${icons.length} icons ...`"
         v-model="searchQuery"
         ref="searchInput"
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"
         @focus="onFocusSearchInput"
       />
-      <VersionSelect
-        v-model="selectedVersion"
-        :versions="versionData.versions"
-      />
     </StickyBar>
     <NoResults
       v-if="searchPlaceholder.isNoResults"

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

@@ -1,75 +1,72 @@
 <script setup lang="ts">
-import { shallowRef, type Ref, watch, computed } from 'vue'
+import { shallowRef, type Ref, watch, computed } from 'vue';
-import { useCssVar, syncRef } from '@vueuse/core'
+import { useCssVar, syncRef } from '@vueuse/core';
-import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle'
+import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle';
-import RangeSlider from '../base/RangeSlider.vue'
+import RangeSlider from '../base/RangeSlider.vue';
-import InputField from '../base/InputField.vue'
+import InputField from '../base/InputField.vue';
-import ColorPicker from '../base/ColorPicker.vue'
+import ColorPicker from '../base/ColorPicker.vue';
-import ResetButton from '../base/ResetButton.vue'
+import ResetButton from '../base/ResetButton.vue';
-import Switch from '../base/Switch.vue'
+import Switch from '../base/Switch.vue';
 
 const props = defineProps<{
-  rootEl?: Ref<HTMLElement>
+  rootEl?: Ref<HTMLElement>;
-}>()
+}>();
 
-const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext()
+const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext();
-const documentRef = shallowRef<HTMLElement | undefined>(typeof document !== 'undefined' ? document?.documentElement : undefined)
+const documentRef = shallowRef<HTMLElement | undefined>(
+  typeof document !== 'undefined' ? document?.documentElement : undefined,
+);
 
-const colorCssVar = useCssVar(
+const colorCssVar = useCssVar('--customize-color', props.rootEl?.value ?? documentRef.value, {
-  '--customize-color',
+  initialValue: `${STYLE_DEFAULTS.color}`,
-  props.rootEl?.value ?? documentRef.value,
+});
-  {
-    initialValue: `${STYLE_DEFAULTS.color}`
-  }
-)
 
 const strokeWidthCssVar = useCssVar(
   '--customize-strokeWidth',
   props.rootEl?.value ?? documentRef.value,
   {
-    initialValue: `${STYLE_DEFAULTS.strokeWidth}`
+    initialValue: `${STYLE_DEFAULTS.strokeWidth}`,
-  }
+  },
-)
+);
 
-const sizeCssVar = useCssVar(
+const sizeCssVar = useCssVar('--customize-size', props.rootEl?.value ?? documentRef.value, {
-  '--customize-size',
+  initialValue: `${STYLE_DEFAULTS.size}`,
-  props.rootEl?.value ?? documentRef.value,
+});
-  {
-    initialValue: `${STYLE_DEFAULTS.size}`
-  }
-)
 
-syncRef(color, colorCssVar, { direction: 'ltr' })
+syncRef(color, colorCssVar, { direction: 'ltr' });
-syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' })
+syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' });
-syncRef(size, sizeCssVar, { direction: 'ltr' })
+syncRef(size, sizeCssVar, { direction: 'ltr' });
 
-function resetStyle () {
+function resetStyle() {
-  color.value = STYLE_DEFAULTS.color
+  color.value = STYLE_DEFAULTS.color;
-  strokeWidth.value = STYLE_DEFAULTS.strokeWidth
+  strokeWidth.value = STYLE_DEFAULTS.strokeWidth;
-  size.value = STYLE_DEFAULTS.size
+  size.value = STYLE_DEFAULTS.size;
-  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth
+  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth;
 }
 
 watch(absoluteStrokeWidth, (enabled) => {
-  const htmlEl = document.documentElement
+  const htmlEl = document.documentElement;
 
-  htmlEl.classList.toggle('absolute-stroke-width', enabled)
+  htmlEl.classList.toggle('absolute-stroke-width', enabled);
-})
+});
 
 const customizingActive = computed(() => {
-  return color.value !== STYLE_DEFAULTS.color
+  return (
-    || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
+    color.value !== STYLE_DEFAULTS.color ||
-    || size.value !== STYLE_DEFAULTS.size
+    strokeWidth.value !== STYLE_DEFAULTS.strokeWidth ||
-    || absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
+    size.value !== STYLE_DEFAULTS.size ||
-})
+    absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
+  );
+});
 </script>
 
 <template>
-  <div class="customizer-card" :class="{ customized: customizingActive }">
+  <div
+    class="customizer-card"
+    :class="{ customized: customizingActive }"
+  >
     <div class="card-header">
-      <h2 class="card-title">
+      <h2 class="card-title">Customizer</h2>
-        Customizer
-      </h2>
       <ResetButton @click="resetStyle"></ResetButton>
     </div>
     <InputField
@@ -77,7 +74,11 @@ const customizingActive = computed(() => {
       label="Color"
     >
       <template #display>
-        <ColorPicker v-model="color" id="icon-color" class="color-picker"/>
+        <ColorPicker
+          v-model="color"
+          id="icon-color"
+          class="color-picker"
+        />
       </template>
     </InputField>
 
@@ -117,7 +118,7 @@ const customizingActive = computed(() => {
 
     <InputField
       id="absolute-stroke-width"
-      label="Absolute Stroke width"
+      label="Absolute stroke width"
     >
       <Switch
         id="absolute-stroke-width"
@@ -143,6 +144,7 @@ const customizingActive = computed(() => {
   font-size: 16px;
   /* margin-bottom: 12px; */
 }
+
 .customizer-card {
   background: var(--vp-c-bg);
   padding: 12px 24px 24px;
@@ -151,7 +153,7 @@ const customizingActive = computed(() => {
   position: relative;
   z-index: 0;
   border: 1px solid transparent;
-  transition: border-color .4s ease-in-out;
+  transition: border-color 0.4s ease-in-out;
 }
 
 .customizer-card.customized {

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

@@ -14,7 +14,6 @@
   margin-top: -32px;
   width: 100%;
   display: flex;
-  gap: 16px;
   margin-bottom: 32px;
   background: var(--vp-c-bg);
   box-shadow: 0 16px 24px var(--vp-c-bg);

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

@@ -1,221 +0,0 @@
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxButton,
-  ComboboxOptions,
-  ComboboxOption,
-} from '@headlessui/vue';
-
-import { chevronsUpDown, check } from '../../../data/iconNodes';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
-
-const model = defineModel<string | undefined>();
-const props = defineProps<{
-  versions: string[];
-}>();
-
-let query = ref('');
-
-let filteredVersions = computed(() =>
-  query.value === ''
-    ? [...props.versions]
-    : props.versions.filter((version) =>
-        version
-          .toLowerCase()
-          .replace(/\s+/g, '')
-          .includes(query.value.toLowerCase().replace(/\s+/g, '')),
-      ),
-);
-
-const emit = defineEmits(['focus']);
-
-const ChevronUpDown = createLucideIcon('ChevronUpDown', chevronsUpDown);
-const Check = createLucideIcon('Check', check);
-</script>
-
-<template>
-  <Combobox v-model="model">
-    <div class="combobox-container">
-      <div class="combobox-input-container">
-        <ComboboxInput
-          class="combobox-input"
-          placeholder="Latest version"
-          @change="query = $event.target.value"
-          @focus="emit('focus')"
-        />
-        <ComboboxButton class="combobox-button">
-          <ChevronUpDown
-            class="icon-chevron"
-            aria-hidden="true"
-          />
-        </ComboboxButton>
-      </div>
-
-      <ComboboxOptions class="combobox-options">
-        <div
-          v-if="versions.length === 0 && query !== ''"
-          class="combobox-no-results"
-        >
-          No match!
-        </div>
-
-        <ComboboxOption
-          v-for="version in filteredVersions"
-          as="template"
-          :key="version"
-          :value="version"
-          v-slot="{ selected, active }"
-        >
-          <li
-            class="combobox-option"
-            :class="{ active: active }"
-          >
-            <span
-              class="combobox-option-text"
-              :class="{ selected: selected }"
-            >
-              {{ version }}
-            </span>
-            <span
-              v-if="selected"
-              class="combobox-option-icon"
-              :class="{ active: active }"
-            >
-              <Check
-                class="icon-check"
-                aria-hidden="true"
-              />
-            </span>
-          </li>
-        </ComboboxOption>
-      </ComboboxOptions>
-    </div>
-  </Combobox>
-</template>
-
-<style scoped>
-.combobox-input-container {
-  position: relative;
-  width: 100%;
-  height: 48px;
-  min-width: 160px;
-  cursor: default;
-  overflow: hidden;
-  background-color: var(--vp-c-bg-alt);
-  text-align: left;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  outline: none;
-}
-
-.combobox-input {
-  width: 100%;
-  border: none;
-  padding: 12px;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: var(--vp-c-text-1);
-  border: 1px solid transparent;
-  transition: border-color 0.15s ease-in-out;
-}
-
-.combobox-input:hover,
-.combobox-input:focus {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-bg-alt);
-}
-
-.combobox-button {
-  position: absolute;
-  top: 4px;
-  padding: 9px 8px;
-  right: 0;
-  display: flex;
-  align-items: center;
-  padding-right: 0.5rem;
-  z-index: 10;
-}
-
-.icon-chevron {
-  height: 20px;
-  width: 20px;
-  color: #9ca3af;
-}
-
-.combobox-options {
-  position: absolute;
-  margin-top: 0.25rem;
-  width: 100%;
-  max-width: 160px;
-  padding: 12px;
-  min-width: 128px;
-  overflow-y: auto;
-  border-radius: 12px;
-  border: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-c-bg-elv);
-  box-shadow: var(--vp-shadow-3);
-  transition: background-color 0.5s;
-  max-height: 240px;
-  outline: none;
-  right: 0;
-}
-
-.combobox-no-results {
-  position: relative;
-  cursor: default;
-  padding: 0.5rem 1rem;
-  color: #4b5563;
-}
-
-.combobox-option {
-  position: relative;
-  cursor: default;
-  padding: 2px 8px;
-  border-radius: 6px;
-  color: var(--vp-c-text-1);
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 500;
-  white-space: nowrap;
-  transition:
-    background-color 0.25s,
-    color 0.25s;
-}
-
-.combobox-option.active {
-  color: var(--vp-c-brand);
-  background-color: var(--vp-c-default-soft);
-}
-
-.combobox-option-text {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.combobox-option-text.selected {
-  font-weight: 500;
-}
-
-.combobox-option-icon {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  display: flex;
-  align-items: center;
-  padding-left: 0.75rem;
-  color: var(--vp-c-brand) !important;
-}
-
-.combobox-option-icon.active {
-  color: var(--vp-c-brand) !important;
-}
-
-.icon-check {
-  height: 20px;
-  width: 20px;
-}
-</style>

docs/.vitepress/theme/composables/useFetchVersionIcons.ts

@@ -1,17 +0,0 @@
-import { useFetch } from '@vueuse/core';
-import { computed, Ref } from 'vue';
-
-const useFetchVersionIcons = (version: Ref<string | undefined>) =>{
-  const fetchUrl = computed(() => {
-    if(version.value == null ) return ''
-    return `https://unpkg.com/lucide-static@${version.value}/icon-nodes.json`
-  })
-  return useFetch<Record<string, string>>(
-    fetchUrl,
-    {
-      refetch: true
-    }
-  ).json();
-}
-
-export default useFetchVersionIcons;

docs/.vitepress/types.d.ts

@@ -1,4 +1,4 @@
-import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
+import { type IconNode } from 'lucide-vue-next/src/types';
 import Vue from 'vue';
 
 declare module '*.vue' {
@@ -20,5 +20,6 @@ declare module 'node:module' {
 }
 
 declare module '*.node.json' {
-  export default IconNode;
+  const value: IconNode;
+  export default value;
 }

docs/package.json

@@ -9,14 +9,14 @@
     "docs:build": "pnpm run /^prebuild:.*/ && vitepress build",
     "docs:preview": "vitepress preview",
     "build:docs": "vitepress build",
-    "prebuild:iconNodes": "node ./scripts/writeIconNodes.mts",
+    "prebuild:iconNodes": "node ./scripts/writeIconNodes.mjs",
-    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mts",
+    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mjs",
-    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mts",
+    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mjs",
-    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mts",
+    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mjs",
-    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mts",
+    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mjs",
-    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mts",
+    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mjs",
-    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mts",
+    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mjs",
-    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mts",
+    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mjs",
     "dev": "npx nitropack dev",
     "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",

docs/scripts/writeIconRelatedIcons.mjs

@@ -42,7 +42,7 @@ const getRelatedIcons = (currentIcon, icons) => {
 };
 
 const iconsMetaDataPromises = svgFiles.map(async (iconName) => {
-  const metaDataFileContent = await fs.promises.readFile(`../icons/${iconName}`, 'utf-8');
+  const metaDataFileContent = await fs.promises.readFile(`../icons/${iconName}`);
   const metaData = JSON.parse(metaDataFileContent);
 
   const name = iconName.replace('.json', '');

docs/scripts/writeReleaseMetadata.mjs

@@ -29,7 +29,7 @@ if (!fs.existsSync(releaseMetaDataDirectory)) {
   fs.mkdirSync(releaseMetaDataDirectory);
 }
 
-export const fetchAllReleases = async () => {
+const fetchAllReleases = async () => {
   await git.fetch('https://github.com/lucide-icons/lucide.git', '--tags');
 
   return Promise.all(
@@ -73,7 +73,7 @@ const comparisonsPromises = tags.map(async (tag, index) => {
 const comparisons = await Promise.all(comparisonsPromises);
 const newReleaseMetaData = {};
 
-comparisons.forEach(({ tag, iconFiles, date } = {} as typeof comparisons[number]) => {
+comparisons.forEach(({ tag, iconFiles, date } = {}) => {
   if (tag == null) return;
 
   iconFiles.forEach(({ status, file, renamedFile }) => {

docs/scripts/writeVercelOutput.mjs

@@ -11,7 +11,7 @@ const iconMetaData = await getIconMetaData(path.resolve(scriptDir, '../../icons'
 const iconAliasesRedirectRoutes = Object.entries(iconMetaData)
   .filter(([, { aliases }]) => aliases?.length)
   .map(([iconName, { aliases }]) => {
-    const aliasRouteMatches = aliases.map((alias) => typeof alias === 'string' ? alias : alias.name).join('|');
+    const aliasRouteMatches = aliases.map((alias) => alias.name).join('|');
 
     return {
       src: `/icons/${aliasRouteMatches}`,

icons/cannabis-off.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "nickveles"
+  ],
+  "tags": [
+    "cannabis",
+    "weed",
+    "leaf"
+  ],
+  "categories": [
+    "nature"
+  ]
+}

icons/cannabis-off.svg

@@ -0,0 +1,18 @@
+<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 22v-4c1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5" />
+  <path d="M13.988 8.327C13.902 6.054 13.365 3.82 12 2a9.3 9.3 0 0 0-1.445 2.9" />
+  <path d="M17.375 11.725C18.882 10.53 21 7.841 21 6c-2.324 0-5.08 1.296-6.662 2.684" />
+  <path d="m2 2 20 20" />
+  <path d="M21.024 15.378A15 15 0 0 0 22 15c-.426-1.279-2.67-2.557-4.25-2.907" />
+  <path d="M6.995 6.992C5.714 6.4 4.29 6 3 6c0 2 2.5 5 4 6-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3" />
+</svg>

icons/paint-bucket.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 12H2" />
+  <path d="M11 7 6 2" />
+  <path d="M18.992 12H2.041" />
   <path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595" />
-  <path d="m6 2 5 5" />
   <path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33" />
 </svg>

icons/stone.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "Alportan",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "mineral",
+    "geology",
+    "nature",
+    "solid",
+    "pebble",
+    "crystal",
+    "ore",
+    "hard",
+    "coal",
+    "stone",
+    "rock",
+    "boulder"
+  ],
+  "categories": [
+    "nature"
+  ]
+}

icons/stone.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11.264 2.205A4 4 0 0 0 6.42 4.211l-4 8a4 4 0 0 0 1.359 5.117l6 4a4 4 0 0 0 4.438 0l6-4a4 4 0 0 0 1.576-4.592l-2-6a4 4 0 0 0-2.53-2.53z" />
+  <path d="M11.99 22 14 12l7.822 3.184" />
+  <path d="M14 12 8.47 2.302" />
+</svg>

packages/lucide-angular/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "lucide-angular",
+  "name": "@lucide/angular",
-  "description": "A Lucide icon library package for Angular applications.",
+  "description": "A Lucide icon library package for Angular applications",
   "version": "0.0.1",
   "author": "SMAH1",
   "license": "ISC",
@@ -38,19 +38,19 @@
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.11",
+    "@angular-devkit/build-angular": "~17.3.14",
-    "@angular-eslint/builder": "~13.0.0",
+    "@angular-eslint/builder": "~17.5.3",
-    "@angular-eslint/eslint-plugin": "~13.0.0",
+    "@angular-eslint/eslint-plugin": "~17.5.3",
-    "@angular-eslint/eslint-plugin-template": "~13.0.0",
+    "@angular-eslint/eslint-plugin-template": "~17.5.3",
-    "@angular-eslint/schematics": "~13.0.0",
+    "@angular-eslint/schematics": "~17.5.3",
-    "@angular-eslint/template-parser": "~13.0.0",
+    "@angular-eslint/template-parser": "~17.5.3",
-    "@angular/cli": "~13.3.11",
+    "@angular/cli": "~17.3.14",
-    "@angular/common": "~13.3.0",
+    "@angular/common": "~17.3.12",
-    "@angular/compiler": "~13.3.0",
+    "@angular/compiler": "~17.3.12",
-    "@angular/compiler-cli": "~13.3.0",
+    "@angular/compiler-cli": "~17.3.12",
-    "@angular/core": "~13.3.0",
+    "@angular/core": "~17.3.12",
-    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser": "~17.3.12",
-    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/platform-browser-dynamic": "~17.3.12",
     "@lucide/build-icons": "workspace:*",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
@@ -65,12 +65,12 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^13.3.0",
+    "ng-packagr": "^17.3.0",
     "prettier": "^2.8.4",
-    "rxjs": "~7.5.0",
+    "rxjs": "~6.5.3",
     "ts-node": "~10.9.1",
     "tslib": "^2.3.0",
-    "typescript": "~4.6.2",
+    "typescript": "~5.4.5",
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {

packages/lucide-angular/scripts/exportTemplate.mts

@@ -8,26 +8,65 @@ export default defineExportTemplate(async ({
   getSvg,
   deprecated,
   deprecationReason,
+  aliases = [],
+  toPascalCase,
 }) => {
   const svgContents = await getSvg();
   const svgBase64 = base64SVG(svgContents);
+  const angularComponentName = `Lucide${componentName}`;
+  const selectors = [`svg[lucide${toPascalCase(iconName)}]`];
+  const aliasComponentNames: string[] = [];
+  for (const alias of aliases) {
+    const aliasName = typeof alias === 'string' ? alias : alias.name;
+    const aliasComponentName = `Lucide${toPascalCase(aliasName)}`;
+    const aliasSelector = `svg[lucide${toPascalCase(aliasName)}]`;
+    if (!selectors.includes(aliasSelector)) {
+      selectors.push(aliasSelector);
+    }
+    if (aliasComponentName !== angularComponentName && !aliasComponentNames.includes(aliasComponentName)) {
+      aliasComponentNames.push(aliasComponentName);
+    }
+  }
 
   return `\
 import { LucideIconData } from './types';
+import { LucideIcon } from '../lib/lucide-icon.component';
+import { Component } from '@angular/core';
 
 /**
  * @component @name ${componentName}
  * @description Lucide SVG icon component, renders SVG Element with children.
  *
  * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
- * @see https://lucide.dev/guide/packages/lucide-vue-next - Documentation
+ * @see https://lucide.dev/guide/packages/lucide-angular - Documentation
  *
  * @param {Object} props - Lucide icons props and any valid SVG attribute
- * @returns {FunctionalComponent} Vue component
  * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
 */
-const ${componentName}: LucideIconData = ${JSON.stringify(children)}; //eslint-disable-line no-shadow-restricted-names
+@Component({
+  selector: '${selectors.join(', ')}',
+  template: '',
+  standalone: true,
+})
+export class ${angularComponentName} extends LucideIcon {
+  static iconData: LucideIconData = ${JSON.stringify(children)};
+  static iconName = '${iconName}';
+  override get icon() {
+    return ${angularComponentName}.iconData;
+  }
+  override get name() {
+    return ${angularComponentName}.iconName;
+  }
+}
 
-export default ${componentName};
+${aliasComponentNames.map(([aliasComponentName]) => {
+    return `
+/**
+ * @deprecated
+ * @see ${angularComponentName}
+ */
+export const ${aliasComponentName} = ${angularComponentName};
+`;
+  }).join(`\n\n`)}
 `;
 });

packages/lucide-angular/src/aliases/index.ts

@@ -1,3 +0,0 @@
-export * from './aliases';
-export * from './prefixed';
-export * from './suffixed';

packages/lucide-angular/src/icons/package.json

@@ -1,8 +0,0 @@
-{
-  "ngPackage": {
-    "dest": "dist",
-    "lib": {
-      "entryFile": "../public-api.ts"
-    }
-  }
-}

packages/lucide-angular/src/lib/icons.provider.ts

@@ -1,4 +0,0 @@
-/** @deprecated Use the injection token LUCIDE_ICONS instead. Will be removed in v1.0. */
-export class Icons {
-  constructor(private icons: object) {}
-}

packages/lucide-angular/src/lib/lucide-angular.module.ts

@@ -1,31 +0,0 @@
-import { ModuleWithProviders, NgModule, Optional } from '@angular/core';
-import { LucideAngularComponent } from './lucide-angular.component';
-import { LucideIcons } from '../icons/types';
-import { LUCIDE_ICONS, LucideIconProvider } from './lucide-icon.provider';
-import { Icons } from './icons.provider';
-
-const legacyIconProviderFactory = (icons?: LucideIcons) => {
-  return new LucideIconProvider(icons ?? {});
-};
-
-@NgModule({
-  declarations: [LucideAngularComponent],
-  imports: [],
-  exports: [LucideAngularComponent],
-})
-export class LucideAngularModule {
-  static pick(icons: LucideIcons): ModuleWithProviders<LucideAngularModule> {
-    return {
-      ngModule: LucideAngularModule,
-      providers: [
-        { provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(icons) },
-        {
-          provide: LUCIDE_ICONS,
-          multi: true,
-          useFactory: legacyIconProviderFactory,
-          deps: [[new Optional(), Icons]],
-        },
-      ],
-    };
-  }
-}

packages/lucide-angular/src/lib/lucide-icon.component.spec.ts

@@ -1,23 +1,19 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LucideAngularModule } from './lucide-angular.module';
+import { formatFixed, LucideIcon } from './lucide-icon.component';
-import { formatFixed, LucideAngularComponent } from './lucide-angular.component';
 import defaultAttributes from '../icons/constants/default-attributes';
-import { LucideIcons } from '../icons/types';
+import { LucideIconData } from '../icons/types';
 
 describe('LucideAngularComponent', () => {
   let testHostComponent: TestHostComponent;
   let testHostFixture: ComponentFixture<TestHostComponent>;
   const getSvgAttribute = (attr: string) =>
     testHostFixture.nativeElement.querySelector('svg').getAttribute(attr);
-  const testIcons: LucideIcons = {
+  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-    Demo: [['polyline', { points: '1 1 22 22' }]],
-  };
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [LucideAngularComponent, TestHostComponent],
+      declarations: [LucideIcon, TestHostComponent],
-      imports: [LucideAngularModule.pick(testIcons)],
+      imports: [],
     }).compileComponents();
     testHostFixture = TestBed.createComponent(TestHostComponent);
     testHostComponent = testHostFixture.componentInstance;
@@ -63,7 +59,7 @@ describe('LucideAngularComponent', () => {
     testHostComponent.setAbsoluteStrokeWidth(true);
     testHostFixture.detectChanges();
     expect(getSvgAttribute('stroke-width')).toBe(
-      formatFixed(strokeWidth / (size / defaultAttributes.height)),
+      formatFixed(strokeWidth / (size / defaultAttributes.height))
     );
   });
 
@@ -71,6 +67,7 @@ describe('LucideAngularComponent', () => {
     selector: 'lucide-spec-host-component',
     template: ` <i-lucide
       name="demo"
+      [img]="testIcon"
       class="my-icon"
       [color]="color"
       [size]="size"
@@ -83,6 +80,7 @@ describe('LucideAngularComponent', () => {
     size?: number;
     strokeWidth?: number;
     absoluteStrokeWidth = true;
+    readonly testIcon = testIcon;
 
     setColor(color: string): void {
       this.color = color;

packages/lucide-angular/src/lib/lucide-icon.component.ts

@@ -5,12 +5,13 @@ import {
   Inject,
   Input,
   OnChanges,
+  OnInit,
   Renderer2,
   SimpleChange,
+  Type,
 } from '@angular/core';
 import { LucideIconData } from '../icons/types';
 import defaultAttributes from '../icons/constants/default-attributes';
-import { LUCIDE_ICONS, LucideIconProviderInterface } from './lucide-icon.provider';
 import { LucideIconConfig } from './lucide-icon.config';
 
 interface TypedChange<T> extends SimpleChange {
@@ -22,7 +23,7 @@ type SvgAttributes = { [key: string]: string | number };
 
 type LucideAngularComponentChanges = {
   name?: TypedChange<string | LucideIconData>;
-  img?: TypedChange<LucideIconData | undefined>;
+  icon?: TypedChange<LucideIconData | undefined>;
   color?: TypedChange<string>;
   size?: TypedChange<number>;
   strokeWidth?: TypedChange<number>;
@@ -34,24 +35,50 @@ export function formatFixed(number: number, decimals = 3): string {
   return parseFloat(number.toFixed(decimals)).toString(10);
 }
 
+export type LucideIconComponentType = Type<LucideIcon> & { iconData: LucideIconData; name: string };
+
+function isLucideIconComponent(icon: unknown): icon is LucideIconComponentType {
+  return (
+    icon instanceof Type &&
+    'iconData' in icon &&
+    Array.isArray(icon.iconData) &&
+    'iconName' in icon &&
+    typeof icon.iconName === 'string'
+  );
+}
+
 @Component({
-  selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'svg[lucideIcon]',
   template: '<ng-content></ng-content>',
+  standalone: true,
 })
-export class LucideAngularComponent implements OnChanges {
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class LucideIcon implements OnInit, OnChanges {
   @Input() class?: string;
-  @Input() name?: string | LucideIconData;
+  _name?: string;
-  @Input() img?: LucideIconData;
+  @Input() set name(name: string | undefined) {
+    this._name = name;
+  }
+  get name() {
+    return this._name;
+  }
+  _icon?: LucideIconData | LucideIconComponentType | null;
+  @Input('lucideIcon') set icon(icon: LucideIconData | LucideIconComponentType | null | undefined) {
+    this._icon = icon;
+  }
+  get icon() {
+    return this._icon;
+  }
   @Input() color?: string;
   @Input() absoluteStrokeWidth = false;
   defaultSize: number;
 
   constructor(
-    @Inject(ElementRef) private elem: ElementRef,
+    @Inject(ElementRef) protected elem: ElementRef,
-    @Inject(Renderer2) private renderer: Renderer2,
+    @Inject(Renderer2) protected renderer: Renderer2,
-    @Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
+    @Inject(ChangeDetectorRef) protected changeDetector: ChangeDetectorRef,
-    @Inject(LUCIDE_ICONS) private iconProviders: LucideIconProviderInterface[],
+    @Inject(LucideIconConfig) protected iconConfig: LucideIconConfig
-    @Inject(LucideIconConfig) private iconConfig: LucideIconConfig,
   ) {
     this.defaultSize = defaultAttributes.height;
   }
@@ -84,38 +111,35 @@ export class LucideAngularComponent implements OnChanges {
     }
   }
 
+  ngOnInit() {
+    this.buildIcon();
+  }
+
   ngOnChanges(changes: LucideAngularComponentChanges): void {
     if (
       changes.name ||
-      changes.img ||
+      changes.icon ||
       changes.color ||
       changes.size ||
       changes.absoluteStrokeWidth ||
       changes.strokeWidth ||
       changes.class
     ) {
+      this.buildIcon();
+    }
+
+    this.changeDetector.markForCheck();
+  }
+
+  buildIcon(): void {
     this.color = this.color ?? this.iconConfig.color;
     this.size = this.parseNumber(this.size ?? this.iconConfig.size);
     this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
     this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
-      const nameOrIcon = this.img ?? this.name;
+    console.log('Hello, my name is ', this.name, ' my icon is ', this.icon);
-      if (typeof nameOrIcon === 'string') {
+    if (this.icon) {
-        const icoOfName = this.getIcon(this.toPascalCase(nameOrIcon));
+      this.replaceElement(isLucideIconComponent(this.icon) ? this.icon.iconData : this.icon);
-        if (icoOfName) {
-          this.replaceElement(icoOfName);
-        } else {
-          throw new Error(
-            `The "${nameOrIcon}" icon has not been provided by any available icon providers.`,
-          );
     }
-      } else if (Array.isArray(nameOrIcon)) {
-        this.replaceElement(nameOrIcon);
-      } else {
-        throw new Error(`No icon name or image has been provided.`);
-      }
-    }
-
-    this.changeDetector.markForCheck();
   }
 
   replaceElement(img: LucideIconData): void {
@@ -128,7 +152,10 @@ export class LucideAngularComponent implements OnChanges {
         ? formatFixed(this.strokeWidth / (this.size / this.defaultSize))
         : this.strokeWidth.toString(10),
     };
-    const icoElement = this.createElement(['svg', attributes, img]);
+    const icoElement = this.elem.nativeElement;
+    for (const [name, value] of Object.entries(attributes)) {
+      icoElement.setAttribute(name, value);
+    }
     icoElement.classList.add('lucide');
     if (typeof this.name === 'string') {
       icoElement.classList.add(`lucide-${this.name.replace('_', '-')}`);
@@ -138,24 +165,19 @@ export class LucideAngularComponent implements OnChanges {
         ...this.class
           .split(/ /)
           .map((a) => a.trim())
-          .filter((a) => a.length > 0),
+          .filter((a) => a.length > 0)
       );
     }
-    const childElements = this.elem.nativeElement.childNodes;
+    for (const child of icoElement.children) {
-    for (const child of childElements) {
       this.renderer.removeChild(this.elem.nativeElement, child);
     }
-    this.renderer.appendChild(this.elem.nativeElement, icoElement);
+    for (const node of img) {
+      const childElement = this.createElement(node);
+      this.renderer.appendChild(icoElement, childElement);
+    }
   }
 
-  toPascalCase(str: string): string {
+  protected parseNumber(value: string | number): number {
-    return str.replace(
-      /(\w)([a-z0-9]*)(_|-|\s*)/g,
-      (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase(),
-    );
-  }
-
-  private parseNumber(value: string | number): number {
     if (typeof value === 'string') {
       const parsedValue = parseInt(value, 10);
       if (isNaN(parsedValue)) {
@@ -166,21 +188,10 @@ export class LucideAngularComponent implements OnChanges {
     return value;
   }
 
-  private getIcon(name: string): LucideIconData | null {
+  protected createElement([tag, attrs, children = []]: readonly [
-    for (const iconProvider of Array.isArray(this.iconProviders)
-      ? this.iconProviders
-      : [this.iconProviders]) {
-      if (iconProvider.hasIcon(name)) {
-        return iconProvider.getIcon(name);
-      }
-    }
-    return null;
-  }
-
-  private createElement([tag, attrs, children = []]: readonly [
     string,
     SvgAttributes,
-    LucideIconData?,
+    LucideIconData?
   ]) {
     const element = this.renderer.createElement(tag, 'http://www.w3.org/2000/svg');
 

packages/lucide-angular/src/lib/lucide-icon.provider.ts

@@ -1,24 +0,0 @@
-import { LucideIconData, LucideIcons } from '../icons/types';
-import { InjectionToken } from '@angular/core';
-
-export interface LucideIconProviderInterface {
-  hasIcon(name: string): boolean;
-
-  getIcon(name: string): LucideIconData | null;
-}
-
-export const LUCIDE_ICONS = new InjectionToken<LucideIconProviderInterface>('LucideIcons', {
-  factory: () => new LucideIconProvider({}),
-});
-
-export class LucideIconProvider implements LucideIconProviderInterface {
-  constructor(private icons: LucideIcons) {}
-
-  getIcon(name: string): LucideIconData | null {
-    return this.hasIcon(name) ? this.icons[name] : null;
-  }
-
-  hasIcon(name: string): boolean {
-    return typeof this.icons === 'object' && name in this.icons;
-  }
-}

packages/lucide-angular/src/public-api.ts

@@ -1,10 +1,7 @@
 import * as icons from './icons/lucide-icons';
 
-export * from './lib/lucide-angular.component';
+export * from './lib/lucide-icon.component';
-export * from './lib/lucide-angular.module';
 export * from './lib/lucide-icon.config';
-export * from './lib/lucide-icon.provider';
 export * from './icons/lucide-icons';
 export * from './icons/types';
-export * from './aliases';
 export { icons };

tools/build-icons/building/generateExportsFile.ts

@@ -25,7 +25,7 @@ export default async function generateExportFile(
     } else if (exportModuleNameCasing === 'pascal') {
       componentName = toPascalCase(iconName);
     }
-    const importString = `export { default as ${componentName} } from './${iconName}${iconFileExtension}';\n`;
+    const importString = `export * from './${iconName}${iconFileExtension}';\n`;
     return appendFile(importString, fileName, outputDirectory);
   });
 

tools/build-icons/building/generateIconFiles.ts

@@ -48,7 +48,11 @@ function generateIconFiles({
     ]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
-    const { deprecated = false, toBeRemovedInVersion = undefined } = iconMetaData[iconName];
+    const {
+      deprecated = false,
+      toBeRemovedInVersion = undefined,
+      aliases,
+    } = iconMetaData[iconName];
     const deprecationReason = deprecated
       ? deprecationReasonTemplate(iconMetaData[iconName]?.deprecationReason ?? '', {
           componentName,
@@ -64,6 +68,8 @@ function generateIconFiles({
       getSvg,
       deprecated,
       deprecationReason,
+      aliases,
+      toPascalCase,
     });
 
     const output = pretty
@@ -71,7 +77,7 @@ function generateIconFiles({
           singleQuote: true,
           trailingComma: 'all',
           printWidth: 100,
-          parser: 'babel',
+          parser: iconFileExtension.endsWith('.ts') ? 'babel-ts' : 'babel',
         })
       : elementTemplate;
 
@@ -81,7 +87,7 @@ function generateIconFiles({
       const output = `export { default } from "./${iconName}${iconFileExtension}";\n`;
       const location = path.join(
         iconsDistDirectory,
-        `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`,
+        `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`
       );
 
       await fs.promises.writeFile(location, output, 'utf-8');

tools/build-icons/types.ts

@@ -13,6 +13,8 @@ export type TemplateFunction = (params: {
   getSvg: () => Promise<string>;
   deprecated?: boolean;
   deprecationReason?: string;
+  aliases?: (string | AliasDeprecation)[];
+  toPascalCase: (value: string) => string;
 }) => Promise<string>;
 
 export type Path = string;

tools/build-icons/utils/defineExportTemplate.ts

@@ -7,6 +7,8 @@ export interface ExportTemplate {
   getSvg: () => Promise<string>;
   deprecated: boolean;
   deprecationReason: string;
+  aliases: Array<string | { name: string }>;
+  toPascalCase: (value: string) => string;
 }
 
 export type TemplateFunction = (params: ExportTemplate) => Promise<string>;