Add call for iconNodes

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -13,19 +13,16 @@ body:
       description: Which Lucide packages are affected? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
+        - label: lucide-angular
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: `@lucide/svelte (new version)`
+        - label: lucide-svelte
         - label: lucide-vue
         - label: lucide-vue-next
+        - label: lucide-astro
         - label: Figma plugin
         - label: source/main
         - label: other/not relevant

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -13,23 +13,19 @@ body:
       description: Which Lucide project do you wish this feature were added to? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
+        - label: lucide-angular
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: `@lucide/svelte (new version)`
+        - label: lucide-svelte
         - label: lucide-vue
         - label: lucide-vue-next
+        - label: lucide-astro
         - label: Figma plugin
         - label: all JS packages
         - label: site
-        - label: other/not relevant
     validations:
       required: true
   - type: textarea

.github/labeler.yml

@@ -59,7 +59,6 @@
 🅰️ angular package:
   - changed-files:
       - any-glob-to-any-file:
-          - 'packages/angular/*'
           - 'packages/lucide-angular/*'
 
 # For changes in the lucide preact package

.github/workflows/angular.yml

@@ -1,41 +0,0 @@
-name: Lucide Angular checks
-
-on:
-  pull_request:
-    paths:
-      - packages/angular/**
-      - tools/build-icons/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter @lucide/angular build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter @lucide/angular test

.github/workflows/release.yml

@@ -58,7 +58,6 @@ jobs:
             'lucide-preact',
             'lucide-solid',
             'lucide-svelte',
-            '@lucide/angular',
             '@lucide/astro',
             '@lucide/svelte',
           ]

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

@@ -0,0 +1,13 @@
+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

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

docs/.vitepress/data/packageData.json

@@ -95,24 +95,8 @@
       }
     ]
   },
-  "@lucide/angular": {
-    "order": 6,
-    "icon": "angular",
-    "shields": [
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/v/@lucide/angular",
-        "href": "https://www.npmjs.com/package/@lucide/angular"
-      },
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/dw/@lucide/angular",
-        "href": "https://www.npmjs.com/package/@lucide/angular"
-      }
-    ]
-  },
   "lucide-angular": {
-    "order": 7,
+    "order": 6,
     "icon": "angular",
     "shields": [
       {
@@ -128,7 +112,7 @@
     ]
   },
   "lucide-preact": {
-    "order": 8,
+    "order": 7,
     "icon": "preact",
     "shields": [
       {
@@ -146,7 +130,7 @@
   "@lucide/astro": {
     "docsAlias": "lucide-astro",
     "packageDirname": "astro",
-    "order": 9,
+    "order": 8,
     "icon": "astro",
     "iconDark": "astro-dark",
     "shields": [
@@ -163,7 +147,7 @@
     ]
   },
   "lucide-static": {
-    "order": 10,
+    "order": 9,
     "icon": "svg",
     "shields": [
       {

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/types';
+import { type LucideProps, type IconNode } from 'lucide-react/src/createLucideIcon';
 import { IconEntity } from '../theme/types';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { IconContent } from './generateZip';

docs/.vitepress/sidebar.ts

@@ -69,39 +69,39 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           link: '/guide/packages/lucide',
         },
         {
-          text: 'React',
+          text: 'Lucide React',
           link: '/guide/packages/lucide-react',
         },
         {
-          text: 'Vue',
+          text: 'Lucide Vue',
           link: '/guide/packages/lucide-vue-next',
         },
         {
-          text: 'Svelte',
+          text: 'Lucide Svelte',
           link: '/guide/packages/lucide-svelte',
         },
         {
-          text: 'Solid',
+          text: 'Lucide Solid',
           link: '/guide/packages/lucide-solid',
         },
         {
-          text: 'React Native',
+          text: 'Lucide React Native',
           link: '/guide/packages/lucide-react-native',
         },
         {
-          text: 'Angular',
-          link: '/guide/packages/angular',
+          text: 'Lucide Angular',
+          link: '/guide/packages/lucide-angular',
         },
         {
-          text: 'Preact',
+          text: 'Lucide Preact',
           link: '/guide/packages/lucide-preact',
         },
         {
-          text: 'Astro',
+          text: 'Lucide Astro',
           link: '/guide/packages/lucide-astro',
         },
         {
-          text: 'Static',
+          text: 'Lucide Static',
           link: '/guide/packages/lucide-static',
         },
       ],

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

@@ -1,31 +1,23 @@
 <script setup lang="ts">
-import { useData } from 'vitepress';
 import { computed } from 'vue';
 
 const props = defineProps<{
-  modelValue: string;
-  id: string;
-}>();
+  modelValue: string
+  id: string
+}>()
 
-const { isDark } = useData();
-
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue'])
 
 const value = computed({
-  get: () => {
-    if (props.modelValue == null || props.modelValue === 'currentColor') {
-      return isDark.value ? '#ffffff' : '#000000';
-    }
-
-    return props.modelValue;
-  },
-  set: (val) => emit('update:modelValue', val),
-});
+  get: () => 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"
@@ -41,7 +33,6 @@ const value = computed({
       class="color-input-text"
       aria-label="Color picker input"
       v-model="value"
-      placeholder="[default]"
     />
   </div>
 </template>
@@ -54,21 +45,19 @@ const value = computed({
   top: -5px;
   left: -5px;
 }
-
 .color-input-wrapper {
   height: 24px;
   width: 24px;
   overflow: hidden;
   position: relative;
-  border-radius: 4px;
+  border-radius: 12px;
   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: 3px 8px 3px 3px;
+  padding: 4px 8px;
   height: auto;
   font-size: 14px;
   text-align: left;
@@ -77,10 +66,6 @@ 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 {
@@ -94,18 +79,15 @@ const value = computed({
   text-align: left;
   border-radius: 8px;
   cursor: text;
-  transition:
-    border-color 0.25s,
-    background 0.4s ease;
-  letter-spacing: 1px;
+  transition: border-color 0.25s, background 0.4s ease;
 }
 
-.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,27 +1,22 @@
 <script setup>
-import Icon from 'lucide-vue-next/src/Icon';
-import { search } from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { search }  from '../../../data/iconNodes'
+
+const SearchIcon = createLucideIcon('search', search)
 
 defineProps({
   shortcut: {
     type: String,
-    required: false,
-  },
-});
+    required: false
+  }
+})
 </script>
 
 <template>
   <button class="fake-input">
-    <Icon
-      :iconNode="search"
-      class="search-icon"
-    />
-    <slot />
-    <kbd
-      v-if="shortcut"
-      class="shortcut"
-      >{{ shortcut }}</kbd
-    >
+    <component :is="SearchIcon" class="search-icon"/>
+    <slot/>
+    <kbd v-if="shortcut" class="shortcut">{{ shortcut }}</kbd>
   </button>
 </template>
 
@@ -39,14 +34,10 @@ 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,6 +5,7 @@
 </template>
 
 <style scoped>
+
 .icon-button {
   display: inline-flex;
   border: 1px solid transparent;
@@ -29,9 +30,9 @@
 }
 
 .icon-button:active {
-  border-color: var(--vp-button-alt-active-border);
-  color: var(--vp-button-alt-active-text);
-  background-color: var(--vp-button-alt-active-bg);
+    border-color: var(--vp-button-alt-active-border);
+    color: var(--vp-button-alt-active-text);
+    background-color: var(--vp-button-alt-active-bg);
 }
 
 .icon-button.active {

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

@@ -12,9 +12,6 @@ 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',
@@ -24,7 +21,7 @@ const input = ref();
 const wrapperEl = ref();
 const shortcutEl = ref();
 
-const emit = defineEmits(['change', 'input', 'update:modelValue']);
+defineEmits(['change', 'input', 'update:modelValue']);
 
 const updateShortcutSpacing = () => {
   nextTick(() => {
@@ -38,11 +35,6 @@ const updateShortcutSpacing = () => {
 onMounted(updateShortcutSpacing);
 watch(() => props.shortcut, updateShortcutSpacing);
 
-function onClear() {
-  emit('update:modelValue', '');
-  input.value.focus();
-}
-
 defineExpose({
   focus: () => {
     input.value.focus();
@@ -68,17 +60,6 @@ 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"
@@ -92,7 +73,6 @@ defineExpose({
 .input-wrapper {
   position: relative;
 }
-
 .input {
   justify-content: flex-start;
   border: 1px solid transparent;
@@ -102,10 +82,7 @@ defineExpose({
   height: 40px;
   background-color: var(--vp-c-bg-alt);
   font-size: 14px;
-  transition:
-    color 0.25s,
-    border-color 0.25s,
-    background-color 0.25s;
+  transition: border-color 0.2s ease-in-out;
 }
 
 .input.has-shortcut {
@@ -122,14 +99,6 @@ 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,8 +7,11 @@ export default {
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import Input from './Input.vue';
-import Icon from 'lucide-vue-next/src/Icon';
-import { search } from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import { search, x } from '../../../data/iconNodes';
+
+const SearchIcon = createLucideIcon('search', search);
+const XIcon = createLucideIcon('close', x);
 
 interface Props {
   modelValue: string;
@@ -31,6 +34,10 @@ const value = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 });
+
+const clear = () => {
+  value.value = '';
+};
 </script>
 
 <template>
@@ -43,12 +50,26 @@ const value = computed({
     v-model="value"
     class="input-wrapper"
   >
-    <template #icon>
-      <Icon
-        :iconNode="search"
+    <template #startIcon>
+      <component
+        :is="SearchIcon"
         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>
 
@@ -60,7 +81,9 @@ const value = computed({
   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,
@@ -70,9 +93,31 @@ const value = computed({
 }
 
 .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,15 +1,14 @@
 <script setup lang="ts">
-import { rotateCw } from '../../../data/iconNodes';
-import Icon from 'lucide-vue-next/src/Icon';
-import IconButton from './IconButton.vue';
+import { rotateCw } from '../../../data/iconNodes'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import IconButton from "./IconButton.vue";
+
+const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
 </script>
 
 <template>
   <IconButton class="reset-button">
-    <Icon
-      :size="20"
-      :iconNode="rotateCw"
-    />
+    <RotateIcon :size="20"/>
   </IconButton>
 </template>
 
@@ -33,7 +32,6 @@ import IconButton from './IconButton.vue';
   0% {
     transform: rotate(0deg);
   }
-
   100% {
     transform: rotate(359deg);
   }

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

@@ -52,7 +52,6 @@
   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,18 +22,18 @@ export default {
           logo: '/framework-logos/svelte.svg',
           label: 'Lucide documentation for Svelte',
         },
-        {
-          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: 'angular',
+          name: 'lucide-solid',
+          logo: '/framework-logos/solid.svg',
+          label: 'Lucide documentation for Solid',
+        },
+        {
+          name: 'lucide-angular',
           logo: '/framework-logos/angular.svg',
           label: 'Lucide documentation for Angular',
         },
@@ -48,6 +48,11 @@ 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,48 +2,45 @@
 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 Icon from 'lucide-vue-next/src/Icon';
+// import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
+import { x } from '../../../data/iconNodes'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import { onMounted, ref } from 'vue';
 
-const { theme } = useData();
-const showAd = useSessionStorage('show-carbon-ads', true);
-const carbonLoaded = ref(true);
+const { theme } = useData()
+const showAd = useSessionStorage('show-carbon-ads', 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"
-    >
-      <Icon
-        :iconNode="x"
-        :size="20"
-        absoluteStrokeWidth
-      />
+    <IconButton @click="showAd = false" class="hide-button">
+      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
     </IconButton>
-    <VPDocAsideCarbonAds :carbon-ads="theme.carbonAds" />
+    <VPDocAsideCarbonAds
+      :carbon-ads="theme.carbonAds"
+    />
   </div>
 </template>
 
@@ -54,9 +51,7 @@ 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 {
@@ -72,11 +67,8 @@ onMounted(() => {
   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);
+.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) {

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

@@ -1,68 +1,70 @@
 <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 copiedText = 'Copied!';
-const confettiText = ref(copiedText);
+const downloadText = 'Download!'
+const copiedText = 'Copied!'
+const confettiText = ref(copiedText)
 const props = defineProps<{
-  name: string;
-  popoverPosition?: 'top' | 'bottom';
-}>();
+  name: string
+  popoverPosition?: 'top' | 'bottom'
+}>()
 
-const { size } = useIconStyleContext();
+const { size } = useIconStyleContext()
 
-const { animate, confetti } = useConfetti();
+const { animate, confetti } = useConfetti()
 
 function copySVG() {
-  confettiText.value = copiedText;
-  const svgString = getSVGIcon();
+  confettiText.value = copiedText
+  const svgString = getSVGIcon()
 
-  navigator.clipboard.writeText(svgString);
+  navigator.clipboard.writeText(svgString)
 
-  confetti();
+  confetti()
 }
 
 function copyDataUrl() {
-  confettiText.value = copiedText;
-  const svgString = getSVGIcon();
+  confettiText.value = copiedText
+  const svgString = getSVGIcon()
 
   // Create SVG data url
-  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
-  navigator.clipboard.writeText(dataUrl);
+  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
+  navigator.clipboard.writeText(dataUrl)
 
-  confetti();
+  confetti()
 }
 
 function downloadSVG() {
-  confettiText.value = downloadText;
-  const svgString = getSVGIcon();
+  confettiText.value = downloadText
+  const svgString = getSVGIcon()
 
-  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`);
-  confetti();
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
+  confetti()
 }
 
 function downloadPNG() {
-  confettiText.value = downloadText;
-  const svgString = getSVGIcon();
+  confettiText.value = downloadText
+  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'));
-    confetti();
-  };
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'))
+    confetti()
+  }
 }
+
+
 </script>
 
 <template>
@@ -73,10 +75,10 @@ function downloadPNG() {
     :data-confetti-text="confettiText"
     :popoverPosition="popoverPosition"
     :options="[
-      { text: 'Copy SVG', onClick: copySVG },
-      { text: 'Copy Data URL', onClick: copyDataUrl },
-      { text: 'Download SVG', onClick: downloadSVG },
-      { text: 'Download PNG', onClick: downloadPNG },
+      { text: 'Copy SVG' , onClick: copySVG },
+      { text: 'Copy Data URL' , onClick: copyDataUrl },
+      { text: 'Download SVG' , onClick: downloadSVG },
+      { text: 'Download PNG' , onClick: downloadPNG },
     ]"
   />
 </template>

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

@@ -1,44 +1,41 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
-import { copy } from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { copy }  from '../../../data/iconNodes'
 import useConfetti from '../../composables/useConfetti';
-import Icon from 'lucide-vue-next/src/Icon';
-const { animate, confetti } = useConfetti();
-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 />
-    <Icon
-      :iconNode="copy"
-      :size="20"
-      class="copy-icon"
-    />
+    <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 0.15s;
+  transition: background ease-in .15s;;
   padding: 2px 8px;
   border-radius: 8px;
   width: auto;
@@ -51,7 +48,7 @@ function copyText() {
 }
 
 .icon-name:hover .copy-icon {
-  opacity: 0.9;
+  opacity: .9;
 }
 
 .icon-name:before,
@@ -68,10 +65,10 @@ function copyText() {
   opacity: 0;
   margin-left: 12px;
   margin-top: 6px;
-  transition: ease 0.3s opacity;
+  transition:ease .3s opacity;
 }
 
 .icon-name:hover .copy-icon:hover {
-  opacity: 0.6;
+  opacity: .6;
 }
 </style>

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

@@ -0,0 +1,21 @@
+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 } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, watch, watchEffect } from 'vue';
 import type { IconEntity } from '../../types';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import { useRoute } from 'vitepress';
@@ -11,9 +11,13 @@ 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;
@@ -32,9 +36,15 @@ 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);
@@ -44,20 +54,31 @@ const columnSize = computed(() => {
 });
 
 const mappedIcons = computed(() => {
-  if (tags.value == null) {
-    return props.icons;
+  let icons = props.icons;
+
+  if (tags.value != null && categories.value != null) {
+    icons = props.icons.map((icon) => {
+      const iconTags = tags.value[icon.name];
+      const iconCategories = categories.value?.[icon.name] ?? [];
+
+      return {
+        ...icon,
+        tags: iconTags,
+        categories: iconCategories,
+      };
+    });
   }
 
-  return props.icons.map((icon) => {
-    const iconTags = tags.value[icon.name];
-    const iconCategories = categories.value?.[icon.name] ?? [];
+  if (selectedVersion.value == null || versionIcons.value == null) {
+    console.log('no release info');
 
-    return {
-      ...icon,
-      tags: iconTags,
-      categories: iconCategories,
-    };
-  });
+    return icons;
+  }
+
+  return Object.values(versionIcons.value).filter(([name, iconNode]) => ({
+    name,
+    iconNode,
+  }));
 });
 
 const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput();
@@ -107,6 +128,12 @@ function onFocusSearchInput() {
   }
 }
 
+// function onFocusVersionSelect() {
+//   if (releaseInfo.value == null) {
+//     fetchReleaseInfo();
+//   }
+// }
+
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
@@ -129,13 +156,17 @@ function handleCloseDrawer() {
   >
     <StickyBar>
       <InputSearch
-        :placeholder="`Search ${icons.length} icons ...`"
+        :placeholder="`Search ${mappedIcons.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,72 +1,75 @@
 <script setup lang="ts">
-import { shallowRef, type Ref, watch, computed } from 'vue';
-import { useCssVar, syncRef } from '@vueuse/core';
-import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle';
-import RangeSlider from '../base/RangeSlider.vue';
-import InputField from '../base/InputField.vue';
-import ColorPicker from '../base/ColorPicker.vue';
-import ResetButton from '../base/ResetButton.vue';
-import Switch from '../base/Switch.vue';
+import { shallowRef, type Ref, watch, computed } from 'vue'
+import { useCssVar, syncRef } from '@vueuse/core'
+import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle'
+import RangeSlider from '../base/RangeSlider.vue'
+import InputField from '../base/InputField.vue'
+import ColorPicker from '../base/ColorPicker.vue'
+import ResetButton from '../base/ResetButton.vue'
+import Switch from '../base/Switch.vue'
 
 const props = defineProps<{
-  rootEl?: Ref<HTMLElement>;
-}>();
+  rootEl?: Ref<HTMLElement>
+}>()
 
-const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext();
-const documentRef = shallowRef<HTMLElement | undefined>(
-  typeof document !== 'undefined' ? document?.documentElement : undefined,
-);
+const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext()
+const documentRef = shallowRef<HTMLElement | undefined>(typeof document !== 'undefined' ? document?.documentElement : undefined)
 
-const colorCssVar = useCssVar('--customize-color', props.rootEl?.value ?? documentRef.value, {
-  initialValue: `${STYLE_DEFAULTS.color}`,
-});
+const colorCssVar = useCssVar(
+  '--customize-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('--customize-size', props.rootEl?.value ?? documentRef.value, {
-  initialValue: `${STYLE_DEFAULTS.size}`,
-});
+const sizeCssVar = useCssVar(
+  '--customize-size',
+  props.rootEl?.value ?? documentRef.value,
+  {
+    initialValue: `${STYLE_DEFAULTS.size}`
+  }
+)
 
-syncRef(color, colorCssVar, { direction: 'ltr' });
-syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' });
-syncRef(size, sizeCssVar, { direction: 'ltr' });
+syncRef(color, colorCssVar, { direction: 'ltr' })
+syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' })
+syncRef(size, sizeCssVar, { direction: 'ltr' })
 
-function resetStyle() {
-  color.value = STYLE_DEFAULTS.color;
-  strokeWidth.value = STYLE_DEFAULTS.strokeWidth;
-  size.value = STYLE_DEFAULTS.size;
-  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth;
+function resetStyle () {
+  color.value = STYLE_DEFAULTS.color
+  strokeWidth.value = STYLE_DEFAULTS.strokeWidth
+  size.value = STYLE_DEFAULTS.size
+  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 ||
-    strokeWidth.value !== STYLE_DEFAULTS.strokeWidth ||
-    size.value !== STYLE_DEFAULTS.size ||
-    absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
-  );
-});
+  return color.value !== STYLE_DEFAULTS.color
+    || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
+    || 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">Customizer</h2>
+      <h2 class="card-title">
+        Customizer
+      </h2>
       <ResetButton @click="resetStyle"></ResetButton>
     </div>
     <InputField
@@ -74,11 +77,7 @@ 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>
 
@@ -118,7 +117,7 @@ const customizingActive = computed(() => {
 
     <InputField
       id="absolute-stroke-width"
-      label="Absolute stroke width"
+      label="Absolute Stroke width"
     >
       <Switch
         id="absolute-stroke-width"
@@ -144,7 +143,6 @@ const customizingActive = computed(() => {
   font-size: 16px;
   /* margin-bottom: 12px; */
 }
-
 .customizer-card {
   background: var(--vp-c-bg);
   padding: 12px 24px 24px;
@@ -153,7 +151,7 @@ const customizingActive = computed(() => {
   position: relative;
   z-index: 0;
   border: 1px solid transparent;
-  transition: border-color 0.4s ease-in-out;
+  transition: border-color .4s ease-in-out;
 }
 
 .customizer-card.customized {

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

@@ -14,6 +14,7 @@
   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

@@ -0,0 +1,221 @@
+<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

@@ -0,0 +1,17 @@
+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/vue-shim.d.ts

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

docs/guide/index.md

@@ -29,7 +29,7 @@ However, not everyone can understand them easily. Read more about [how to use Lu
 
 ## Official Packages
 
-Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
+Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
 
 ## Community
 

docs/guide/packages/angular.md

@@ -1,277 +0,0 @@
-# `@lucide/angular`
-
-::: warning
-This documentation is for `@lucide/angular`.
-
-To learn about our legacy package for Angular, please refer to [`lucide-angular`](./lucide-angular).
-:::
-
-A standalone, signal-based, zoneless implementation of Lucide icons for Angular.
-
-**What you can accomplish:**
-- Use icons as standalone Angular components with full dependency injection support
-- Configure icons globally through modern Angular providers
-- Integrate with Angular's reactive forms and data binding
-- Build scalable applications with tree-shaken icons and lazy loading support
-
-## Prerequisites
-
-This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.
-
-## Installation
-
-::: code-group
-
-```sh [pnpm]
-pnpm add @lucide/angular
-```
-
-```sh [yarn]
-yarn add @lucide/angular
-```
-
-```sh [npm]
-npm install @lucide/angular
-```
-
-```sh [bun]
-bun add @lucide/angular
-```
-
-:::
-
-## How to use
-
-### Standalone icons
-
-Every icon can be imported as a ready-to-use standalone component:
-
-```html
-<svg lucideFileText></svg>
-```
-
-```ts{2,7}
-import { Component } from '@angular/core';
-import { LucideFileText } from '@lucide/angular';
-
-@Component({
-  selector: 'app-foobar',
-  templateUrl: './foobar.html',
-  imports: [LucideFileText],
-})
-export class Foobar { }
-```
-
-::: tip
-Standalone icon components use the selector `svg[lucide{PascalCaseIconName}]`.
-
-This ensures minimal bloating of the DOM and the ability to directly manipulate all attributes of the resulting SVG element.
-:::
-
-### Dynamic icon component
-
-You may also use the dynamic `LucideIcon` component to dynamically render icons.
-
-#### With tree-shaken imports
-
-You may pass imported icons directly to the component:
-
-```html{3}
-@for (item of items) {
-  <a navbarItem [routerLink]="item.routerLink">
-    <svg [lucideIcon]="item.icon"></svg>
-    {{ item.title }}
-  </a>
-}
-```
-
-```ts{2,8,14,19}
-import { Component } from '@angular/core';
-import { LucideIcon, LucideHouse, LucideUsersRound } from '@lucide/angular';
-import { NavbarItem, NavbarItemModel } from './navbar-item';
-
-@Component({
-  selector: 'app-navbar',
-  templateUrl: './navbar.html',
-  imports: [LucideIcon, NavbarItem],
-})
-export class Navbar {
-  readonly items: NavbarItemModel[] = [
-    {
-      title: 'Home',
-      icon: LucideHouse,
-      routerLink: [''],
-    },
-    {
-      title: 'Users',
-      icon: LucideUsersRound,
-      routerLink: ['admin/users'],
-    },
-  ];
-}
-```
-
-#### With icons provided via dependency injection
-
-Alternatively, the component also accepts string inputs.
-
-To use icons this way, first, you have to provide icons via `provideLucideIcons`:
-
-:::code-group
-```ts{7-10} [app.config.ts]
-import { ApplicationConfig } from '@angular/core';
-import { provideLucideIcons, LucideCircleCheck, LucideCircleX } from '@lucide/angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ...
-    provideLucideIcons([
-      LucideCircleCheck,
-      LucideCircleX,
-    ]),
-  ]
-};
-```
-
-```html [foobar.html]
-<svg lucideIcon="circle-check"></svg>
-```
-
-```ts{7} [foobar.ts]
-import { Component } from '@angular/core';
-import { LucideIcon } from '@lucide/angular';
-
-@Component({
-  selector: 'app-foobar',
-  templateUrl: './template-url',
-  imports: [LucideIcon],
-})
-export class Foobar { }
-```
-:::
-
-::: tip
-For optimal bundle size, provide icons at the highest appropriate level in your application.
-
-Providing all icons at the root level may increase your initial bundle size, while providing them at feature module level enables better code splitting.
-:::
-
-::: warning
-While you may provide your icons at any level of the dependency injection tree, be aware that [Angular's DI system is hierarchical](https://angular.dev/guide/di/defining-dependency-providers#injector-hierarchy-in-angular): `LucideIcon` will only have access to the icons provided closest to it in the tree.
-:::
-
-## Accessible labels
-
-You can use the `title` input property to set the [accessible name element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title) on the SVG:
-
-```html
-<svg lucideIcon="house" title="Go to dashboard"></svg>
-```
-
-This will result in the following output:
-
-```html{2}
-<svg class="lucide lucide-house" ...>
-  <title>Go to dashboard</title>
-  <!-- SVG paths -->
-</svg>
-```
-
-## Props
-
-You can pass additional props to adjust the icon appearance.
-
-| name                  | type      | default      |
-|-----------------------|-----------|--------------|
-| `size`                | *number*  | 24           |
-| `color`               | *string*  | currentColor |
-| `strokeWidth`         | *number*  | 2            |
-| `absoluteStrokeWidth` | *boolean* | false        |
-
-```html
-<svg lucideHouse size="48" color="red" strokeWidth="1"></svg>
-```
-
-## Global configuration
-
-You can use `provideLucideConfig` to configure the default property values as defined above:
-
-```ts{2,7-9}
-import { ApplicationConfig } from '@angular/core';
-import { provideLucideConfig } from '@lucide/angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ...
-    provideLucideConfig({
-      strokeWidth: 1.5
-    }),
-  ]
-};
-```
-
-## Styling via CSS
-
-Icons can also be styled by using custom CSS classes:
-
-```html
-<svg lucideHousePlus class="my-icon"></svg>
-```
-
-```css
-svg.my-icon {
-    width: 12px;
-    height: 12px;
-    stroke-width: 3;
-}
-```
-
-## With Lucide lab or custom icons
-
-[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
-
-While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons:
-
-```html
-<!-- Directly as LucideIconData: -->
-<svg [lucideIcon]="CoconutIcon"></svg>
-
-<!-- As a provided icon by name: -->
-<svg lucideIcon="coconut"></svg>
-```
-
-```ts{2,6-7,11-12}
-import { provideLucideIcons } from '@lucide/angular';
-import { coconut } from '@lucide/lab';
-
-@Component({
-  templateUrl: './foobar.html',
-  // For using by name via provider:
-  providers: [provideLucideIcons({ coconut })],
-  imports: [LucideIcon]
-})
-export class Foobar {
-  // For passing directly as LucideIconData:
-  readonly CoconutIcon = coconut;
-}
-```
-
-## Troubleshooting
-
-### The icon is not being displayed
-If using per-icon-components:
-1. Ensure that the icon component is being imported, if using per-icon-components
-2. Check that the icon name matches exactly (case-sensitive)
-
-If using the dynamic component:
-1. Ensure the icon is provided via `provideLucideIcons()` if using string names
-2. Verify the icon is imported from `@lucide/angular` and not the legacy package
-
-### TypeScript errors?
-Make sure you're importing from `@lucide/angular` and not `lucide-angular`.
-
-### Icons render with wrong defaults
-Ensure `provideLucideConfig()` is used at the right level.
-
-## Migration guide
-Migrating from `lucide-angular`? Read our [comprehensive migration guide](https://github.com/lucide-icons/lucide/blob/main/packages/angular/MIGRATION.md).

docs/guide/packages/lucide-angular.md

@@ -1,11 +1,5 @@
 # Lucide Angular
 
-::: warning
-This documentation if for our legacy package for Angular.
-
-For our modern, standalone-first implementation, please refer to [`@lucide/angular`](./angular).
-:::
-
 Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications.
 
 **What you can accomplish:**

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.mjs",
-    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mjs",
-    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mjs",
-    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mjs",
-    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mjs",
-    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mjs",
-    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mjs",
-    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mjs",
+    "prebuild:iconNodes": "node ./scripts/writeIconNodes.mts",
+    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mts",
+    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mts",
+    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mts",
+    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mts",
+    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mts",
+    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mts",
+    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mts",
     "dev": "npx nitropack dev",
     "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",

docs/scripts/writeIconRelatedIcons.mts

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

docs/scripts/writeReleaseMetadata.mts

@@ -29,7 +29,7 @@ if (!fs.existsSync(releaseMetaDataDirectory)) {
   fs.mkdirSync(releaseMetaDataDirectory);
 }
 
-const fetchAllReleases = async () => {
+export 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 } = {}) => {
+comparisons.forEach(({ tag, iconFiles, date } = {} as typeof comparisons[number]) => {
   if (tag == null) return;
 
   iconFiles.forEach(({ status, file, renamedFile }) => {

docs/scripts/writeVercelOutput.mts

@@ -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) => alias.name).join('|');
+    const aliasRouteMatches = aliases.map((alias) => typeof alias === 'string' ? alias : alias.name).join('|');
 
     return {
       src: `/icons/${aliasRouteMatches}`,

icons/cannabis-off.json

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

icons/cannabis-off.svg

@@ -1,18 +0,0 @@
-<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="M11 7 6 2" />
-  <path d="M18.992 12H2.041" />
+  <path d="M19 12H2" />
   <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

@@ -1,24 +0,0 @@
-{
-  "$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

@@ -1,15 +0,0 @@
-<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/angular/.eslintrc.js

@@ -1,38 +0,0 @@
-module.exports = {
-  root: true,
-  overrides: [
-    {
-      files: ['*.ts'],
-      extends: [
-        'eslint:recommended',
-        'plugin:@typescript-eslint/recommended',
-        'plugin:@angular-eslint/recommended',
-        'plugin:@angular-eslint/template/process-inline-templates',
-        'prettier',
-      ],
-      rules: {
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'lucide',
-            style: 'camelCase',
-          },
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: ['lucide'],
-            style: 'camelCase',
-          },
-        ],
-      },
-    },
-    {
-      files: ['*.html'],
-      extends: ['plugin:@angular-eslint/template/recommended'],
-      rules: {},
-    },
-  ],
-};

packages/angular/.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}

packages/angular/.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}

packages/angular/.vscode/tasks.json

@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}

packages/angular/MIGRATION.md

@@ -1,184 +0,0 @@
-# Migrating from `lucide-angular` ⇒ `@lucide/angular`
-
-## What changed
-
-`@lucide/angular` moves from a module + single component based API to a more modern Angular approach:
-
-- The library defines modern signal-based, standalone components, without zone.js based change detection.
-- Icons are consumed as standalone imports (one component per icon).
-- Dynamic icon registration is done via `provideLucideIcon()`, not using `NgModule`.
-- Static icons use per-icon components for better tree-shaking.
-- Dynamic icons still use a single dynamic component (`svg[lucideIcon]`).
-- Global defaults are configured via `provideLucideConfig()`.
-
----
-
-## Step 1 – Update dependencies
-
-Remove `lucide-angular`, add `@lucide/angular`, see http://lucide.dev/guide/packages/angular#installation
-
----
-
-## Step 2 – Replace `LucideAngularModule.pick(...)` with `provideLucideIcons(...)`
-
-> Notes:
-> - Old imports like `AirVentIcon` / `AlarmClock` from `lucide-angular` should be replaced with the new per-icon exports `LucideAirVent` and `LucideAlarmClock`.
-> - If you mostly used static icons, you may not need to provide them **at all**, please refer to Step 3.
-
-### Before
-
-#### NgModule based
-```ts
-import { LucideAngularModule, AirVent, AlarmClock } from 'lucide-angular';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    LucideAngularModule.pick({ AirVent, AlarmClock }),
-  ],
-})
-export class AppModule {}
-```
-
-#### Standalone
-
-```ts
-import { ApplicationConfig } from '@angular/core';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    importProvidersFrom(LucideAngularModule.pick({ AirVent, AlarmClock })),
-  ]
-};
-```
-
-### After
-```ts
-import { ApplicationConfig } from '@angular/core';
-import { provideLucideIcons, LucideAirVent, LucideAlarmClock } from '@lucide/angular';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    // ...
-    provideLucideIcons([
-      LucideAirVent,
-      LucideAlarmClock,
-    ]),
-  ]
-};
-```
-
----
-
-## Step 3 – Replace `<lucide-angular>` / `<lucide-icon>` / `<i-lucide>` / `<span-lucide>`
-
-The legacy package rendered everything through a single component. All of these selectors must be migrated to `<svg>` usage.
-
-### A. Static icons by name
-
-If the icon is known at build time, just use a static import:
-
-#### Before
-```html
-<lucide-angular name="circle-check"></lucide-angular>
-```
-
-#### After
-```html
-<svg lucideCircleCheck></svg>
-```
-
-### B. Static icons with icon data binding
-
-#### Before
-```ts
-import { CircleCheck } from 'lucide-angular';
-```
-
-```html
-<lucide-icon [img]="CircleCheck"></lucide-icon>
-```
-
-#### After
-
-```ts
-import { LucideCircleCheck } from '@lucide/angular';
-```
-
-```html
-<svg lucideCircleCheck></svg>
-```
-
-...and import `LucideCircleCheck` from `@lucide/angular`.
-
----
-
-### C. Dynamic icons
-
-If the icon varies at runtime, use the dynamic component:
-
-#### Before
-```html
-<lucide-icon [name]="item.icon"></lucide-icon>
-```
-
-#### After
-```html
-<svg [lucideIcon]="item.icon"></svg>
-```
-
----
-
-## Step 4 – Replace `LucideIconConfig` with `provideLucideConfig()`
-
-### Before
-```ts
-import { inject } from '@angular/core';
-import { LucideIconConfig } from 'lucide-angular';
-
-inject(LucideIconConfig).size = 12;
-```
-
-### After
-```ts
-import { provideLucideConfig } from '@lucide/angular';
-
-providers: [
-  provideLucideConfig({ size: 12 }),
-]
-```
-
-### Where to place it
-
-- App-wide: `AppModule.providers` or `bootstrapApplication(...providers)`
-- Feature-level: feature module providers
-- Component-level (standalone): component `providers`
-
----
-
-## Troubleshooting
-
-### The icon is not being displayed
-If using per-icon-components:
-1. Ensure that the icon component is being imported, if using per-icon-components
-2. Check that the icon name matches exactly (case-sensitive)
-
-If using the dynamic component:
-1. Ensure the icon is provided via `provideLucideIcons()` if using string names
-2. Verify the icon is imported from `@lucide/angular` and not the legacy package
-
-### TypeScript errors?
-Make sure you're importing from `@lucide/angular` and not `lucide-angular`.
-
-### Icons render with wrong defaults
-Ensure `provideLucideConfig()` is used at the right level.
-
----
-
-## TL;DR
-- `LucideAngularModule` ⇒ static: removed; dynamic: `LucideIcon`
-- `LucideAngularModule.pick(...)` ⇒ `provideLucideIcons(...)`
-- `<lucide-angular name="foo-bar">` ⇒ `<svg lucideFooBar>`
-- `<lucide-icon [name]="expr">` ⇒ `<svg [lucideIcon]="expr">`
-- `<lucide-icon [img]="expr">` ⇒ `<svg [lucideIcon]="expr">`
-- `LucideIconConfig` ⇒ `provideLucideConfig(...)`

packages/angular/README.md

@@ -1,77 +0,0 @@
-<p align="center">
-  <a href="https://github.com/lucide-icons/lucide">
-    <img src="https://lucide.dev/package-logos/lucide-angular.svg" alt="Lucide icon library for Angular applications." width="540">
-  </a>
-</p>
-
-<p align="center">
-Lucide icon library for Angular applications.
-</p>
-
-<div align="center">
-
-  [![npm](https://img.shields.io/npm/v/lucide-angular?color=blue)](https://www.npmjs.com/package/lucide-angular)
-  ![NPM Downloads](https://img.shields.io/npm/dw/lucide-angular)
-  [![GitHub](https://img.shields.io/github/license/lucide-icons/lucide)](https://lucide.dev/license)
-</div>
-
-<p align="center">
-  <a href="https://lucide.dev/guide/">About</a>
-  ·
-  <a href="https://lucide.dev/icons/">Icons</a>
-  ·
-  <a href="https://lucide.dev/guide/packages/lucide-angular">Documentation</a>
-  ·
-  <a href="https://lucide.dev/license">License</a>
-</p>
-
-# Lucide Angular
-
-A standalone, signal based, zoneless implementation of the Lucide icon library for Angular applications.
-
-## Installation
-
-```sh
-pnpm add @lucide/angular
-```
-
-```sh
-npm install @lucide/angular
-```
-
-```sh
-yarn add @lucide/angular
-```
-
-```sh
-bun add @lucide/angular
-```
-
-## Documentation
-
-For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/angular)
-
-## Migration guide
-
-Migrating from `lucide-angular`? Read our [comprehensive migration guide](./MIGRATION.md).
-
-## Community
-
-Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
-
-## License
-
-Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/license).
-
-## Sponsors
-
-<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
-  <img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
-</a>
-
-<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
-
-### Awesome backers 🍺
-
-<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
-<a href="https://github.com/pdfme/pdfme"><img src="https://lucide.dev/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>

packages/angular/angular.json

@@ -1,51 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "cli": {
-    "packageManager": "pnpm"
-  },
-  "newProjectRoot": ".",
-  "projects": {
-    "@lucide/angular": {
-      "projectType": "library",
-      "root": ".",
-      "sourceRoot": "./src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular/build:ng-packagr",
-          "configurations": {
-            "production": {
-              "tsConfig": "./tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "./tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular/build:unit-test",
-          "options": {
-            "tsConfig": "./tsconfig.spec.json",
-            "coverage": true,
-            "coverageReporters": ["html", "lcov"],
-            "coverageExclude": ["src/icons/*"],
-            "coverageThresholds": {
-              "statements": 80,
-              "branches": 80,
-              "functions": 80,
-              "lines": 80
-            }
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
-          }
-        }
-      }
-    }
-  }
-}

packages/angular/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "./src/public-api.ts"
-  }
-}

packages/angular/package.json

@@ -1,76 +0,0 @@
-{
-  "name": "@lucide/angular",
-  "description": "A Lucide icon library package for Angular applications.",
-  "version": "0.0.1",
-  "author": "SMAH1",
-  "license": "ISC",
-  "homepage": "https://lucide.dev",
-  "bugs": "https://github.com/lucide-icons/lucide/issues",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lucide-icons/lucide.git",
-    "directory": "packages/lucide-angular"
-  },
-  "publishConfig": {
-    "directory": "dist"
-  },
-  "scripts": {
-    "ng": "ng",
-    "watch": "ng build --watch --configuration development",
-    "prebuild": "pnpm clean && pnpm copy:license && pnpm build:icons",
-    "build": "pnpm build:ng",
-    "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
-    "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --iconFileExtension=.ts --exportFileName=lucide-angular.ts --useDefaultExports=0",
-    "build:ng": "ng build --configuration production",
-    "test": "ng test --no-watch",
-    "test:watch": "ng test",
-    "lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --quiet --fix",
-    "e2e": "ng e2e",
-    "version": "pnpm version --git-tag-version=false"
-  },
-  "prettier": {
-    "printWidth": 100,
-    "singleQuote": true,
-    "overrides": [
-      {
-        "files": "*.html",
-        "options": {
-          "parser": "angular"
-        }
-      }
-    ]
-  },
-  "private": true,
-  "devDependencies": {
-    "@angular-eslint/builder": "~21.1.0",
-    "@angular-eslint/eslint-plugin": "~21.1.0",
-    "@angular-eslint/eslint-plugin-template": "~21.1.0",
-    "@angular-eslint/schematics": "~21.1.0",
-    "@angular-eslint/template-parser": "~21.1.0",
-    "@angular/build": "^21.0.3",
-    "@angular/cli": "^21.0.3",
-    "@angular/common": "^21.0.0",
-    "@angular/compiler": "^21.0.0",
-    "@angular/compiler-cli": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/forms": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@lucide/build-icons": "workspace:*",
-    "@lucide/helpers": "workspace:*",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/coverage-v8": "^4.0.16",
-    "angular-eslint": "21.1.0",
-    "jsdom": "^27.1.0",
-    "ng-packagr": "^21.0.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "typescript": "~5.9.2",
-    "vitest": "^4.0.16"
-  },
-  "peerDependencies": {
-    "@angular/common": "17.x - 21.x",
-    "@angular/core": "17.x - 21.x"
-  }
-}

packages/angular/scripts/exportTemplate.mts

@@ -1,68 +0,0 @@
-import base64SVG from '@lucide/build-icons/utils/base64SVG';
-import defineExportTemplate from '@lucide/build-icons/utils/defineExportTemplate';
-import { toPascalCase } from '@lucide/helpers';
-
-export default defineExportTemplate(async ({
-  componentName,
-  iconName,
-  children,
-  getSvg,
-  deprecated,
-  deprecationReason,
-  aliases = [],
-}) => {
-  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 { LucideIconBase } from '../lucide-icon-base';
-import { Component, signal } 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-angular - Documentation
- *
- * @param {Object} props - Lucide icons props and any valid SVG attribute
- * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
-*/
-@Component({
-  selector: '${selectors.join(', ')}',
-  templateUrl: '../lucide-icon.html',
-  standalone: true,
-})
-export class ${angularComponentName} extends LucideIconBase {
-  static readonly iconName = '${iconName}';
-  static readonly iconData: LucideIconData = ${JSON.stringify(children)};
-  protected override readonly iconName = signal(${angularComponentName}.iconName);
-  protected override readonly iconData = signal(${angularComponentName}.iconData);
-}
-
-${aliasComponentNames.map((aliasComponentName) => {
-    return `
-/**
- * @deprecated
- * @see ${angularComponentName}
- */
-export const ${aliasComponentName} = ${angularComponentName};
-`;
-  }).join(`\n\n`)}
-`;
-});

packages/angular/src/default-attributes.ts

@@ -1,11 +0,0 @@
-export default {
-  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',
-};

packages/angular/src/lucide-config.spec.ts

@@ -1,25 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { LUCIDE_CONFIG, lucideDefaultConfig, provideLucideConfig } from './lucide-config';
-
-describe('Lucide config', () => {
-  describe('LUCIDE_CONFIG', () => {
-    it('should use default', () => {
-      expect(TestBed.inject(LUCIDE_CONFIG)).toBe(lucideDefaultConfig);
-    });
-  });
-  describe('provideLucideConfig', () => {
-    it('should use defaults', () => {
-      TestBed.configureTestingModule({
-        providers: [
-          provideLucideConfig({
-            size: 18,
-          }),
-        ],
-      });
-      expect(TestBed.inject(LUCIDE_CONFIG)).toEqual({
-        ...lucideDefaultConfig,
-        size: 18,
-      });
-    });
-  });
-});

packages/angular/src/lucide-config.ts

@@ -1,67 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-/**
- * Lucide icon configuration options.
- */
-export interface LucideConfig {
-  /**
-   * Stroke color.
-   * @default currentColor
-   */
-  color: string;
-  /**
-   * Width and height.
-   * @default 24
-   */
-  size: number;
-  /**
-   * Stroke width
-   * @default 2
-   */
-  strokeWidth: number;
-  /**
-   * Whether stroke width should be scaled to appear uniform regardless of icon size.
-   * @default false
-   *
-   * @remarks
-   * Use CSS to set on SVG paths instead:
-   * ```css
-   * .lucide * {
-   *   vector-effect: non-scaling-stroke;
-   * }`
-   * ```
-   */
-  absoluteStrokeWidth: boolean;
-}
-
-/**
- * Default icon configuration options.
- */
-export const lucideDefaultConfig: LucideConfig = {
-  color: 'currentColor',
-  size: 24,
-  strokeWidth: 2,
-  absoluteStrokeWidth: false,
-};
-
-/**
- * Injection token for providing default configuration options.
- *
- * @internal Use {@link provideLucideConfig}
- */
-export const LUCIDE_CONFIG = new InjectionToken<LucideConfig>('Lucide icon config', {
-  factory: () => lucideDefaultConfig,
-});
-
-/**
- * Provider for default icon configuration options.
- */
-export function provideLucideConfig(config: Partial<LucideConfig>): Provider {
-  return {
-    provide: LUCIDE_CONFIG,
-    useValue: {
-      ...lucideDefaultConfig,
-      ...config,
-    },
-  };
-}

packages/angular/src/lucide-icon-base.ts

@@ -1,149 +0,0 @@
-import {
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  Renderer2,
-  Signal,
-} from '@angular/core';
-import { LUCIDE_CONFIG } from './lucide-config';
-import { LucideIconData, Nullable } from './types';
-import defaultAttributes from './default-attributes';
-import { formatFixed } from './utils/format-fixed';
-import { toKebabCase } from './utils/to-kebab-case';
-
-function transformNumericStringInput(
-  value: Nullable<string | number>,
-  defaultValue: number,
-): number {
-  if (typeof value === 'string') {
-    const parsedValue = parseInt(value, 10);
-    if (isNaN(parsedValue)) {
-      return defaultValue;
-    }
-    return parsedValue;
-  }
-  return value ?? defaultValue;
-}
-
-/**
- * @internal
- */
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'svg[lucideIcon]',
-  templateUrl: './lucide-icon.html',
-  host: {
-    ...defaultAttributes,
-    class: 'lucide',
-    '[attr.width]': 'size().toString(10)',
-    '[attr.height]': 'size().toString(10)',
-    '[attr.stroke]': 'color()',
-    '[attr.stroke-width]': 'computedStrokeWidth()',
-    '[attr.aria-hidden]': 'ariaHidden()',
-  },
-})
-export abstract class LucideIconBase {
-  protected abstract readonly iconName: Signal<Nullable<string>>;
-  protected abstract readonly iconData: Signal<Nullable<LucideIconData>>;
-  protected readonly iconConfig = inject(LUCIDE_CONFIG);
-  protected readonly elRef = inject(ElementRef);
-  protected readonly renderer = inject(Renderer2);
-  protected readonly ariaHidden = computed(() => {
-    return !this.title();
-  });
-  /**
-   * An optional accessible label for the icon.
-   * - If provided, it will add the title as an [`<svg:title>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title).
-   * - If not provided, the component will add an `aria-hidden="true"` attribute automatically.
-   *
-   * @remarks
-   * Please refer to our [Accessibility guide](https://lucide.dev/guide/advanced/accessibility) regarding this matter.
-   * Adding accessible labels to icons is normally not necessary:
-   * - If your icon is decorative (as most icons are) just leave it as hidden from screen readers.
-   * - If your icon is interactive, it should be contained within an interactive element (e.g. button), and you should probably set your accessible label on that element.
-   * - If your icon is functional (e.g. used in place of a label), feel free to use this property.
-   */
-  readonly title = input<Nullable<string>>();
-  /**
-   * Width and height.
-   * @default 24
-   */
-  readonly size = input(this.iconConfig.size, {
-    transform: (value: Nullable<string | number>) =>
-      transformNumericStringInput(value, this.iconConfig.size),
-  });
-  /**
-   * Stroke color.
-   * @default currentColor
-   */
-  readonly color = input(this.iconConfig.color, {
-    transform: (value: Nullable<string>) => value ?? this.iconConfig.color,
-  });
-  /**
-   * Stroke width
-   * @default 2
-   */
-  readonly strokeWidth = input(this.iconConfig.strokeWidth, {
-    transform: (value: Nullable<string | number>) =>
-      transformNumericStringInput(value, this.iconConfig.strokeWidth),
-  });
-  /**
-   * Whether stroke width should be scaled to appear uniform regardless of icon size.
-   *
-   * @remarks
-   * Use CSS to set on SVG paths instead:
-   * ```css
-   * .lucide * {
-   *   vector-effect: non-scaling-stroke;
-   * }
-   * ```
-   */
-  readonly absoluteStrokeWidth = input(this.iconConfig.absoluteStrokeWidth, {
-    transform: (value: Nullable<boolean>) => value ?? this.iconConfig.absoluteStrokeWidth,
-  });
-  protected readonly computedStrokeWidth = computed(() => {
-    const strokeWidth = this.strokeWidth();
-    const size = this.size();
-    return this.absoluteStrokeWidth()
-      ? formatFixed(strokeWidth / (size / 24))
-      : strokeWidth.toString(10);
-  });
-
-  constructor() {
-    effect((onCleanup) => {
-      const icon = this.iconData();
-      if (icon) {
-        const elements = icon.map(([name, attrs]) => {
-          const element = this.renderer.createElement(name, 'http://www.w3.org/2000/svg');
-          Object.entries(attrs).forEach(([name, value]) =>
-            this.renderer.setAttribute(
-              element,
-              name,
-              typeof value === 'number' ? value.toString(10) : value,
-            ),
-          );
-          this.renderer.appendChild(this.elRef.nativeElement, element);
-          return element;
-        });
-        onCleanup(() => {
-          elements.forEach((element) =>
-            this.renderer.removeChild(this.elRef.nativeElement, element),
-          );
-        });
-      }
-    });
-    effect((onCleanup) => {
-      const name = this.iconName();
-      if (name) {
-        const cssClass = `lucide-${toKebabCase(name)}`;
-        this.renderer.addClass(this.elRef.nativeElement, cssClass);
-        onCleanup(() => {
-          this.renderer.removeClass(this.elRef.nativeElement, cssClass);
-        });
-      }
-    });
-  }
-}

packages/angular/src/lucide-icon.html

@@ -1,4 +0,0 @@
-@if (title(); as titleValue) {
-  <title>{{ titleValue }}</title>
-}
-<ng-content />

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

@@ -1,243 +0,0 @@
-import { Component, input, inputBinding, signal, WritableSignal } from '@angular/core';
-import { LucideIcon } from './lucide-icon';
-import { LucideIconData, LucideIconInput } from './types';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideLucideIcons } from './lucide-icons';
-import { LucideActivity } from './icons/activity';
-import { By } from '@angular/platform-browser';
-
-@Component({
-  template: `@if (icon(); as iconData) {
-    <svg [lucideIcon]="iconData">
-      <rect x="1" y="1" width="22" height="22" />
-    </svg>
-  }`,
-  imports: [LucideIcon],
-})
-class TestHostComponent {
-  readonly icon = input<LucideIconData>();
-}
-
-describe('LucideIcon', () => {
-  let component: LucideIcon;
-  let fixture: ComponentFixture<LucideIcon>;
-  let icon: WritableSignal<LucideIconInput | null | undefined>;
-  let name: WritableSignal<string | undefined>;
-  let title: WritableSignal<string | undefined>;
-  let color: WritableSignal<string | undefined>;
-  let size: WritableSignal<string | number | undefined>;
-  let strokeWidth: WritableSignal<string | number | undefined>;
-  let absoluteStrokeWidth: WritableSignal<boolean | undefined>;
-  const getSvgAttribute = (attr: string) => fixture.nativeElement.getAttribute(attr);
-  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-  const testIcon2: LucideIconData = [
-    ['circle', { cx: 12, cy: 12, r: 8 }],
-    ['polyline', { points: '1 1 22 22' }],
-  ];
-  beforeEach(async () => {
-    TestBed.configureTestingModule({
-      providers: [provideLucideIcons({ demo: testIcon })],
-    });
-    icon = signal('demo');
-    name = signal(undefined);
-    title = signal(undefined);
-    color = signal(undefined);
-    size = signal(undefined);
-    strokeWidth = signal(undefined);
-    absoluteStrokeWidth = signal(undefined);
-    fixture = TestBed.createComponent(LucideIcon, {
-      inferTagName: true,
-      bindings: [
-        inputBinding('lucideIcon', icon),
-        inputBinding('name', name),
-        inputBinding('title', title),
-        inputBinding('color', color),
-        inputBinding('size', size),
-        inputBinding('strokeWidth', strokeWidth),
-        inputBinding('absoluteStrokeWidth', absoluteStrokeWidth),
-      ],
-    });
-    component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
-    fixture.detectChanges();
-    expect(component).toBeTruthy();
-  });
-
-  it('should render children', () => {
-    icon.set(testIcon2);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML).toBe(
-      '<!--container--><circle cx="12" cy="12" r="8"></circle><polyline points="1 1 22 22"></polyline>',
-    );
-  });
-
-  it('should remove children on change', () => {
-    icon.set(null);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.innerHTML).toBe('<!--container-->');
-  });
-
-  describe('iconInput', () => {
-    it('should support LucideIconData input', () => {
-      icon.set(testIcon);
-      name.set('custom-name');
-      fixture.detectChanges();
-
-      expect(component.iconData()).toBe(testIcon);
-      expect(component.iconName()).toBe('custom-name');
-      expect(fixture.nativeElement.innerHTML).toBe(
-        '<!--container--><polyline points="1 1 22 22"></polyline>',
-      );
-    });
-    it('should support LucideIconComponentType input', () => {
-      icon.set(LucideActivity);
-      fixture.detectChanges();
-
-      expect(component.iconData()).toBe(LucideActivity.iconData);
-      expect(component.iconName()).toBe(LucideActivity.iconName);
-    });
-    it('should support string icon name', () => {
-      icon.set('demo');
-      fixture.detectChanges();
-
-      expect(component.iconData()).toBe(testIcon);
-      expect(component.iconName()).toBe('demo');
-    });
-    it('should throw error if no icon founds', () => {
-      icon.set('invalid');
-      expect(() => fixture.detectChanges()).toThrowError(`Unable to resolve icon 'invalid'`);
-    });
-  });
-
-  describe('class', () => {
-    it('should add all classes', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('class')).toBe('lucide lucide-demo');
-    });
-    it('should add class from name, even if icon has name', () => {
-      icon.set(LucideActivity);
-      name.set('custom-name');
-      fixture.detectChanges();
-
-      expect(getSvgAttribute('class')).toBe('lucide lucide-custom-name');
-    });
-    it('should add class icon if available', () => {
-      icon.set(LucideActivity);
-      fixture.detectChanges();
-
-      expect(getSvgAttribute('class')).toBe('lucide lucide-activity');
-    });
-    it('should remove class on change', () => {
-      icon.set(null);
-      fixture.detectChanges();
-      expect(getSvgAttribute('class')).toBe('lucide');
-    });
-  });
-
-  describe('color', () => {
-    it('should default to currentColor', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke')).toBe('currentColor');
-    });
-    it('should set color', () => {
-      color.set('red');
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke')).toBe('red');
-    });
-  });
-
-  describe('size', () => {
-    it('should default to 24', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('24');
-      expect(getSvgAttribute('height')).toBe('24');
-    });
-    it('should set size', () => {
-      size.set(12);
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('12');
-      expect(getSvgAttribute('height')).toBe('12');
-    });
-    it('should allow string size', () => {
-      size.set('18');
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('18');
-      expect(getSvgAttribute('height')).toBe('18');
-    });
-    it('should use default on invalid string', () => {
-      size.set('large');
-      fixture.detectChanges();
-      expect(getSvgAttribute('width')).toBe('24');
-      expect(getSvgAttribute('height')).toBe('24');
-    });
-  });
-
-  describe('strokeWidth', () => {
-    it('should default to 2', () => {
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('2');
-    });
-    it('should set stroke width', () => {
-      strokeWidth.set(1.41);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('1.41');
-    });
-    it('should allow string stroke width', () => {
-      strokeWidth.set('1px');
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('1');
-    });
-  });
-
-  describe('absoluteStrokeWidth', () => {
-    it('should not adjust stroke width', () => {
-      strokeWidth.set(2);
-      size.set(12);
-      absoluteStrokeWidth.set(false);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('2');
-    });
-    it('should adjust stroke width', () => {
-      strokeWidth.set(2);
-      size.set(12);
-      absoluteStrokeWidth.set(true);
-      fixture.detectChanges();
-      expect(getSvgAttribute('stroke-width')).toBe('4');
-    });
-  });
-
-  describe('title', () => {
-    it('should set title if provided', () => {
-      title.set('Foobar');
-      fixture.detectChanges();
-      const titleEl = fixture.debugElement.query(By.css('title')).nativeElement;
-      expect(titleEl).toBeDefined();
-      expect(titleEl.textContent).toBe('Foobar');
-    });
-    it('should not set aria-hidden when title is set', () => {
-      title.set('Foobar');
-      fixture.detectChanges();
-      expect(getSvgAttribute('aria-hidden')).toBeUndefined;
-    });
-    it('should set aria-hidden if no title is provided', () => {
-      title.set(undefined);
-      fixture.detectChanges();
-      expect(getSvgAttribute('aria-hidden')).toBeUndefined;
-    });
-  });
-
-  describe('content projection', () => {
-    it('should project content', () => {
-      const hostFixture = TestBed.createComponent(TestHostComponent);
-      hostFixture.componentRef.setInput('icon', testIcon);
-      hostFixture.detectChanges();
-      hostFixture.componentRef.setInput('icon', testIcon2);
-      hostFixture.detectChanges();
-      const rect = hostFixture.debugElement.query(By.css('rect')).nativeElement;
-      expect(rect).toBeInstanceOf(SVGElement);
-      expect(rect.outerHTML).toBe('<rect x="1" y="1" width="22" height="22"></rect>');
-    });
-  });
-});

packages/angular/src/lucide-icon.ts

@@ -1,65 +0,0 @@
-import { Component, computed, inject, input } from '@angular/core';
-import { isLucideIconComponent, isLucideIconData, LucideIconInput } from './types';
-import { LucideIconBase } from './lucide-icon-base';
-import { LUCIDE_ICONS } from './lucide-icons';
-import { LucideIconData } from './types';
-import { toKebabCase } from './utils/to-kebab-case';
-
-interface LucideResolvedIcon {
-  name?: string | null;
-  data: LucideIconData;
-}
-
-/**
- * Generic icon component for rendering LucideIconData.
- */
-@Component({
-  selector: 'svg[lucideIcon]',
-  templateUrl: './lucide-icon.html',
-  standalone: true,
-})
-export class LucideIcon extends LucideIconBase {
-  protected readonly icons = inject(LUCIDE_ICONS);
-  readonly name = input<string | null>();
-  readonly iconInput = input.required<LucideIconInput | null>({
-    alias: 'lucideIcon',
-  });
-  readonly resolvedIcon = computed<LucideResolvedIcon | null>(() => {
-    return this.resolveIcon(this.name(), this.iconInput());
-  });
-  protected override readonly iconName = computed(() => {
-    return this.resolvedIcon()?.name;
-  });
-  protected override readonly iconData = computed(() => {
-    return this.resolvedIcon()?.data;
-  });
-
-  protected resolveIcon(
-    name: string | null | undefined,
-    icon: LucideIconInput | null | undefined,
-  ): LucideResolvedIcon | null {
-    if (isLucideIconData(icon)) {
-      return {
-        name,
-        data: icon,
-      };
-    } else if (isLucideIconComponent(icon)) {
-      return {
-        name: name ?? icon.iconName,
-        data: icon.iconData,
-      };
-    } else if (typeof icon === 'string') {
-      const name = toKebabCase(icon);
-      if (name in this.icons) {
-        return {
-          name,
-          data: this.icons[name],
-        };
-      } else {
-        throw new Error(`Unable to resolve icon '${icon}'`);
-      }
-    }
-
-    return null;
-  }
-}

packages/angular/src/lucide-icons.spec.ts

@@ -1,44 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { LUCIDE_ICONS, provideLucideIcons } from './lucide-icons';
-import { LucideIconData } from './types';
-import { LucideActivity } from './icons/activity';
-import { LucideCircle } from './icons/circle';
-import { LucideSquareX } from './icons/square-x';
-
-describe('Lucide icons', () => {
-  describe('LUCIDE_ICONS', () => {
-    it('should default to empty map', () => {
-      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({});
-    });
-  });
-  describe('provideLucideIcons', () => {
-    const mockIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-    const mockIcon2: LucideIconData = [['circle', { cx: 12, cy: 12, r: 8 }]];
-    it('should accept dictionary of icons', () => {
-      TestBed.configureTestingModule({
-        providers: [
-          provideLucideIcons({
-            DemoIcon: mockIcon,
-            MockIcon: mockIcon2,
-            TestIcon: LucideActivity,
-          }),
-        ],
-      });
-      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({
-        'demo-icon': mockIcon,
-        'mock-icon': mockIcon2,
-        [LucideActivity.iconName]: LucideActivity.iconData,
-      });
-    });
-    it('should accept list of icon components', () => {
-      TestBed.configureTestingModule({
-        providers: [provideLucideIcons([LucideActivity, LucideSquareX, LucideCircle])],
-      });
-      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({
-        [LucideActivity.iconName]: LucideActivity.iconData,
-        [LucideSquareX.iconName]: LucideSquareX.iconData,
-        [LucideCircle.iconName]: LucideCircle.iconData,
-      });
-    });
-  });
-});

packages/angular/src/lucide-icons.ts

@@ -1,64 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-import { LucideIconData, LucideIcons } from './types';
-import { isLucideIconComponent, LucideIconComponentType } from './types';
-import { toKebabCase } from './utils/to-kebab-case';
-
-/**
- * Injection token for providing Lucide icons by name.
- *
- * @internal Use {@link provideLucideConfig}
- */
-export const LUCIDE_ICONS = new InjectionToken<LucideIcons>('Lucide icons', {
-  factory: () => ({}),
-});
-
-/**
- * Provide Lucide icons by name.
- *
- * @remarks
- * Warning! This provider will convert dictionary keys to lower-kebab-case.
- *
- * @param icons Either a dictionary of icons or a list of Angular icon components.
- *
- * @usage
- * ```ts
- * import { provideLucideIcons, SquareCheck } from '@lucide/angular';
- * import { MyCustomIcon } from './custom-icons/circle-check';
- *
- * providers: [
- *   provideLucideIcons({
- *     SquareCheck,
- *     MyCustomIcon, // LucideIconData
- *   }),
- * ]
- * ```
- *
- * ```html
- * <svg lucideIcon="my-custom-icon" />
- * ```
- */
-export function provideLucideIcons(
-  icons: Record<string, LucideIconData | LucideIconComponentType> | Array<LucideIconComponentType>,
-): Provider {
-  if (Array.isArray(icons)) {
-    return {
-      provide: LUCIDE_ICONS,
-      useValue: icons.reduce((acc, icon) => {
-        acc[toKebabCase(icon.iconName)] = icon.iconData;
-        return acc;
-      }, {} as LucideIcons),
-    };
-  } else {
-    return {
-      provide: LUCIDE_ICONS,
-      useValue: Object.entries(icons).reduce((acc, [name, icon]) => {
-        if (isLucideIconComponent(icon)) {
-          acc[icon.iconName] = icon.iconData;
-        } else {
-          acc[toKebabCase(name)] = icon;
-        }
-        return acc;
-      }, {} as LucideIcons),
-    };
-  }
-}

packages/angular/src/public-api.ts

@@ -1,8 +0,0 @@
-import * as icons from './icons/lucide-angular';
-
-export * from './lucide-config';
-export * from './lucide-icon';
-export * from './lucide-icons';
-export * from './types';
-export * from './icons/lucide-angular';
-export { icons };

packages/angular/src/types.ts

@@ -1,44 +0,0 @@
-import { Signal, Type } from '@angular/core';
-
-type HtmlAttributes = { [key: string]: string | number };
-export type LucideIconNode = readonly [string, HtmlAttributes];
-export type LucideIconData = readonly LucideIconNode[];
-export type LucideIcons = { [key: string]: LucideIconData };
-
-/**
- * Represents a Lucide icon component that has `iconName` and `iconData` signals inherited from `LucideIconBase` and respective static members accessible without instantiating the component.
- */
-export type LucideIconComponentType = Type<{
-  iconName: Signal<Nullable<string>>;
-  iconData: Signal<Nullable<LucideIconData>>;
-}> & {
-  iconName: string;
-  iconData: LucideIconData;
-};
-
-/**
- * Type guard for {@link LucideIconData}
- */
-export function isLucideIconData(icon: unknown): icon is LucideIconData {
-  return Array.isArray(icon);
-}
-
-/**
- * Type guard for {@link LucideIconComponentType}
- */
-export 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'
-  );
-}
-
-export type LucideIconInput = LucideIconComponentType | LucideIconData | string;
-
-/**
- * @internal
- */
-export type Nullable<T> = T | null | undefined;

packages/angular/src/utils/format-fixed.ts

@@ -1,3 +0,0 @@
-export function formatFixed(number: number, decimals = 3): string {
-  return parseFloat(number.toFixed(decimals)).toString(10);
-}

packages/angular/src/utils/to-kebab-case.ts

@@ -1,2 +0,0 @@
-export const toKebabCase = (name: string) =>
-  name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();

packages/angular/tsconfig.json

@@ -1,40 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "paths": {
-      "@lucide/angular": [
-        "./dist"
-      ]
-    },
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "preserve"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.lib.json"
-    },
-    {
-      "path": "./tsconfig.spec.json"
-    }
-  ]
-}

packages/angular/tsconfig.lib.json

@@ -1,18 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

packages/angular/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

packages/angular/tsconfig.spec.json

@@ -1,15 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "vitest/globals"
-    ]
-  },
-  "include": [
-    "src/**/*.d.ts",
-    "src/**/*.spec.ts"
-  ]
-}

tools/build-icons/building/generateExportsFile.ts

@@ -8,7 +8,6 @@ export default async function generateExportFile(
   iconNodes: Record<string, INode>,
   exportModuleNameCasing: 'camel' | 'pascal',
   iconFileExtension = '',
-  useDefaultExports = true
 ) {
   const fileName = path.basename(inputEntry);
 
@@ -26,9 +25,7 @@ export default async function generateExportFile(
     } else if (exportModuleNameCasing === 'pascal') {
       componentName = toPascalCase(iconName);
     }
-    const importString = `export ${
-      useDefaultExports ? `{ default as ${componentName} }` : `*`
-    } from './${iconName}${iconFileExtension}';\n`;
+    const importString = `export { default as ${componentName} } from './${iconName}${iconFileExtension}';\n`;
     return appendFile(importString, fileName, outputDirectory);
   });
 

tools/build-icons/building/generateIconFiles.ts

@@ -48,11 +48,7 @@ function generateIconFiles({
     ]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
-    const {
-      deprecated = false,
-      toBeRemovedInVersion = undefined,
-      aliases = [],
-    } = iconMetaData[iconName];
+    const { deprecated = false, toBeRemovedInVersion = undefined } = iconMetaData[iconName];
     const deprecationReason = deprecated
       ? deprecationReasonTemplate(iconMetaData[iconName]?.deprecationReason ?? '', {
           componentName,
@@ -68,7 +64,6 @@ function generateIconFiles({
       getSvg,
       deprecated,
       deprecationReason,
-      aliases,
     });
 
     const output = pretty
@@ -76,7 +71,7 @@ function generateIconFiles({
           singleQuote: true,
           trailingComma: 'all',
           printWidth: 100,
-          parser: iconFileExtension.endsWith('.ts') ? 'babel-ts' : 'babel',
+          parser: 'babel',
         })
       : elementTemplate;
 
@@ -86,7 +81,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/cli.ts

@@ -31,7 +31,6 @@ interface CliArguments {
   separateIconFileExportExtension?: string;
   aliasesFileExtension?: string;
   aliasImportFileExtension?: string;
-  useDefaultExports?: boolean;
   pretty?: boolean;
   output: string | undefined;
 }
@@ -63,7 +62,6 @@ const {
   separateIconFileExportExtension = undefined,
   aliasesFileExtension = '.js',
   aliasImportFileExtension = '',
-  useDefaultExports = true,
   pretty = true,
 } = cliArguments;
 
@@ -127,7 +125,6 @@ async function buildIcons() {
     icons,
     exportModuleNameCasing,
     importImportFileExtension,
-    useDefaultExports
   );
 }
 

tools/build-icons/types.ts

@@ -6,17 +6,14 @@ export type IconNode = [tag: string, attrs: SVGProps][];
 
 export type IconNodeWithChildren = [tag: string, attrs: SVGProps, children: IconNode];
 
-export interface ExportTemplate {
+export type TemplateFunction = (params: {
   componentName: string;
   iconName: string;
   children: IconNode;
   getSvg: () => Promise<string>;
-  deprecated: boolean;
-  deprecationReason: string;
-  aliases?: (string | AliasDeprecation)[];
-}
-
-export type TemplateFunction = (params: ExportTemplate) => Promise<string>;
+  deprecated?: boolean;
+  deprecationReason?: string;
+}) => Promise<string>;
 
 export type Path = string;
 

tools/build-icons/utils/defineExportTemplate.ts

@@ -1,4 +1,15 @@
-import type { TemplateFunction } from '../types.ts';
+import { type IconNode } from '../types.ts';
+
+export interface ExportTemplate {
+  componentName: string;
+  iconName: string;
+  children: IconNode;
+  getSvg: () => Promise<string>;
+  deprecated: boolean;
+  deprecationReason: string;
+}
+
+export type TemplateFunction = (params: ExportTemplate) => Promise<string>;
 
 const defineExportTemplate = (exportFunction: TemplateFunction) => exportFunction;