+ 
+ 
+ 
+
-
- {{ icon.name }}
-
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/icons/confetti.css b/docs/.vitepress/theme/components/icons/confetti.css
index 9ebcff1d9b..687edbeaad 100644
--- a/docs/.vitepress/theme/components/icons/confetti.css
+++ b/docs/.vitepress/theme/components/icons/confetti.css
@@ -12,7 +12,7 @@
.confetti-button:before,
.confetti-button:after {
position: absolute;
- content: "";
+ content: '';
display: block;
width: 140%;
max-width: 160px;
@@ -41,8 +41,16 @@
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
- background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
- 10% 10%, 18% 18%;
+ background-size:
+ 10% 10%,
+ 20% 20%,
+ 15% 15%,
+ 20% 20%,
+ 18% 18%,
+ 10% 10%,
+ 15% 15%,
+ 10% 10%,
+ 18% 18%;
}
.confetti-button:after {
@@ -55,7 +63,14 @@
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
- background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
+ background-size:
+ 15% 15%,
+ 20% 20%,
+ 18% 18%,
+ 20% 20%,
+ 15% 15%,
+ 10% 10%,
+ 20% 20%;
}
.confetti-button.animate:before {
@@ -70,35 +85,89 @@
@keyframes topBubbles {
0% {
color: rgb(var(--text-color) / 0);
- background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
- 40% 90%, 55% 90%, 70% 90%;
+ background-position:
+ 5% 90%,
+ 10% 90%,
+ 10% 90%,
+ 15% 90%,
+ 25% 90%,
+ 25% 90%,
+ 40% 90%,
+ 55% 90%,
+ 70% 90%;
}
30% {
color: rgb(var(--text-color) / 1);
}
50% {
- background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
- 50% 50%, 65% 20%, 90% 30%;
+ background-position:
+ 0% 80%,
+ 0% 20%,
+ 10% 40%,
+ 20% 0%,
+ 30% 30%,
+ 22% 50%,
+ 50% 50%,
+ 65% 20%,
+ 90% 30%;
}
100% {
- background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
- 50% 40%, 65% 10%, 90% 20%;
- background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+ background-position:
+ 0% 70%,
+ 0% 10%,
+ 10% 30%,
+ 20% -10%,
+ 30% 20%,
+ 22% 40%,
+ 50% 40%,
+ 65% 10%,
+ 90% 20%;
+ background-size:
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%;
color: rgb(var(--text-color) / 0);
}
}
@keyframes bottomBubbles {
0% {
- background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
- 70% -10%, 70% 0%;
+ background-position:
+ 10% -10%,
+ 30% 10%,
+ 55% -10%,
+ 70% -10%,
+ 85% -10%,
+ 70% -10%,
+ 70% 0%;
}
50% {
- background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
+ background-position:
+ 0% 80%,
+ 20% 80%,
+ 45% 60%,
+ 60% 100%,
+ 75% 70%,
+ 95% 60%,
105% 0%;
}
100% {
- background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
+ background-position:
+ 0% 90%,
+ 20% 90%,
+ 45% 70%,
+ 60% 110%,
+ 75% 80%,
+ 95% 70%,
110% 10%;
- background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+ background-size:
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%;
}
}
diff --git a/docs/.vitepress/theme/components/overrides/VPFooter.vue b/docs/.vitepress/theme/components/overrides/VPFooter.vue
index 6c46714dce..813ba1acad 100644
--- a/docs/.vitepress/theme/components/overrides/VPFooter.vue
+++ b/docs/.vitepress/theme/components/overrides/VPFooter.vue
@@ -23,8 +23,8 @@ const links = computed(() => [
href: `${githubLink.value}/releases`
},
{
- text: 'Github',
- href: `${githubLink.value}/issues`
+ text: 'GitHub',
+ href: `${githubLink.value}`
},
{
text: 'Issues',
diff --git a/docs/.vitepress/theme/components/packages/PackageList.data.ts b/docs/.vitepress/theme/components/packages/PackageList.data.ts
index c92038babb..0649ded640 100644
--- a/docs/.vitepress/theme/components/packages/PackageList.data.ts
+++ b/docs/.vitepress/theme/components/packages/PackageList.data.ts
@@ -1,21 +1,23 @@
import packageData from '../../../data/packageData.json';
import thirdPartyPackages from '../../../data/packageData.thirdParty.json';
-import fetchPackages from "../../../lib/fetchPackages";
+import fetchPackages from '../../../lib/fetchPackages';
export default {
async load() {
const packages = await fetchPackages();
+
return {
packages: packages
- .filter(p => p.name in packageData)
+ .filter((p) => p?.name != null && p.name in packageData)
.map((pData) => ({
- ...pData,
- ...packageData[pData.name],
- documentation: `/guide/packages/${pData.name}`,
- source: `https://github.com/lucide-icons/lucide/tree/main/packages/${pData.name}`,
- icon: `/framework-logos/${packageData[pData.name].icon}.svg`,
- })).sort((a, b) => a.order - b.order),
+ ...pData,
+ ...packageData[pData.name],
+ documentation: `/guide/packages/${pData.name}`,
+ source: `https://github.com/lucide-icons/lucide/tree/main/packages/${pData.name}`,
+ icon: `/framework-logos/${packageData[pData.name].icon}.svg`,
+ }))
+ .sort((a, b) => a.order - b.order),
thirdPartyPackages,
};
- }
-}
+ },
+};
diff --git a/docs/.vitepress/theme/components/packages/PackageList.vue b/docs/.vitepress/theme/components/packages/PackageList.vue
index 08f46993d6..ba321ff4d0 100644
--- a/docs/.vitepress/theme/components/packages/PackageList.vue
+++ b/docs/.vitepress/theme/components/packages/PackageList.vue
@@ -1,7 +1,8 @@
+import PackageListItem from "./PackageListItem.vue";
+
.package-group {
margin-bottom: 96px;
}
-
-.grid {
- display: flex;
- flex-wrap: wrap;
- align-items: stretch;
- justify-content: center;
- align-content: space-evenly;
- box-sizing: border-box;
- margin: -8px;
-}
-
-.grid > * {
- flex-basis: 100%;
- box-sizing: border-box;
- padding: 8px;
-}
-
-@media (min-width: 960px) {
- .grid > * {
- flex-basis: 50%;
- }
-}
-
-@media (min-width: 1280px) {
- .grid > * {
- flex-basis: 33.33%;
- }
-}
-
diff --git a/docs/.vitepress/theme/components/packages/PackageListItem.vue b/docs/.vitepress/theme/components/packages/PackageListItem.vue
index fbb19d44b3..a32a7b6601 100644
--- a/docs/.vitepress/theme/components/packages/PackageListItem.vue
+++ b/docs/.vitepress/theme/components/packages/PackageListItem.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
![]()
+
+ {{ icon.name }}
+
+
+
+
+
-
@@ -48,7 +65,7 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
align-items: center;
}
-.bird-icon {
+.animal-icon {
width: 160px;
height: 160px;
color: var(--vp-c-neutral);
@@ -56,12 +73,12 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
margin-top: 72px;
}
-.bird-icon.flip {
+.animal-icon.flip {
transform: rotateY(180deg);
}
@media (min-width: 960px) {
- .bird-icon {
+ .animal-icon {
width: 240px;
height: 240px;
}
diff --git a/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue b/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue
new file mode 100644
index 0000000000..bed2124677
--- /dev/null
+++ b/docs/.vitepress/theme/components/icons/SidebarExternalLibrarySelect.vue
@@ -0,0 +1,47 @@
+
+
+
+ No icons found for '{{ searchQuery }}'
-
+
+ Include external libs
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/icons/SidebarTitle.vue b/docs/.vitepress/theme/components/icons/SidebarTitle.vue
new file mode 100644
index 0000000000..f3b358b3e1
--- /dev/null
+++ b/docs/.vitepress/theme/components/icons/SidebarTitle.vue
@@ -0,0 +1,19 @@
+
+ -
+
-
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/icons/confetti.css b/docs/.vitepress/theme/components/icons/confetti.css
index 9ebcff1d9b..687edbeaad 100644
--- a/docs/.vitepress/theme/components/icons/confetti.css
+++ b/docs/.vitepress/theme/components/icons/confetti.css
@@ -12,7 +12,7 @@
.confetti-button:before,
.confetti-button:after {
position: absolute;
- content: "";
+ content: '';
display: block;
width: 140%;
max-width: 160px;
@@ -41,8 +41,16 @@
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
- background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
- 10% 10%, 18% 18%;
+ background-size:
+ 10% 10%,
+ 20% 20%,
+ 15% 15%,
+ 20% 20%,
+ 18% 18%,
+ 10% 10%,
+ 15% 15%,
+ 10% 10%,
+ 18% 18%;
}
.confetti-button:after {
@@ -55,7 +63,14 @@
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%),
radial-gradient(circle, var(--confetti-color) 20%, transparent 20%);
- background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
+ background-size:
+ 15% 15%,
+ 20% 20%,
+ 18% 18%,
+ 20% 20%,
+ 15% 15%,
+ 10% 10%,
+ 20% 20%;
}
.confetti-button.animate:before {
@@ -70,35 +85,89 @@
@keyframes topBubbles {
0% {
color: rgb(var(--text-color) / 0);
- background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
- 40% 90%, 55% 90%, 70% 90%;
+ background-position:
+ 5% 90%,
+ 10% 90%,
+ 10% 90%,
+ 15% 90%,
+ 25% 90%,
+ 25% 90%,
+ 40% 90%,
+ 55% 90%,
+ 70% 90%;
}
30% {
color: rgb(var(--text-color) / 1);
}
50% {
- background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
- 50% 50%, 65% 20%, 90% 30%;
+ background-position:
+ 0% 80%,
+ 0% 20%,
+ 10% 40%,
+ 20% 0%,
+ 30% 30%,
+ 22% 50%,
+ 50% 50%,
+ 65% 20%,
+ 90% 30%;
}
100% {
- background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
- 50% 40%, 65% 10%, 90% 20%;
- background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+ background-position:
+ 0% 70%,
+ 0% 10%,
+ 10% 30%,
+ 20% -10%,
+ 30% 20%,
+ 22% 40%,
+ 50% 40%,
+ 65% 10%,
+ 90% 20%;
+ background-size:
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%;
color: rgb(var(--text-color) / 0);
}
}
@keyframes bottomBubbles {
0% {
- background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
- 70% -10%, 70% 0%;
+ background-position:
+ 10% -10%,
+ 30% 10%,
+ 55% -10%,
+ 70% -10%,
+ 85% -10%,
+ 70% -10%,
+ 70% 0%;
}
50% {
- background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
+ background-position:
+ 0% 80%,
+ 20% 80%,
+ 45% 60%,
+ 60% 100%,
+ 75% 70%,
+ 95% 60%,
105% 0%;
}
100% {
- background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
+ background-position:
+ 0% 90%,
+ 20% 90%,
+ 45% 70%,
+ 60% 110%,
+ 75% 80%,
+ 95% 70%,
110% 10%;
- background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
+ background-size:
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%,
+ 0% 0%;
}
}
diff --git a/docs/.vitepress/theme/components/overrides/VPFooter.vue b/docs/.vitepress/theme/components/overrides/VPFooter.vue
index 6c46714dce..813ba1acad 100644
--- a/docs/.vitepress/theme/components/overrides/VPFooter.vue
+++ b/docs/.vitepress/theme/components/overrides/VPFooter.vue
@@ -23,8 +23,8 @@ const links = computed(() => [
href: `${githubLink.value}/releases`
},
{
- text: 'Github',
- href: `${githubLink.value}/issues`
+ text: 'GitHub',
+ href: `${githubLink.value}`
},
{
text: 'Issues',
diff --git a/docs/.vitepress/theme/components/packages/PackageList.data.ts b/docs/.vitepress/theme/components/packages/PackageList.data.ts
index c92038babb..0649ded640 100644
--- a/docs/.vitepress/theme/components/packages/PackageList.data.ts
+++ b/docs/.vitepress/theme/components/packages/PackageList.data.ts
@@ -1,21 +1,23 @@
import packageData from '../../../data/packageData.json';
import thirdPartyPackages from '../../../data/packageData.thirdParty.json';
-import fetchPackages from "../../../lib/fetchPackages";
+import fetchPackages from '../../../lib/fetchPackages';
export default {
async load() {
const packages = await fetchPackages();
+
return {
packages: packages
- .filter(p => p.name in packageData)
+ .filter((p) => p?.name != null && p.name in packageData)
.map((pData) => ({
- ...pData,
- ...packageData[pData.name],
- documentation: `/guide/packages/${pData.name}`,
- source: `https://github.com/lucide-icons/lucide/tree/main/packages/${pData.name}`,
- icon: `/framework-logos/${packageData[pData.name].icon}.svg`,
- })).sort((a, b) => a.order - b.order),
+ ...pData,
+ ...packageData[pData.name],
+ documentation: `/guide/packages/${pData.name}`,
+ source: `https://github.com/lucide-icons/lucide/tree/main/packages/${pData.name}`,
+ icon: `/framework-logos/${packageData[pData.name].icon}.svg`,
+ }))
+ .sort((a, b) => a.order - b.order),
thirdPartyPackages,
};
- }
-}
+ },
+};
diff --git a/docs/.vitepress/theme/components/packages/PackageList.vue b/docs/.vitepress/theme/components/packages/PackageList.vue
index 08f46993d6..ba321ff4d0 100644
--- a/docs/.vitepress/theme/components/packages/PackageList.vue
+++ b/docs/.vitepress/theme/components/packages/PackageList.vue
@@ -1,7 +1,8 @@
+import PackageListItem from "./PackageListItem.vue";
+
- ![]()
diff --git a/docs/.vitepress/theme/components/showcase/ShowcaseList.vue b/docs/.vitepress/theme/components/showcase/ShowcaseList.vue
index cf1a58b358..340ef299f3 100644
--- a/docs/.vitepress/theme/components/showcase/ShowcaseList.vue
+++ b/docs/.vitepress/theme/components/showcase/ShowcaseList.vue
@@ -40,33 +40,4 @@ import ShowcaseListItem from "./ShowcaseListItem.vue";
.package-group {
margin-bottom: 96px;
}
-
-.grid {
- display: flex;
- flex-wrap: wrap;
- align-items: stretch;
- justify-content: center;
- align-content: space-evenly;
- box-sizing: border-box;
- margin: -8px;
-}
-
-.grid > * {
- flex-basis: 100%;
- box-sizing: border-box;
- padding: 8px;
-}
-
-@media (min-width: 960px) {
- .grid > * {
- flex-basis: 50%;
- }
-}
-
-@media (min-width: 1280px) {
- .grid > * {
- flex-basis: 33.33%;
- }
-}
-
diff --git a/docs/.vitepress/theme/composables/useActiveAnchor.ts b/docs/.vitepress/theme/composables/useActiveAnchor.ts
index 68586b6aab..6438263236 100644
--- a/docs/.vitepress/theme/composables/useActiveAnchor.ts
+++ b/docs/.vitepress/theme/composables/useActiveAnchor.ts
@@ -1,73 +1,76 @@
import { onMounted, onUpdated, onUnmounted } from 'vue';
-import { throttleAndDebounce } from 'vitepress/dist/client/theme-default/support/utils'
+import { throttleAndDebounce } from 'vitepress/dist/client/theme-default/support/utils';
/*
-* This file is compied and adjusted from vitepress/dist/client/theme-default/composables/useActiveAnchor.ts
-*/
+ * This file is compied and adjusted from vitepress/dist/client/theme-default/composables/useActiveAnchor.ts
+ */
export function useActiveAnchor(container, marker) {
- const onScroll = throttleAndDebounce(setActiveLink, 100);
+ const setActiveLinkDebounced = throttleAndDebounce(setActiveLink, 100);
let prevActiveLink = null;
onMounted(() => {
- requestAnimationFrame(setActiveLink);
- window.addEventListener('scroll', onScroll);
+ requestAnimationFrame(setActiveLink);
+ window.addEventListener('scroll', setActiveLinkDebounced);
});
onUpdated(() => {
- // sidebar update means a route change
- activateLink(location.hash);
+ // sidebar update means a route change
+ activateLink(location.hash);
});
onUnmounted(() => {
- window.removeEventListener('scroll', onScroll);
+ window.removeEventListener('scroll', setActiveLinkDebounced);
});
function setActiveLink() {
- const links = [].slice.call(container.value.querySelectorAll('.outline-link'));
- const anchors = [].slice
- .call(document.querySelectorAll('.content .header-anchor'))
- .filter((anchor) => {
- return links.some((link) => {
- return link.hash === anchor.hash && anchor.offsetParent !== null;
- });
+ const links = [].slice.call(container.value.querySelectorAll('.outline-link'));
+ const anchors = [].slice
+ .call(document.querySelectorAll('.content .header-anchor'))
+ .filter((anchor) => {
+ return links.some((link) => {
+ return link.hash === anchor.hash && anchor.offsetParent !== null;
+ });
});
- const scrollY = window.scrollY;
- const innerHeight = window.innerHeight;
- const offsetHeight = document.body.offsetHeight;
- const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1;
- // page bottom - highlight last one
- if (anchors.length && isBottom) {
- activateLink(anchors[anchors.length - 1].hash);
- return;
- }
- for (let i = 0; i < anchors.length; i++) {
- const anchor = anchors[i];
- const nextAnchor = anchors[i + 1];
- const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor);
- if (isActive) {
- activateLink(hash);
- return;
- }
+ const scrollY = window.scrollY;
+ const innerHeight = window.innerHeight;
+ const offsetHeight = document.body.offsetHeight;
+ const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1;
+ // page bottom - highlight last one
+ if (anchors.length && isBottom) {
+ activateLink(anchors[anchors.length - 1].hash);
+ return;
+ }
+ for (let i = 0; i < anchors.length; i++) {
+ const anchor = anchors[i];
+ const nextAnchor = anchors[i + 1];
+ const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor);
+ if (isActive) {
+ activateLink(hash);
+ return;
}
+ }
}
function activateLink(hash) {
- if (prevActiveLink) {
- prevActiveLink.classList.remove('active');
- }
- if (hash !== null) {
- prevActiveLink = container.value.querySelector(`a[href="${decodeURIComponent(hash)}"]`);
- }
- const activeLink = prevActiveLink;
- if (activeLink) {
- activeLink.classList.add('active');
- marker.value.style.top = activeLink.offsetTop + 5 + 'px';
- marker.value.style.opacity = '1';
- }
- else {
- marker.value.style.top = '33px';
- marker.value.style.opacity = '0';
- }
+ if (prevActiveLink) {
+ prevActiveLink.classList.remove('active');
+ }
+ if (hash !== null) {
+ prevActiveLink = container.value.querySelector(`a[href="${decodeURIComponent(hash)}"]`);
+ }
+ const activeLink = prevActiveLink;
+ if (activeLink) {
+ activeLink.classList.add('active');
+ marker.value.style.top = activeLink.offsetTop + 5 + 'px';
+ marker.value.style.opacity = '1';
+ } else {
+ marker.value.style.top = '33px';
+ marker.value.style.opacity = '0';
+ }
}
+
+ return {
+ setActiveLinkDebounced,
+ };
}
-const PAGE_OFFSET = 64;
+const PAGE_OFFSET = 128;
function getAnchorTop(anchor) {
return anchor.parentElement.offsetTop - PAGE_OFFSET;
@@ -75,13 +78,13 @@ function getAnchorTop(anchor) {
function isAnchorActive(index, anchor, nextAnchor) {
const scrollTop = window.scrollY;
if (index === 0 && scrollTop === 0) {
- return [true, null];
+ return [true, anchor.hash];
}
if (scrollTop < getAnchorTop(anchor)) {
- return [false, null];
+ return [false, null];
}
if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor)) {
- return [true, anchor.hash];
+ return [true, anchor.hash];
}
return [false, null];
}
diff --git a/docs/.vitepress/theme/composables/useCategoryView.ts b/docs/.vitepress/theme/composables/useCategoryView.ts
index d6c079e02c..ce80f0e2e4 100644
--- a/docs/.vitepress/theme/composables/useCategoryView.ts
+++ b/docs/.vitepress/theme/composables/useCategoryView.ts
@@ -1,25 +1,38 @@
-import {
- ref, inject, Ref
-} from 'vue';
+import { useRoute } from 'vitepress';
+import { ref, inject, Ref, onMounted, watch } from 'vue';
export const CATEGORY_VIEW_CONTEXT = Symbol('categoryView');
interface CategoryViewContext {
- selectedCategory: Ref
- categoryCounts: Ref>
+ selectedCategory: Ref;
+ categoryCounts: Ref>;
}
export const categoryViewContext = {
- selectedCategory: ref(''),
+ selectedCategory: ref(),
categoryCounts: ref({}),
};
export function useCategoryView(): CategoryViewContext {
const context = inject(CATEGORY_VIEW_CONTEXT);
+ const route = useRoute();
if (!context) {
throw new Error('useCategoryView must be used with categoryView context');
}
+ onMounted(() => {
+ if (window.location.hash) {
+ context.selectedCategory.value = decodeURIComponent(window.location.hash.slice(1));
+ }
+ });
+
+ watch(route, (currentRoute) => {
+ if (currentRoute.path !== '/icons/categories') {
+ context.selectedCategory.value = '';
+ context.categoryCounts.value = {};
+ }
+ });
+
return context;
}
diff --git a/docs/.vitepress/theme/composables/useConfetti.ts b/docs/.vitepress/theme/composables/useConfetti.ts
index c124b0827b..0ad4cf7302 100644
--- a/docs/.vitepress/theme/composables/useConfetti.ts
+++ b/docs/.vitepress/theme/composables/useConfetti.ts
@@ -1,8 +1,8 @@
-import { ref } from "vue";
+import { ref } from 'vue';
export default function useConfetti() {
- const animate = ref(false)
- const confettiText = ref('confetti!')
+ const animate = ref(false);
+ const confettiText = ref('confetti!');
function confetti() {
animate.value = true;
@@ -15,6 +15,6 @@ export default function useConfetti() {
return {
animate,
confetti,
- confettiText
- }
+ confettiText,
+ };
}
diff --git a/docs/.vitepress/theme/composables/useExternalLibs.ts b/docs/.vitepress/theme/composables/useExternalLibs.ts
new file mode 100644
index 0000000000..84a4259d76
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useExternalLibs.ts
@@ -0,0 +1,57 @@
+import { ref, inject, Ref, watch } from 'vue';
+import { ExternalLibs, IconEntity } from '../types';
+
+export const EXTERNAL_LIBS_CONTEXT = Symbol('externalLibs');
+
+type ExternalIconNodes = Partial>;
+
+interface ExternalLibContext {
+ selectedLibs: Ref<[ExternalLibs]>;
+ externalIconNodes: Ref;
+}
+
+export const externalLibContext = {
+ selectedLibs: ref([]),
+ externalIconNodes: ref({}),
+};
+
+const externalLibIconNodesAPI = {
+ lab: 'https://lab.lucide.dev/api/icon-details',
+};
+
+export function useExternalLibs(): ExternalLibContext {
+ const context = inject(EXTERNAL_LIBS_CONTEXT);
+
+ watch(context?.selectedLibs, async (selectedLibs) => {
+ const savedIconNodes = { ...context?.externalIconNodes.value };
+ const newExternalIconNodes: ExternalIconNodes = {};
+
+ try {
+ for (const lib of selectedLibs) {
+ if (savedIconNodes[lib]) {
+ newExternalIconNodes[lib] = savedIconNodes[lib];
+ } else {
+ const response = await fetch(externalLibIconNodesAPI[lib]);
+ const iconNodes = await response.json();
+
+ if (iconNodes) {
+ newExternalIconNodes[lib] = Object.values(iconNodes).map((iconEntity: IconEntity) => ({
+ ...iconEntity,
+ externalLibrary: lib,
+ }));
+ }
+ }
+ }
+
+ context.externalIconNodes.value = newExternalIconNodes;
+ } catch (error) {
+ console.error(error);
+ }
+ });
+
+ if (!context) {
+ throw new Error('useExternalLibs must be used with externalLibs context');
+ }
+
+ return context;
+}
diff --git a/docs/.vitepress/theme/composables/useFetchCategories.ts b/docs/.vitepress/theme/composables/useFetchCategories.ts
index 6a34a759df..89e1b7e2a7 100644
--- a/docs/.vitepress/theme/composables/useFetchCategories.ts
+++ b/docs/.vitepress/theme/composables/useFetchCategories.ts
@@ -1,12 +1,12 @@
-import { useFetch } from "@vueuse/core"
+import { useFetch } from '@vueuse/core';
-const useFetchCategories = () => useFetch>(
- `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/categories`,
- {
- immediate:
- typeof window !== 'undefined'
- && new URLSearchParams(window.location.search).has('search'),
- }
-).json()
+const useFetchCategories = () =>
+ useFetch>(
+ `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/categories`,
+ {
+ immediate:
+ typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('search'),
+ },
+ ).json();
-export default useFetchCategories
+export default useFetchCategories;
diff --git a/docs/.vitepress/theme/composables/useFetchTags.ts b/docs/.vitepress/theme/composables/useFetchTags.ts
index 6dabe532e6..792cf5bfe9 100644
--- a/docs/.vitepress/theme/composables/useFetchTags.ts
+++ b/docs/.vitepress/theme/composables/useFetchTags.ts
@@ -1,12 +1,12 @@
-import { useFetch } from "@vueuse/core"
+import { useFetch } from '@vueuse/core';
-const useFetchTags = () => useFetch>(
- `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/tags`,
- {
- immediate:
- typeof window !== 'undefined'
- && new URLSearchParams(window.location.search).has('search'),
- }
-).json()
+const useFetchTags = () =>
+ useFetch>(
+ `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/tags`,
+ {
+ immediate:
+ typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('search'),
+ },
+ ).json();
-export default useFetchTags
+export default useFetchTags;
diff --git a/docs/.vitepress/theme/composables/useIconStyle.ts b/docs/.vitepress/theme/composables/useIconStyle.ts
index 93849867ae..f080635b68 100644
--- a/docs/.vitepress/theme/composables/useIconStyle.ts
+++ b/docs/.vitepress/theme/composables/useIconStyle.ts
@@ -1,16 +1,14 @@
/* eslint-disable no-console */
-import {
- ref, inject, Ref
-} from 'vue';
+import { ref, inject, Ref } from 'vue';
export const ICON_STYLE_CONTEXT = Symbol('size');
interface IconSizeContext {
- size: Ref
- strokeWidth: Ref
- color: Ref
- absoluteStrokeWidth: Ref
+ size: Ref;
+ strokeWidth: Ref;
+ color: Ref;
+ absoluteStrokeWidth: Ref;
}
export const STYLE_DEFAULTS = {
@@ -27,7 +25,7 @@ export const iconStyleContext = {
absoluteStrokeWidth: ref(false),
};
-export function useIconStyleContext(): IconSizeContext{
+export function useIconStyleContext(): IconSizeContext {
const context = inject(ICON_STYLE_CONTEXT);
if (!context) {
diff --git a/docs/.vitepress/theme/composables/useIconsWithExternalLibs.ts b/docs/.vitepress/theme/composables/useIconsWithExternalLibs.ts
new file mode 100644
index 0000000000..dfc7e18c48
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useIconsWithExternalLibs.ts
@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import { useExternalLibs } from '~/.vitepress/theme/composables/useExternalLibs';
+import { IconEntity } from '../types';
+
+const useIconsWithExternalLibs = (initialIcons?: IconEntity[]) => {
+ const { externalIconNodes } = useExternalLibs();
+
+ return computed(() => {
+ let icons = [];
+
+ if (initialIcons) {
+ icons = icons.concat(initialIcons);
+ }
+
+ const externalIconNodesArray = Object.values(externalIconNodes.value);
+
+ if (externalIconNodesArray?.length) {
+ externalIconNodesArray.forEach((iconNodes) => {
+ if (iconNodes?.length) {
+ icons = icons.concat(iconNodes);
+ }
+ });
+ }
+
+ return icons;
+ });
+};
+
+export default useIconsWithExternalLibs;
diff --git a/docs/.vitepress/theme/composables/useScrollToCategory.ts b/docs/.vitepress/theme/composables/useScrollToCategory.ts
new file mode 100644
index 0000000000..400dd7f474
--- /dev/null
+++ b/docs/.vitepress/theme/composables/useScrollToCategory.ts
@@ -0,0 +1,52 @@
+import { Ref, onMounted, watch } from 'vue';
+import { CategoryRow } from '../components/icons/IconsCategory.vue';
+import { Category } from '../types';
+import { useCategoryView } from './useCategoryView';
+
+interface UseScrollToCategory {
+ categories: Ref[]>;
+ categoriesList: Ref;
+ scrollTo: (index: number) => void;
+ searchQueryDebounced: Ref;
+}
+
+export default function useScrollToCategory({
+ categories,
+ categoriesList,
+ scrollTo,
+ searchQueryDebounced,
+}: UseScrollToCategory) {
+ const { selectedCategory, categoryCounts } = useCategoryView();
+
+ function scrollToSelectedCategory(selectedCategory: string) {
+ const category = categories.value.find((category) => category.name === selectedCategory);
+
+ if (category != null) {
+ const categoryRowIndex = categoriesList.value.findIndex(
+ (row) => row.type === 'category' && row.name === selectedCategory,
+ );
+
+ if (categoryRowIndex !== -1) {
+ setTimeout(() => {
+ scrollTo(categoryRowIndex);
+ }, 0);
+ }
+ }
+ }
+
+ watch(selectedCategory, scrollToSelectedCategory);
+
+ onMounted(() => {
+ setTimeout(() => {
+ scrollToSelectedCategory(selectedCategory.value);
+ }, 0);
+ });
+
+ watch(searchQueryDebounced, () => {
+ scrollTo(0);
+ });
+
+ watch(categories, (items) => {
+ categoryCounts.value = Object.fromEntries(items.map(({ name, icons }) => [name, icons.length]));
+ });
+}
diff --git a/docs/.vitepress/theme/composables/useSearch.ts b/docs/.vitepress/theme/composables/useSearch.ts
index 4bd961cd0a..18134a304f 100644
--- a/docs/.vitepress/theme/composables/useSearch.ts
+++ b/docs/.vitepress/theme/composables/useSearch.ts
@@ -1,13 +1,17 @@
import Fuse from 'fuse.js';
import { shallowRef, computed, Ref } from 'vue';
-const useSearch = (query: Ref, collection: Ref, keys: Fuse.FuseOptionKey[] = []) => {
+const useSearch = (
+ query: Ref,
+ collection: Ref,
+ keys: Fuse.FuseOptionKeyObject[] = [],
+) => {
const index = shallowRef(
new Fuse(collection.value, {
threshold: 0.2,
keys,
- })
- )
+ }),
+ );
const results = computed(() => {
index.value.setCollection(collection.value);
@@ -16,6 +20,16 @@ const useSearch = (query: Ref, collection: Ref, keys: Fuse.FuseO
return index.value.search(query.value).map((result) => result.item);
}
+ if (keys.length !== 0) {
+ const mainKey = keys[0].name;
+
+ return collection.value.sort((a, b) => {
+ const aString = a[mainKey as keyof T] as string;
+ const bString = b[mainKey as keyof T] as string;
+ return aString.localeCompare(bString);
+ });
+ }
+
return collection.value;
});
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 3933bb7d0f..143228cf11 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,12 +1,13 @@
-import { h } from 'vue'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
-import { Theme } from 'vitepress'
-import IconsSidebarNavAfter from './layouts/IconsSidebarNavAfter.vue'
-import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue'
-import HomeHeroBefore from "./components/home/HomeHeroBefore.vue";
-import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle'
-import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView'
+import { h } from 'vue';
+import DefaultTheme from 'vitepress/theme';
+import './style.css';
+import { Theme } from 'vitepress';
+import IconsSidebarNavAfter from './layouts/IconsSidebarNavAfter.vue';
+import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue';
+import HomeHeroBefore from './components/home/HomeHeroBefore.vue';
+import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle';
+import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView';
+import { EXTERNAL_LIBS_CONTEXT, externalLibContext } from './composables/useExternalLibs';
const theme: Partial = {
extends: DefaultTheme,
@@ -15,12 +16,13 @@ const theme: Partial = {
'home-hero-before': () => h(HomeHeroBefore),
'sidebar-nav-after': () => h(IconsSidebarNavAfter),
'home-hero-image': () => h(HomeHeroIconsCard),
- })
+ });
},
enhanceApp({ app }) {
- app.provide(ICON_STYLE_CONTEXT, iconStyleContext)
- app.provide(CATEGORY_VIEW_CONTEXT, categoryViewContext)
- }
-}
+ app.provide(ICON_STYLE_CONTEXT, iconStyleContext);
+ app.provide(CATEGORY_VIEW_CONTEXT, categoryViewContext);
+ app.provide(EXTERNAL_LIBS_CONTEXT, externalLibContext);
+ },
+};
-export default theme
+export default theme;
diff --git a/docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue b/docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue
index caaa7ff802..b0b758f3b0 100644
--- a/docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue
+++ b/docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue
@@ -3,6 +3,7 @@ import { useData } from 'vitepress'
import CategoryList from '../components/icons/CategoryList.vue'
import SidebarIconCustomizer from '../components/icons/SidebarIconCustomizer.vue'
+import ExternalLibrarySelect from '../components/icons/SidebarExternalLibrarySelect.vue'
const { page } = useData()
@@ -11,6 +12,7 @@ const { page } = useData()
][]
-export type IconNodeWithKeys = [elementName: string, attrs: Record, key: string][]
+export type IconNode = [elementName: string, attrs: Record][];
+export type IconNodeWithKeys = [elementName: string, attrs: Record, key: string][];
-export interface IconEntity {
- name: string;
+export interface IconMetaData {
tags: string[];
categories: string[];
contributors: string[];
aliases?: string[];
+}
+
+export type ExternalLibs = 'lab';
+export interface IconEntity extends IconMetaData {
+ name: string;
iconNode: IconNode;
+ externalLibrary?: ExternalLibs;
createdRelease?: Release;
changedRelease?: Release;
}
export interface Category {
- name: string
- title: string
- icon?: string
- iconCount: number
- icons?: IconEntity[]
+ name: string;
+ title: string;
+ icon?: string;
+ iconCount: number;
+ icons?: IconEntity[];
}
interface Shield {
- alt: string
- src: string
- href: string
+ alt: string;
+ src: string;
+ href: string;
}
export interface PackageItem {
- name: string
- description: string
- icon: string
- iconDark: string
- shields: Shield[]
- source: string
- documentation: string
- order?: number
- private?: boolean
- flutter?: object
+ name: string;
+ description: string;
+ icon: string;
+ iconDark: string;
+ shields: Shield[];
+ source: string;
+ documentation: string;
+ order?: number;
+ private?: boolean;
+ flutter?: object;
}
-
export interface Release {
- version: string
- date: string
+ version: string;
+ date: string;
}
interface ShowcaseItemImage {
- light: string
- dark: string
+ light: string;
+ dark: string;
}
export interface ShowcaseItem {
- name: string
- url: string
- image: ShowcaseItemImage
+ name: string;
+ url: string;
+ image: ShowcaseItemImage;
}
diff --git a/docs/.vitepress/theme/utils/chunkArray.ts b/docs/.vitepress/theme/utils/chunkArray.ts
new file mode 100644
index 0000000000..567454214b
--- /dev/null
+++ b/docs/.vitepress/theme/utils/chunkArray.ts
@@ -0,0 +1,9 @@
+const chunkArray = (stream: ArrayType, size: number) => {
+ return stream.reduce(
+ (chunks, item, idx, arr) =>
+ idx % size == 0 ? [...chunks, arr.slice(idx, idx + size)] : chunks,
+ [],
+ );
+};
+
+export default chunkArray;
diff --git a/docs/.vitepress/theme/utils/downloadData.ts b/docs/.vitepress/theme/utils/downloadData.ts
index 4fdcb3a476..b3f1c58660 100644
--- a/docs/.vitepress/theme/utils/downloadData.ts
+++ b/docs/.vitepress/theme/utils/downloadData.ts
@@ -1,6 +1,6 @@
-export default function downloadData(filename:string, data:string) {
+export default function downloadData(filename: string, data: string) {
const link = document.createElement('a');
link.download = filename;
- link.href = data
+ link.href = data;
link.click();
}
diff --git a/docs/.vitepress/theme/utils/getSVGIcon.ts b/docs/.vitepress/theme/utils/getSVGIcon.ts
index 223a8fd13b..b901c92e9b 100644
--- a/docs/.vitepress/theme/utils/getSVGIcon.ts
+++ b/docs/.vitepress/theme/utils/getSVGIcon.ts
@@ -9,26 +9,26 @@ const allowedAttrs = [
'stroke-linecap',
'stroke-linejoin',
'class',
-]
+];
export default function getSVGIcon(element?: HTMLElement, attrs?: Record) {
- const svg = element ?? document.querySelector('#previewer svg')
- if (!svg) return
+ const svg = element ?? document.querySelector('#previewer svg');
+ if (!svg) return;
- const clonedSvg = svg.cloneNode(true) as SVGElement
+ const clonedSvg = svg.cloneNode(true) as SVGElement;
// Filter out attributes that are not allowed in SVGs
for (const attr of Array.from(clonedSvg.attributes)) {
if (!allowedAttrs.includes(attr.name)) {
- clonedSvg.removeAttribute(attr.name)
+ clonedSvg.removeAttribute(attr.name);
}
}
for (const [key, value] of Object.entries(attrs ?? {})) {
- clonedSvg.setAttribute(key, value)
+ clonedSvg.setAttribute(key, value);
}
- const svgString = new XMLSerializer().serializeToString(clonedSvg)
+ const svgString = new XMLSerializer().serializeToString(clonedSvg);
- return svgString
+ return svgString;
}
diff --git a/docs/.vitepress/vue-shim.d.ts b/docs/.vitepress/vue-shim.d.ts
index 90ab0a63ec..478b6d7ade 100644
--- a/docs/.vitepress/vue-shim.d.ts
+++ b/docs/.vitepress/vue-shim.d.ts
@@ -1,5 +1,7 @@
+import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
+import Vue from 'vue';
+
declare module '*.vue' {
- import Vue from 'vue';
export default Vue;
}
@@ -16,3 +18,7 @@ declare const resvg_wasm: RequestInfo | URL | Response | BufferSource | WebAssem
declare module 'node:module' {
function createRequire(filename: string): NodeRequire;
}
+
+declare module '*.node.json' {
+ export default IconNode;
+}
diff --git a/docs/guide/advanced/accessibility.md b/docs/guide/advanced/accessibility.md
index df3b93d4a8..986e391e27 100644
--- a/docs/guide/advanced/accessibility.md
+++ b/docs/guide/advanced/accessibility.md
@@ -1,4 +1,215 @@
+---
+title: Accessibility
+---
+
# Accessibility
-
-
+Icons are pictures that show what something means without using words. They can be very helpful
+because they can quickly give information.
+
+However, not everyone can understand them easily. When using icons it is very important to consider
+the following aspects of accessibility.
+
+## Provide visible labels
+
+Icons are a helpful tool to improve perception, but they aren't a replacement for text.
+
+In most cases, it is probably a good idea to also provide a textual representation of your icon's
+function.
+
+
+
+## Contrast
+
+Ensure there's enough contrast between the icon and its background so that it's visible to people
+with low vision or color vision deficiencies.
+
+We recommend
+following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+
+
+
+## Use of color
+
+Avoid relying solely on color to convey meaning in icons, as some users may have color blindness.
+Instead, use additional visual cues like shape, shading or text.
+
+
+
+## Interactivity
+
+Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when
+activated.
+
+
+
+In most cases this is easily done by wrapping them in icon buttons.
+
+## Minimum target size
+
+Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it
+should have a minimum target size of 44ร44 pixels.
+
+
+
+In practice, this doesn't necessarily mean that the icon itself should be this large, only its
+interactive wrapper element.
+
+## Meaningfulness
+
+Icons should represent concepts or actions in a universally understandable way. Avoid using abstract
+or ambiguous, or culture-specific symbols that might confuse some users.
+
+
+
+## Consistency
+
+Maintain consistency in icon design and usage across your interface to help users learn and
+understand their meanings more easily.
+
+
+
+## Text Alternatives
+
+You may have to provide text labels or alternative text descriptions for icons, especially for
+screen readers used by people with visual impairments.
+
+However: descriptions should only be provided to standalone icons that aren't purely decorative, as
+providing accessible names to non-functional elements only increases clutter when using screen
+readers.
+
+### On standalone icons
+
+Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper
+element. In most cases they will be part of a badge, button (including icon buttons), navigation
+item or other interactive UI element.
+
+::: warning
+In case some of your icons stand alone, and they serve a non-decorative function, make sure to
+provide the appropriate accessible label for them.
+:::
+
+
+
+In general try to avoid using functional icons with no interactivity, we recommend that:
+
+1) you either add a visible description next to them, or
+2) place them in badges, labels or on buttons, and at least add a tooltip to them.
+
+In any such case, it is preferred that the accessible name be provided for these interactive
+elements (badges, buttons, nav items etc.) only, _not_ the icons themselves.
+
+### On buttons
+
+Do not provide an accessible label to icons when used on a button, as this label will be read out by
+screen readers, leading to nonsensical text.
+
+
+
+::: details Code examples
+
+```tsx
+// Don't do this
+
+
+// Do this, just leave it
+
+```
+
+:::
+
+### On icon buttons
+
+Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of
+the close button of a dialog for example).
+
+As previously stated, you should provide your accessible label on the icon button itself, not the
+contained icon.
+
+
+
+::: details Code examples
+
+```tsx
+// Don't do this
+
+
+// Don't do this either
+
+
+// This works but might not be the best solution, see below
+
+
+// Do this instead
+
+```
+
+:::
+
+## A note on `aria-label`
+
+Although you could provide accessible labels to your elements via the `aria-label` attribute, we
+generally recommend avoiding this and instead suggest that you use your chosen CSS framework's "
+visually hidden" utility whenever possible. You can
+[read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/).
+### Example - Radix UI
+
+Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).
+
+```tsx
+import { ArrowRightIcon } from 'lucide-react';
+import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+
+
+
+```
+### Example - Bootstrap
+
+```html
+
+
diff --git a/docs/icons/codeExamples.data.ts b/docs/icons/codeExamples.data.ts
index 708ab4d344..3c65b5ba9f 100644
--- a/docs/icons/codeExamples.data.ts
+++ b/docs/icons/codeExamples.data.ts
@@ -1,13 +1,11 @@
-import createCodeExamples from '../.vitepress/lib/createCodeExamples'
+import createCodeExamples from '../.vitepress/lib/codeExamples/createCodeExamples';
export default {
async load() {
- const codeExamples = await createCodeExamples()
-
- // const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
+ const codeExamples = await createCodeExamples();
return {
codeExamples,
- }
- }
-}
+ };
+ },
+};
diff --git a/docs/icons/icons.data.ts b/docs/icons/icons.data.ts
index 77ddacb225..b5c50019d6 100644
--- a/docs/icons/icons.data.ts
+++ b/docs/icons/icons.data.ts
@@ -1,9 +1,9 @@
-import iconNodes from '../.vitepress/data/iconNodes'
+import iconNodes from '../.vitepress/data/iconNodes';
export default {
async load() {
return {
icons: Object.entries(iconNodes).map(([name, iconNode]) => ({ name, iconNode })),
- }
- }
-}
+ };
+ },
+};
diff --git a/docs/icons/index.md b/docs/icons/index.md
index 020819f809..bb4ca3dc52 100644
--- a/docs/icons/index.md
+++ b/docs/icons/index.md
@@ -10,13 +10,17 @@ head:
---
-
diff --git a/docs/icons/lab/[name].md b/docs/icons/lab/[name].md
new file mode 100644
index 0000000000..a3e215a526
--- /dev/null
+++ b/docs/icons/lab/[name].md
@@ -0,0 +1,10 @@
+---
+layout: doc
+footer: false
+aside: false
+editLink: false
+next: false
+prev: false
+sidebar: true
+---
+
diff --git a/docs/icons/lab/[name].paths.ts b/docs/icons/lab/[name].paths.ts
new file mode 100644
index 0000000000..733760c3b0
--- /dev/null
+++ b/docs/icons/lab/[name].paths.ts
@@ -0,0 +1,19 @@
+import { IconEntity } from '../../.vitepress/theme/types';
+
+export default {
+ paths: async () => {
+ const iconDetailsResponse = await fetch('https://lab.lucide.dev/api/icon-details');
+ const iconDetails = (await iconDetailsResponse.json()) as Record;
+
+ return Object.values(iconDetails).map((iconEntity) => {
+ const params = {
+ externalLibrary: 'lab',
+ ...iconEntity,
+ };
+
+ return {
+ params,
+ };
+ });
+ },
+};
diff --git a/docs/icons/lab/codeExamples.data.ts b/docs/icons/lab/codeExamples.data.ts
new file mode 100644
index 0000000000..95b5c3dcde
--- /dev/null
+++ b/docs/icons/lab/codeExamples.data.ts
@@ -0,0 +1,11 @@
+import createCodeExamples from '../../.vitepress/lib/codeExamples/createLabCodeExamples';
+
+export default {
+ async load() {
+ const codeExamples = await createCodeExamples();
+
+ return {
+ codeExamples,
+ };
+ },
+};
diff --git a/docs/images/a11y/alttext-buttons.svg b/docs/images/a11y/alttext-buttons.svg
new file mode 100644
index 0000000000..faa749928d
--- /dev/null
+++ b/docs/images/a11y/alttext-buttons.svg
@@ -0,0 +1,41 @@
+
diff --git a/docs/images/a11y/alttext-iconbuttons.svg b/docs/images/a11y/alttext-iconbuttons.svg
new file mode 100644
index 0000000000..b3eb51063e
--- /dev/null
+++ b/docs/images/a11y/alttext-iconbuttons.svg
@@ -0,0 +1,41 @@
+
diff --git a/docs/images/a11y/alttext-standalone.svg b/docs/images/a11y/alttext-standalone.svg
new file mode 100644
index 0000000000..5078e3fd5a
--- /dev/null
+++ b/docs/images/a11y/alttext-standalone.svg
@@ -0,0 +1,91 @@
+
diff --git a/docs/images/a11y/consistency.svg b/docs/images/a11y/consistency.svg
new file mode 100644
index 0000000000..61b5988efb
--- /dev/null
+++ b/docs/images/a11y/consistency.svg
@@ -0,0 +1,37 @@
+
diff --git a/docs/images/a11y/contrast.svg b/docs/images/a11y/contrast.svg
new file mode 100644
index 0000000000..391fa905e3
--- /dev/null
+++ b/docs/images/a11y/contrast.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/images/a11y/interactivity.svg b/docs/images/a11y/interactivity.svg
new file mode 100644
index 0000000000..780d3f4942
--- /dev/null
+++ b/docs/images/a11y/interactivity.svg
@@ -0,0 +1,18 @@
+
diff --git a/docs/images/a11y/meaningfulness.svg b/docs/images/a11y/meaningfulness.svg
new file mode 100644
index 0000000000..600b04f4fa
--- /dev/null
+++ b/docs/images/a11y/meaningfulness.svg
@@ -0,0 +1,43 @@
+
diff --git a/docs/images/a11y/target-size.svg b/docs/images/a11y/target-size.svg
new file mode 100644
index 0000000000..c51513b704
--- /dev/null
+++ b/docs/images/a11y/target-size.svg
@@ -0,0 +1,48 @@
+
diff --git a/docs/images/a11y/use-of-color.svg b/docs/images/a11y/use-of-color.svg
new file mode 100644
index 0000000000..04b3a80ebc
--- /dev/null
+++ b/docs/images/a11y/use-of-color.svg
@@ -0,0 +1,92 @@
+
diff --git a/docs/images/a11y/visible-labels.svg b/docs/images/a11y/visible-labels.svg
new file mode 100644
index 0000000000..cece97094b
--- /dev/null
+++ b/docs/images/a11y/visible-labels.svg
@@ -0,0 +1,17 @@
+
diff --git a/docs/images/affinity-designer-export-options.png b/docs/images/affinity-designer-export-options.png
new file mode 100644
index 0000000000..ffbd06979b
Binary files /dev/null and b/docs/images/affinity-designer-export-options.png differ
diff --git a/docs/images/grid-2.png b/docs/images/grid-2.png
index 3fdf4393f7..fb248a2e6a 100644
Binary files a/docs/images/grid-2.png and b/docs/images/grid-2.png differ
diff --git a/docs/index.md b/docs/index.md
index 28436c656e..9d88b64106 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,7 @@
---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
+markdownStyles: false
head:
- - link
@@ -56,7 +57,9 @@ features:
+
-```js
-import { icons } from 'lucide-angular';
+
-...
+### Awesome backer ๐บ
-LucideAngularModule.pick(icons)
-```
+
diff --git a/packages/lucide-angular/angular.json b/packages/lucide-angular/angular.json
index cbbf8de7ff..f518cd3e5a 100644
--- a/packages/lucide-angular/angular.json
+++ b/packages/lucide-angular/angular.json
@@ -35,10 +35,7 @@
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
- "lintFilePatterns": [
- "src/**/*.ts",
- "src/**/*.html"
- ]
+ "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
diff --git a/packages/lucide-angular/karma.conf.js b/packages/lucide-angular/karma.conf.js
index 995319346b..1bd44e6a56 100644
--- a/packages/lucide-angular/karma.conf.js
+++ b/packages/lucide-angular/karma.conf.js
@@ -1,9 +1,8 @@
/* eslint-disable global-require, func-names */
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-module.exports = function(config) {
+module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
diff --git a/packages/lucide-angular/package.json b/packages/lucide-angular/package.json
index ee47d7c500..565c5a6ebd 100644
--- a/packages/lucide-angular/package.json
+++ b/packages/lucide-angular/package.json
@@ -29,7 +29,7 @@
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && 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.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=lucide-icons.ts",
+ "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasNamesOnly --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=lucide-icons.ts",
"build:ng": "ng build --configuration production",
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
"test:watch": "ng test",
@@ -67,8 +67,6 @@
"karma-jasmine-html-reporter": "~1.7.0",
"ng-packagr": "^13.3.0",
"prettier": "^2.8.4",
- "protractor": "~7.0.0",
- "puppeteer": "^8.0.0",
"rxjs": "~7.5.0",
"ts-node": "~10.9.1",
"tslib": "^2.3.0",
@@ -76,7 +74,7 @@
"zone.js": "~0.11.4"
},
"peerDependencies": {
- "@angular/common": "13.x - 17.x",
- "@angular/core": "13.x - 17.x"
+ "@angular/common": "13.x - 18.x",
+ "@angular/core": "13.x - 18.x"
}
}
diff --git a/packages/lucide-angular/scripts/exportTemplate.mjs b/packages/lucide-angular/scripts/exportTemplate.mjs
index 064d70ecb1..2dee463dde 100644
--- a/packages/lucide-angular/scripts/exportTemplate.mjs
+++ b/packages/lucide-angular/scripts/exportTemplate.mjs
@@ -1,7 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+export default ({ componentName, iconName, children, getSvg, deprecated, deprecationReason }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
@@ -17,10 +17,10 @@ import { LucideIconData } from './types';
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {FunctionalComponent} Vue component
- * ${deprecated ? '@deprecated' : ''}
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName}: LucideIconData = ${JSON.stringify(children)}; //eslint-disable-line no-shadow-restricted-names
export default ${componentName};
-`
+`;
};
diff --git a/packages/lucide-angular/src/aliases/index.ts b/packages/lucide-angular/src/aliases/index.ts
new file mode 100644
index 0000000000..26527c62ed
--- /dev/null
+++ b/packages/lucide-angular/src/aliases/index.ts
@@ -0,0 +1 @@
+export * from './aliases';
diff --git a/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts b/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
index d6ffedfdd3..33578a41da 100644
--- a/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
+++ b/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
@@ -63,7 +63,7 @@ describe('LucideAngularComponent', () => {
testHostComponent.setAbsoluteStrokeWidth(true);
testHostFixture.detectChanges();
expect(getSvgAttribute('stroke-width')).toBe(
- formatFixed(strokeWidth / (size / defaultAttributes.height))
+ formatFixed(strokeWidth / (size / defaultAttributes.height)),
);
});
diff --git a/packages/lucide-angular/src/lib/lucide-angular.component.ts b/packages/lucide-angular/src/lib/lucide-angular.component.ts
index 194bbeaebd..931239cbad 100644
--- a/packages/lucide-angular/src/lib/lucide-angular.component.ts
+++ b/packages/lucide-angular/src/lib/lucide-angular.component.ts
@@ -27,6 +27,7 @@ type LucideAngularComponentChanges = {
size?: TypedChange;
strokeWidth?: TypedChange;
absoluteStrokeWidth?: TypedChange;
+ class: TypedChange;
};
export function formatFixed(number: number, decimals = 3): string {
@@ -40,6 +41,7 @@ export function formatFixed(number: number, decimals = 3): string {
export class LucideAngularComponent implements OnChanges {
@Input() class?: string;
@Input() name?: string | LucideIconData;
+ @Input() img?: LucideIconData;
@Input() color?: string;
@Input() absoluteStrokeWidth = false;
defaultSize: number;
@@ -49,15 +51,11 @@ export class LucideAngularComponent implements OnChanges {
@Inject(Renderer2) private renderer: Renderer2,
@Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
@Inject(LUCIDE_ICONS) private iconProviders: LucideIconProviderInterface[],
- @Inject(LucideIconConfig) private iconConfig: LucideIconConfig
+ @Inject(LucideIconConfig) private iconConfig: LucideIconConfig,
) {
this.defaultSize = defaultAttributes.height;
}
- @Input() set img(img: LucideIconData) {
- this.name = img;
- }
-
_size?: number;
get size(): number {
@@ -87,23 +85,31 @@ export class LucideAngularComponent implements OnChanges {
}
ngOnChanges(changes: LucideAngularComponentChanges): void {
- this.color = this.color ?? this.iconConfig.color;
- this.size = this.parseNumber(this.size ?? this.iconConfig.size);
- this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
- this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
- if (changes.name || changes.img) {
- const name = changes.img?.currentValue ?? changes.name?.currentValue;
- if (typeof name === 'string') {
- const icoOfName = this.getIcon(this.toPascalCase(name));
+ if (
+ changes.name ||
+ changes.img ||
+ changes.color ||
+ changes.size ||
+ changes.absoluteStrokeWidth ||
+ changes.strokeWidth ||
+ changes.class
+ ) {
+ this.color = this.color ?? this.iconConfig.color;
+ this.size = this.parseNumber(this.size ?? this.iconConfig.size);
+ this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
+ this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
+ const nameOrIcon = this.img ?? this.name;
+ if (typeof nameOrIcon === 'string') {
+ const icoOfName = this.getIcon(this.toPascalCase(nameOrIcon));
if (icoOfName) {
this.replaceElement(icoOfName);
} else {
throw new Error(
- `The "${name}" icon has not been provided by any available icon providers.`
+ `The "${nameOrIcon}" icon has not been provided by any available icon providers.`,
);
}
- } else if (Array.isArray(name)) {
- this.replaceElement(name);
+ } else if (Array.isArray(nameOrIcon)) {
+ this.replaceElement(nameOrIcon);
} else {
throw new Error(`No icon name or image has been provided.`);
}
@@ -132,7 +138,7 @@ export class LucideAngularComponent implements OnChanges {
...this.class
.split(/ /)
.map((a) => a.trim())
- .filter((a) => a.length > 0)
+ .filter((a) => a.length > 0),
);
}
const childElements = this.elem.nativeElement.childNodes;
@@ -145,7 +151,7 @@ export class LucideAngularComponent implements OnChanges {
toPascalCase(str: string): string {
return str.replace(
/(\w)([a-z0-9]*)(_|-|\s*)/g,
- (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase()
+ (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase(),
);
}
@@ -174,7 +180,7 @@ export class LucideAngularComponent implements OnChanges {
private createElement([tag, attrs, children = []]: readonly [
string,
SvgAttributes,
- LucideIconData?
+ LucideIconData?,
]) {
const element = this.renderer.createElement(tag, 'http://www.w3.org/2000/svg');
diff --git a/packages/lucide-angular/src/test.ts b/packages/lucide-angular/src/test.ts
index d52eb4c86f..300199a996 100644
--- a/packages/lucide-angular/src/test.ts
+++ b/packages/lucide-angular/src/test.ts
@@ -4,22 +4,23 @@ import 'zone.js';
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- (id: string): T;
- keys(): string[];
- };
+ context(
+ path: string,
+ deep?: boolean,
+ filter?: RegExp,
+ ): {
+ (id: string): T;
+ keys(): string[];
+ };
};
// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting(),
-);
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
diff --git a/packages/lucide-angular/tsconfig.json b/packages/lucide-angular/tsconfig.json
index bbed6be0a5..46f053f70d 100644
--- a/packages/lucide-angular/tsconfig.json
+++ b/packages/lucide-angular/tsconfig.json
@@ -10,9 +10,7 @@
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"paths": {
- "lucide-angular": [
- "dist"
- ]
+ "lucide-angular": ["dist"],
},
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
@@ -23,15 +21,12 @@
"importHelpers": true,
"target": "es2017",
"module": "es2020",
- "lib": [
- "es2020",
- "dom"
- ]
+ "lib": ["es2020", "dom"],
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
- "strictTemplates": true
- }
+ "strictTemplates": true,
+ },
}
diff --git a/packages/lucide-angular/tsconfig.lib.json b/packages/lucide-angular/tsconfig.lib.json
index 365a81272f..d68f81e026 100644
--- a/packages/lucide-angular/tsconfig.lib.json
+++ b/packages/lucide-angular/tsconfig.lib.json
@@ -8,8 +8,5 @@
"inlineSources": true,
"types": []
},
- "exclude": [
- "src/test.ts",
- "**/*.spec.ts"
- ]
+ "exclude": ["src/test.ts", "**/*.spec.ts"]
}
diff --git a/packages/lucide-angular/tsconfig.spec.json b/packages/lucide-angular/tsconfig.spec.json
index f37f94cdd3..6df9f8b843 100644
--- a/packages/lucide-angular/tsconfig.spec.json
+++ b/packages/lucide-angular/tsconfig.spec.json
@@ -3,15 +3,8 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
- "types": [
- "jasmine"
- ]
+ "types": ["jasmine"]
},
- "files": [
- "src/test.ts"
- ],
- "include": [
- "**/*.spec.ts",
- "**/*.d.ts"
- ]
+ "files": ["src/test.ts"],
+ "include": ["**/*.spec.ts", "**/*.d.ts"]
}
diff --git a/packages/lucide-figma/README.md b/packages/lucide-figma/README.md
deleted file mode 100644
index 00d1161c77..0000000000
--- a/packages/lucide-figma/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Lucide Figma plugin
-
-A Figma plugin for using Lucide Icons
-
-## Local development
-
-1. Install the dependencies
-
- ```sh
- yarn
- ```
-
-2. Build the plugin
-
- ```sh
- yarn watch
- ```
-
-3. Open the [Figma desktop app](https://www.figma.com/downloads/)
-
-4. Go to `Menu > Plugins > Development > New Plugin...`
-
-5. Choose `lucide/packages/lucide-figma/manifest.json`
-
-6. Run the plugin by going to `Menu > Plugins > Development > Lucide Icons`
diff --git a/packages/lucide-figma/cover.png b/packages/lucide-figma/cover.png
deleted file mode 100644
index f7704b7526..0000000000
Binary files a/packages/lucide-figma/cover.png and /dev/null differ
diff --git a/packages/lucide-figma/icon.png b/packages/lucide-figma/icon.png
deleted file mode 100644
index 69c89f768a..0000000000
Binary files a/packages/lucide-figma/icon.png and /dev/null differ
diff --git a/packages/lucide-figma/manifest.json b/packages/lucide-figma/manifest.json
deleted file mode 100644
index 79d07fa3aa..0000000000
--- a/packages/lucide-figma/manifest.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "name": "Lucide Icons",
- "id": "939567362549682242",
- "api": "1.0.0",
- "editorType": ["figma"],
- "main": "dist/assets/main.js",
- "ui": {
- "interface": "dist/src/interface/interface.html",
- "worker": "dist/src/worker/worker.html"
- },
- "parameterOnly": false,
- "parameters": [
- {
- "name": "Icon",
- "key": "icon-name",
- "description": "Enter the name of the icon you want to insert."
- },
- {
- "name": "Size",
- "key": "size",
- "description": "Enter the size of the icon.",
- "allowFreeform": true,
- "optional": true
- }
- ]
-}
diff --git a/packages/lucide-figma/package.json b/packages/lucide-figma/package.json
deleted file mode 100644
index 8fc26e60bf..0000000000
--- a/packages/lucide-figma/package.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
- "name": "lucide-figma",
- "version": "1.0.0",
- "private": true,
- "license": "ISC",
- "main": "src/main.js",
- "scripts": {
- "dev": "vite",
- "build": "tsc && rm -rf dist && pnpm build:main && pnpm build:worker && pnpm build:interface",
- "build:main": "INPUT=main vite build",
- "build:worker": "INPUT=worker vite build",
- "build:interface": "INPUT=interface vite build",
- "serve": "vite preview"
- },
- "dependencies": {
- "minimist": "^1.2.6",
- "react": "^17.0.0",
- "react-dom": "^17.0.0"
- },
- "devDependencies": {
- "@figma/plugin-typings": "^1.36.0",
- "@types/react": "^17.0.0",
- "@types/react-dom": "^17.0.0",
- "@vitejs/plugin-react": "^1.0.0",
- "typescript": "^4.3.2",
- "vite": "5.0.10",
- "vite-plugin-singlefile": "^0.5.1"
- }
-}
diff --git a/packages/lucide-figma/src/api/fetchIcons.ts b/packages/lucide-figma/src/api/fetchIcons.ts
deleted file mode 100644
index 1b5b0a8257..0000000000
--- a/packages/lucide-figma/src/api/fetchIcons.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import iconNodeToSvg from "../helpers/iconNodeToSvg"
-
-export type IconNode = any[]
-export type IconName = string
-
-export type Tag = string[]
-export interface Tags {
- [key:string]: Tag
-}
-
-export interface LucideIcons {
- version: string
- iconNodes: { [key: IconName]: IconNode }
- tags: Tags,
- svgs: { [key: IconName]: string }
-}
-
-export const fetchIcons = async (cachedIcons? : LucideIcons): Promise => {
- const response = await fetch('https://unpkg.com/lucide-static@latest/package.json')
- const packageJson = await response.json();
-
- if(cachedIcons && cachedIcons?.version === packageJson.version) {
- return cachedIcons
- }
-
- const [iconNodesResponse, tagsResponse] = await Promise.all([
- fetch('https://lucide.dev/api/icon-nodes'),
- fetch('https://lucide.dev/api/tags')
- ])
-
- const iconNodes = await iconNodesResponse.json();
- const tags = await tagsResponse.json();
- const svgs = Object.keys(iconNodes).reduce((acc : { [key:string]: string}, iconName) => {
- acc[iconName] = iconNodeToSvg(iconName, iconNodes[iconName])
- return acc
- }, {})
-
- const lucideIcons: LucideIcons = {
- version: packageJson.version,
- tags,
- iconNodes,
- svgs
- }
-
- parent.postMessage({
- pluginMessage: {
- type: "setCachedIcons",
- lucideIcons
- }
- }, "*")
-
- return lucideIcons
-}
-
-export const getIcons = () => new Promise(async (resolve, reject)=> {
-
- parent.postMessage({
- pluginMessage: {
- type: "getCachedIcons",
- }
- }, "*")
-
- window.onmessage = async (event) => {
- if (event.type === 'message' && event?.data?.pluginMessage.type === 'cachedIcons') {
-
- const lucideIcons = await fetchIcons(event?.data?.pluginMessage?.cachedIcons)
- resolve(lucideIcons)
- }
- }
-});
-
-type EventCallback = (lucideIcons: LucideIcons) => void
-
-export const iconFetchListener = (callback: EventCallback) => {
- fetchIcons()
-
- const handleEvent = (event: MessageEvent) => {
- if (event.type === 'message' && event?.data?.pluginMessage.type === 'cachedIcons') {
-
- const lucideIcons = event?.data?.pluginMessage?.cachedIcons
- callback(lucideIcons)
- }
- }
-
- window.addEventListener('message', handleEvent)
-
- const removeListener = () => {
- window.removeEventListener('message', handleEvent)
- }
- return removeListener
-}
diff --git a/packages/lucide-figma/src/components/EditBar/EditBar.tsx b/packages/lucide-figma/src/components/EditBar/EditBar.tsx
deleted file mode 100644
index f29f0bd16a..0000000000
--- a/packages/lucide-figma/src/components/EditBar/EditBar.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const EditBar = () => {
-
-}
-
-export default EditBar
diff --git a/packages/lucide-figma/src/components/IconButton/IconButton.scss b/packages/lucide-figma/src/components/IconButton/IconButton.scss
deleted file mode 100644
index 78980aa572..0000000000
--- a/packages/lucide-figma/src/components/IconButton/IconButton.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.icon-button {
- padding: 8px;
- color: var(--color-black);
- background: transparent;
- border: 0;
- border-radius: 2px;
- appearance: none;
- outline: 0;
-
- &:hover {
- background: rgba(0, 0, 0, 0.06);
- }
-
- &:focus,
- &:active {
- box-shadow: inset 0 0 0 2px var(--color-blue);
- }
-}
diff --git a/packages/lucide-figma/src/components/IconButton/IconButton.tsx b/packages/lucide-figma/src/components/IconButton/IconButton.tsx
deleted file mode 100644
index a5b3d8398c..0000000000
--- a/packages/lucide-figma/src/components/IconButton/IconButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { renderToString } from 'react-dom/server'
-import { FC } from 'react';
-import './IconButton.scss'
-
-interface IconButtonProps {
- name: string,
- component: FC,
-}
-
-function IconButton({ name, component: IconComponent }: IconButtonProps) {
- const onIconClick = () => {
- const svg = renderToString( {
- value: string,
- iconCount: number,
- onChange: (event: ChangeEvent) => void
- placeholder: string
-}
-
-function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps) {
- return (
- > {
- size?: string | number
-}
-
-/**
- * Converts string to KebabCase
- * Copied from scripts/helper. If anyone knows how to properly import it here
- * then please fix it.
- *
- * @param {string} string
- * @returns {string} A kebabized string
- */
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
-const createIconComponent = (iconName: string, iconNode: IconNode) => {
- const Component = forwardRef(
- ({ color = 'currentColor', size = 24, strokeWidth = 2, children, ...rest }, ref) =>
- createElement(
- 'svg',
- {
- ref,
- ...defaultAttributes,
- width: size,
- height: size,
- stroke: color,
- strokeWidth,
- className: `lucide lucide-${toKebabCase(iconName)}`,
- ...rest,
- },
- [...iconNode.map(([tag, attrs]: [tag:string, attrs: SVGProps]) => createElement(tag, attrs)), ...([children] || [])],
- ),
- );
-
- Component.displayName = `${iconName}`;
-
- return Component;
-};
-
-export default createIconComponent
diff --git a/packages/lucide-figma/src/helpers/filterIcons.ts b/packages/lucide-figma/src/helpers/filterIcons.ts
deleted file mode 100644
index 61eeaafd51..0000000000
--- a/packages/lucide-figma/src/helpers/filterIcons.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Tags } from "../api/fetchIcons";
-import { Icon } from "../hooks/useSearch";
-
-export default (icons: Icon[], tags: Tags ,query:string) =>
- icons.filter(([name]: Icon) => {
- const iconTags = tags && tags[name] ? tags[name] : []
-
- return [name, ...iconTags].some(
- (item:string) => item
- .toLowerCase()
- .includes(query)
- )
- })
diff --git a/packages/lucide-figma/src/helpers/iconNodeToSvg.ts b/packages/lucide-figma/src/helpers/iconNodeToSvg.ts
deleted file mode 100644
index b2def619b5..0000000000
--- a/packages/lucide-figma/src/helpers/iconNodeToSvg.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { IconNode } from "../api/fetchIcons";
-import createIconComponent from "./createIconComponent";
-
-const iconNodeToSvg = (iconName: string, iconNode : IconNode) => {
- const IconComponent = createIconComponent(iconName, iconNode)
- return renderToString(createElement(IconComponent));
-}
-
-export default iconNodeToSvg
diff --git a/packages/lucide-figma/src/helpers/naming.ts b/packages/lucide-figma/src/helpers/naming.ts
deleted file mode 100644
index 1aa9a0c75c..0000000000
--- a/packages/lucide-figma/src/helpers/naming.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-
-/**
- * Converts string to camelcase
- *
- * @param {string} string
- */
-export const toCamelCase = (string: string) =>
- string.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2) =>
- p2 ? p2.toUpperCase() : p1.toLowerCase(),
- );
-
-/**
- * Converts string to PascalCase
- *
- * @param {string} string
- */
-export const toPascalCase = (string: string) => {
- const camelCase = toCamelCase(string);
-
- return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-};
diff --git a/packages/lucide-figma/src/hooks/useSearch.tsx b/packages/lucide-figma/src/hooks/useSearch.tsx
deleted file mode 100644
index b608e31b54..0000000000
--- a/packages/lucide-figma/src/hooks/useSearch.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IconName, IconNode, Tags } from "../api/fetchIcons";
-import filterIcons from "../helpers/filterIcons";
-
-export type Icon = [
- name: IconName,
- iconNode: IconNode
-]
-
-function useSearch(icons: Icon[], tags: Tags ,query: string) {
- if(!query) return icons;
-
- const searchString = query.toLowerCase()
-
- return filterIcons(icons, tags, searchString);
-}
-
-export default useSearch;
diff --git a/packages/lucide-figma/src/icons/search-large.svg b/packages/lucide-figma/src/icons/search-large.svg
deleted file mode 100644
index 6e6a12b342..0000000000
--- a/packages/lucide-figma/src/icons/search-large.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/lucide-figma/src/icons/search.svg b/packages/lucide-figma/src/icons/search.svg
deleted file mode 100644
index e6473bfb78..0000000000
--- a/packages/lucide-figma/src/icons/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/lucide-figma/src/interface/interface.html b/packages/lucide-figma/src/interface/interface.html
deleted file mode 100644
index 44fbeda19d..0000000000
--- a/packages/lucide-figma/src/interface/interface.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/packages/lucide-figma/src/interface/interface.scss b/packages/lucide-figma/src/interface/interface.scss
deleted file mode 100644
index 532583da22..0000000000
--- a/packages/lucide-figma/src/interface/interface.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@font-face {
- font-family: Inter;
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9')
- format('woff2'),
- url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9')
- format('woff');
-}
-
-@font-face {
- font-family: Inter;
- font-style: normal;
- font-weight: 500;
- font-display: swap;
- src: url('https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.9')
- format('woff2'),
- url('https://rsms.me/inter/font-files/Inter-Medium.woff?v=3.9')
- format('woff');
-}
-
-:root {
- --color-blue: #18a0fb;
- --color-black: #333;
-}
-
-body {
- font-family: Inter, sans-serif;
- font-size: 11px;
- margin: 0;
-}
-
-.search-input {
- position: sticky;
- top: 0;
- border-bottom: 1px solid #e5e5e5;
- backface-visibility: hidden;
-}
-
-main {
- padding-bottom: 8px;
-}
-
-.icon-grid {
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- grid-gap: 8px;
-}
-
-footer {
- margin-top: 8px;
- padding: 8px;
- font-size: 12px;
- color: rgba(0, 0, 0, 0.5);
-
- .footer-link {
- color: inherit;
- }
-}
-
-.floating {
- position: absolute;
- bottom: -10px;
- left: 0;
- padding: 10px;
- background: blue;
-}
-
-.info-page {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 24px;
-}
-
-.lucide-logo {
- width: 160px;
-}
-
-.version {
- margin-top: 8px;
- padding: 8px;
- font-weight: bold;
- font-size: 18px;
- color: rgba(0, 0, 0, 0.5);
-}
-
-.link-list {
- width: 160px;
- margin: 0 auto;
- padding-top: 24px;
-}
-
-.info-link {
- color: var(--color-blue);
- display: block;
- padding: 2px 0;
- text-decoration: none;
-
- &:hover {
- text-decoration: underline;
- }
-}
diff --git a/packages/lucide-figma/src/interface/interface.tsx b/packages/lucide-figma/src/interface/interface.tsx
deleted file mode 100644
index cba8958d48..0000000000
--- a/packages/lucide-figma/src/interface/interface.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import ReactDOM from 'react-dom'
-import * as views from '../views'
-
-type Views = typeof views
-
-import useSearch, { Icon } from '../hooks/useSearch'
-
-import { getIcons, iconFetchListener, LucideIcons } from '../api/fetchIcons'
-import './interface.scss'
-import Menu from '../components/Menu'
-
-function App() {
- const [page, setPage] = useState('icons')
- const [query, setQuery] = useState('')
- const [icons, setIcons] = useState([])
- const [tags, setTags] = useState({})
- const [version, setVersion ] = useState('')
-
- const searchResults = useMemo(() => useSearch(icons, tags, query), [icons, query])
-
- const handleFetchResponse = async (lucideIcons: LucideIcons) => {
- const icons = Object.entries(lucideIcons.iconNodes)
-
- setIcons(icons)
- setTags(lucideIcons.tags)
- setVersion(lucideIcons.version)
- }
-
- useEffect(() => {
- const removeListener = iconFetchListener(handleFetchResponse)
-
- return removeListener
- }, [])
-
- const View = views?.[page as keyof Views] ?? views.icons
-
- return (
- setQuery(event.target.value)}
- placeholder={icons.length ? `Search ${icons.length} icons`: 'Loading icons ..'}
- />
-
-
-
- )
-}
-
-export default Icons
diff --git a/packages/lucide-figma/src/views/Info.tsx b/packages/lucide-figma/src/views/Info.tsx
deleted file mode 100644
index 082d7b4db2..0000000000
--- a/packages/lucide-figma/src/views/Info.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { SyntheticEvent } from "react"
-
-interface PageProps {
- version: string
-}
-
-const Info = ({ version }: PageProps) => {
- const menuItems = [
- {
- name: 'Report a bug',
- url: 'https://github.com/lucide-icons/lucide/issues'
- },
- {
- name: 'Contribute an icon',
- url: 'https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md'
- },
- {
- name: 'Website',
- url: 'https://lucide.dev'
- },
- {
- name: 'Repository',
- url: 'https://github.com/lucide-icons/lucide'
- },
- {
- name: 'License',
- url: 'https://lucide.dev/license'
- },
- {
- name: 'Community Page',
- url: 'https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons'
- },
- {
- name: 'Supported Frameworks',
- url: 'https://lucide.dev/packages'
- }
- ]
-
- const onClick = (url: string) => (event: SyntheticEvent) => {
- event.preventDefault()
-
- window.open(url,'_blank')
- }
-
- return (
-
- )
-}
-
-export default Info
diff --git a/packages/lucide-figma/src/views/index.ts b/packages/lucide-figma/src/views/index.ts
deleted file mode 100644
index f880a75bb2..0000000000
--- a/packages/lucide-figma/src/views/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as icons } from './Icons'
-export { default as info } from './Info'
diff --git a/packages/lucide-figma/src/worker/worker.html b/packages/lucide-figma/src/worker/worker.html
deleted file mode 100644
index c848e9ef41..0000000000
--- a/packages/lucide-figma/src/worker/worker.html
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/packages/lucide-figma/src/worker/worker.ts b/packages/lucide-figma/src/worker/worker.ts
deleted file mode 100644
index 6f1e1f7c7a..0000000000
--- a/packages/lucide-figma/src/worker/worker.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { fetchIcons, LucideIcons } from "../api/fetchIcons"
-import createIconComponent from "../helpers/createIconComponent"
-import { renderToString } from 'react-dom/server'
-import { createElement } from "react"
-
-const getLatestIcons = async ({ cachedIcons }: any) => {
- const lucideIcons = await fetchIcons(cachedIcons)
-
- parent.postMessage({
- pluginMessage: {
- type: "latestIcons",
- lucideIcons,
- }
- }, "*")
-}
-
-const getSvg = async ({ cachedIcons, iconName, size = 24 }: { cachedIcons: LucideIcons, iconName: string, size: number }) => {
- if (!cachedIcons) {
- return;
- }
-
- console.log( iconName, size)
-
- const iconNode = cachedIcons.iconNodes[iconName];
-
- if (iconNode) {
- const IconComponent = createIconComponent(iconName, iconNode)
- const svg = renderToString(createElement(IconComponent, { size }));
-
- parent.postMessage({ pluginMessage: {
- type: 'drawIcon',
- icon: {
- name: iconName,
- svg,
- size
- }
- }}, '*')
-
- parent.postMessage({ pluginMessage: {
- type: 'close',
- }}, '*')
- }
-}
-
-window.onmessage = async (event) => {
- if (!event?.data?.pluginMessage) {
- return
- }
-
- const { pluginMessage } = event.data
-
- switch (pluginMessage.type) {
- case "getLatestIcons":
- getLatestIcons(pluginMessage)
- break;
-
- case "getSvg":
- getSvg(pluginMessage)
- break;
-
- default:
- break;
- }
-}
diff --git a/packages/lucide-figma/tsconfig.json b/packages/lucide-figma/tsconfig.json
deleted file mode 100644
index 5f288ca6fb..0000000000
--- a/packages/lucide-figma/tsconfig.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
- "compilerOptions": {
- "target": "ESNext",
- "useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ESNext"],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": false,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
- "resolveJsonModule": true,
- "isolatedModules": false,
- "noEmit": true,
- "jsx": "react-jsx",
- "typeRoots": [
- "./node_modules/@types",
- "./node_modules/@figma"
- ],
- },
- "include": ["src"]
-}
diff --git a/packages/lucide-figma/vite.config.ts b/packages/lucide-figma/vite.config.ts
deleted file mode 100644
index 26bee3b28a..0000000000
--- a/packages/lucide-figma/vite.config.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { viteSingleFile } from "vite-plugin-singlefile"
-import { resolve } from 'path'
-
-const entries = {
- main: resolve(__dirname, 'src/main.ts'),
- interface: resolve(__dirname, './src/interface/interface.html'),
- worker: resolve(__dirname, './src/worker/worker.html'),
-}
-
-const input = {};
-
-if(process.env['INPUT']) {
- const entry = process.env['INPUT'];
- input[entry] = entries[entry]
-}
-
-// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [react(), viteSingleFile()],
- build: {
- target: "esnext",
- assetsInlineLimit: 100000000,
- chunkSizeWarningLimit: 100000000,
- cssCodeSplit: false,
- brotliSize: false,
- emptyOutDir: false,
- rollupOptions: {
- input,
- inlineDynamicImports: true,
- output: {
- manualChunks: (chunk) => "all.js",
- entryFileNames: `assets/[name].js`,
- chunkFileNames: `assets/[name].js`,
- assetFileNames: `assets/[name].[ext]`
- },
- },
- },
-})
diff --git a/packages/lucide-preact/README.md b/packages/lucide-preact/README.md
index ec0e9df54d..05d37d5d28 100644
--- a/packages/lucide-preact/README.md
+++ b/packages/lucide-preact/README.md
@@ -1,3 +1,12 @@
+
+
# Lucide Preact
Implementation of the lucide icon library for preact applications.
@@ -16,64 +25,26 @@ or
npm install lucide-preact
```
-## How to use
-
-It's build with ESmodules so it's completely tree-shakable.
-Each icon can be imported as a preact component.
-
-### Example
-
-You can pass additional props to adjust the icon.
-
-```js
-import { Camera } from 'lucide-preact';
-// Returns PreactComponent
-
-// Usage
-const App = () => {
- return ][]
-
-export interface LucideProps extends Partial> {
- color?: string
- size?: string | number
- strokeWidth?: string | number
- absoluteStrokeWidth?: boolean
-}
-
-export type LucideIcon = FunctionComponent
+import { h, type JSX } from 'preact';
+import { mergeClasses, toKebabCase } from '@lucide/shared';
+import Icon from './Icon';
+import type { IconNode, LucideIcon, LucideProps } from './types';
/**
- * Converts string to KebabCase
- * Copied from scripts/helper. If anyone knows how to properly import it here
- * then please fix it.
- *
- * @param {string} string
- * @returns {string} A kebabized string
+ * Create a Lucide icon component
+ * @param {string} iconName
+ * @param {array} iconNode
+ * @returns {FunctionComponent} LucideIcon
*/
-export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
- const Component = (
- { color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, class: classes = '', ...rest }: LucideProps
- ) =>
+ const Component = ({ class: classes = '', children, ...props }: LucideProps) =>
h(
- 'svg',
+ Icon,
{
- ...defaultAttributes,
- width: String(size),
- height: size,
- stroke: color,
- ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
- class: ['lucide', `lucide-${toKebabCase(iconName)}`, classes].join(' '),
- ...rest,
+ ...props,
+ iconNode,
+ class: mergeClasses>(
+ `lucide-${toKebabCase(iconName)}`,
+ classes,
+ ),
},
- [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
+ children,
);
Component.displayName = `${iconName}`;
@@ -45,4 +29,4 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
return Component;
};
-export default createLucideIcon
+export default createLucideIcon;
diff --git a/packages/lucide-preact/src/defaultAttributes.ts b/packages/lucide-preact/src/defaultAttributes.ts
index 9f1b78dbf9..6e633a7c64 100644
--- a/packages/lucide-preact/src/defaultAttributes.ts
+++ b/packages/lucide-preact/src/defaultAttributes.ts
@@ -1,4 +1,4 @@
-import type { JSX } from 'preact'
+import type { JSX } from 'preact';
export default {
xmlns: 'http://www.w3.org/2000/svg',
diff --git a/packages/lucide-preact/src/lucide-preact.prefixed.ts b/packages/lucide-preact/src/lucide-preact.prefixed.ts
new file mode 100644
index 0000000000..408ad714b1
--- /dev/null
+++ b/packages/lucide-preact/src/lucide-preact.prefixed.ts
@@ -0,0 +1,7 @@
+export * from './icons';
+export * as icons from './icons';
+export * from './aliases/prefixed';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-preact/src/lucide-preact.suffixed.ts b/packages/lucide-preact/src/lucide-preact.suffixed.ts
new file mode 100644
index 0000000000..8993799d23
--- /dev/null
+++ b/packages/lucide-preact/src/lucide-preact.suffixed.ts
@@ -0,0 +1,7 @@
+export * from './icons';
+export * as icons from './icons';
+export * from './aliases/suffixed';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-preact/src/lucide-preact.ts b/packages/lucide-preact/src/lucide-preact.ts
index 2ddd5eb314..6636c22592 100644
--- a/packages/lucide-preact/src/lucide-preact.ts
+++ b/packages/lucide-preact/src/lucide-preact.ts
@@ -1,4 +1,7 @@
export * from './icons';
export * as icons from './icons';
export * from './aliases';
+export * from './types';
+
export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-preact/src/types.ts b/packages/lucide-preact/src/types.ts
new file mode 100644
index 0000000000..03604e9606
--- /dev/null
+++ b/packages/lucide-preact/src/types.ts
@@ -0,0 +1,12 @@
+import { type FunctionComponent, type JSX } from 'preact';
+
+export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record][];
+
+export interface LucideProps extends Partial> {
+ color?: string;
+ size?: string | number;
+ strokeWidth?: string | number;
+ absoluteStrokeWidth?: boolean;
+}
+
+export type LucideIcon = FunctionComponent;
diff --git a/packages/lucide-preact/tests/Icon.spec.tsx b/packages/lucide-preact/tests/Icon.spec.tsx
new file mode 100644
index 0000000000..d43760ba93
--- /dev/null
+++ b/packages/lucide-preact/tests/Icon.spec.tsx
@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/preact';
+
+import { airVent } from './testIconNodes';
+import { Icon } from '../src/lucide-preact';
+
+describe('Using Icon Component', () => {
+ it('should render icon based on a iconNode', async () => {
+ const { container } = render(
+ should not scale the strokeWidth when ab
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
- class="lucide lucide-grid3x3 "
- data-testid="grid-icon"
+ class="lucide lucide-grid3x3"
>
should render an component 1`] = `
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
- class="lucide lucide-grid3x3 "
+ class="lucide lucide-grid3x3"
>
{
+ it('should create a component from an iconNode', () => {
+ const AirVent = createLucideIcon('AirVent', airVent);
+
+ const { container } = render(}
+type AttributesAssertion = { attributes: Record };
describe('Using lucide icon components', () => {
it('should render an component', () => {
- const { container } = render( > {
- size?: string | number
+ size?: string | number;
}
-export declare const createLucideIcon: (iconName: string, iconNode: any[]) => (props: LucideProps) => JSX.Element;
+export declare const createLucideIcon: (
+ iconName: string,
+ iconNode: any[],
+) => (props: LucideProps) => JSX.Element;
export type Icon = React.FC;
diff --git a/packages/lucide-react-native/package.json b/packages/lucide-react-native/package.json
index a0106913ad..6991b32e95 100644
--- a/packages/lucide-react-native/package.json
+++ b/packages/lucide-react-native/package.json
@@ -36,15 +36,16 @@
"scripts": {
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles",
"copy:license": "cp ../../LICENSE ./LICENSE",
- "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+ "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --iconFileExtension=.ts --exportFileName=index.ts --withAliases --aliasesFileExtension=.ts",
"build:bundles": "rollup -c ./rollup.config.mjs",
- "test": "vitest run",
+ "test": "pnpm build:icons && vitest run",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@lucide/rollup-plugins": "workspace:*",
"@lucide/build-icons": "workspace:*",
+ "@lucide/shared": "workspace:*",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/react": "^14.1.2",
"@types/prop-types": "^15.7.5",
@@ -53,17 +54,17 @@
"jest-serializer-html": "^7.1.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
- "react-native": "^0.73.1",
- "react-native-svg": "^14.1.0",
- "rollup": "^4.9.2",
+ "react-native": "^0.76.0",
+ "react-native-svg": "^15.8.0",
+ "rollup": "^4.22.4",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^4.8.4",
- "vite": "5.0.10",
+ "vite": "5.1.8",
"vitest": "^1.1.1"
},
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0",
"react-native": "*",
- "react-native-svg": "^12.0.0 || ^13.0.0 || ^14.0.0"
+ "react-native-svg": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"
}
}
diff --git a/packages/lucide-react-native/rollup.config.mjs b/packages/lucide-react-native/rollup.config.mjs
index 948b21ae65..1474b3547f 100644
--- a/packages/lucide-react-native/rollup.config.mjs
+++ b/packages/lucide-react-native/rollup.config.mjs
@@ -1,5 +1,5 @@
import plugins from '@lucide/rollup-plugins';
-import dts from "rollup-plugin-dts";
+import dts from 'rollup-plugin-dts';
import pkg from './package.json' assert { type: 'json' };
const packageName = 'LucideReact';
@@ -23,9 +23,9 @@ const bundles = [
const configs = bundles
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
- inputs.map(input => ({
+ inputs.map((input) => ({
input,
- plugins: plugins(pkg, minify),
+ plugins: plugins({ pkg, minify }),
external: ['react', 'react-native-svg'],
output: {
name: packageName,
@@ -49,13 +49,36 @@ const configs = bundles
)
.flat();
- export default [
- {
- input: inputs[0],
- output: [{
- file: `dist/${outputFileName}.d.ts`, format: "es"
- }],
- plugins: [dts()],
- },
- ...configs
- ];
+export default [
+ {
+ input: inputs[0],
+ output: [
+ {
+ file: `dist/${outputFileName}.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ {
+ input: `src/${outputFileName}.suffixed.ts`,
+ output: [
+ {
+ file: `dist/${outputFileName}.suffixed.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ {
+ input: `src/${outputFileName}.prefixed.ts`,
+ output: [
+ {
+ file: `dist/${outputFileName}.prefixed.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ ...configs,
+];
diff --git a/packages/lucide-react-native/scripts/exportTemplate.mjs b/packages/lucide-react-native/scripts/exportTemplate.mjs
index ad1051c2a9..3379b66eb4 100644
--- a/packages/lucide-react-native/scripts/exportTemplate.mjs
+++ b/packages/lucide-react-native/scripts/exportTemplate.mjs
@@ -1,7 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+export default ({ componentName, iconName, children, getSvg, deprecated, deprecationReason }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
@@ -17,7 +17,7 @@ import createLucideIcon from '../createLucideIcon';
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {JSX.Element} JSX Element
- * ${deprecated ? '@deprecated' : ''}
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
diff --git a/packages/lucide-react-native/src/Icon.ts b/packages/lucide-react-native/src/Icon.ts
new file mode 100644
index 0000000000..ee43a1b0d7
--- /dev/null
+++ b/packages/lucide-react-native/src/Icon.ts
@@ -0,0 +1,69 @@
+import { createElement, forwardRef, type FunctionComponent } from 'react';
+import * as NativeSvg from 'react-native-svg';
+import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
+import { IconNode, LucideProps } from './types';
+
+interface IconComponentProps extends LucideProps {
+ iconNode: IconNode;
+}
+
+/**
+ * Lucide icon component
+ *
+ * @component Icon
+ * @param {object} props
+ * @param {string} props.color - The color of the icon
+ * @param {number} props.size - The size of the icon
+ * @param {number} props.strokeWidth - The stroke width of the icon
+ * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
+ * @param {string} props.className - The class name of the icon
+ * @param {IconNode} props.children - The children of the icon
+ * @param {IconNode} props.iconNode - The icon node of the icon
+ *
+ * @returns {ForwardRefExoticComponent} LucideIcon
+ */
+const Icon = forwardRef(
+ (
+ {
+ color = 'currentColor',
+ size = 24,
+ strokeWidth = 2,
+ absoluteStrokeWidth,
+ children,
+ iconNode,
+ ...rest
+ },
+ ref,
+ ) => {
+ const customAttrs = {
+ stroke: color,
+ strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
+ ...rest,
+ };
+
+ return createElement(
+ NativeSvg.Svg as unknown as string,
+ {
+ ref,
+ ...defaultAttributes,
+ width: size,
+ height: size,
+ ...customAttrs,
+ },
+ [
+ ...iconNode.map(([tag, attrs]) => {
+ const upperCasedTag = (tag.charAt(0).toUpperCase() +
+ tag.slice(1)) as keyof typeof NativeSvg;
+ // duplicating the attributes here because generating the OTA update bundles don't inherit the SVG properties from parent (codepush, expo-updates)
+ return createElement(
+ NativeSvg[upperCasedTag] as FunctionComponent,
+ { ...childDefaultAttributes, ...customAttrs, ...attrs } as LucideProps,
+ );
+ }),
+ ...((Array.isArray(children) ? children : [children]) || []),
+ ],
+ );
+ },
+);
+
+export default Icon;
diff --git a/packages/lucide-react-native/src/aliases/index.ts b/packages/lucide-react-native/src/aliases/index.ts
new file mode 100644
index 0000000000..bbe66d0a23
--- /dev/null
+++ b/packages/lucide-react-native/src/aliases/index.ts
@@ -0,0 +1,3 @@
+export * from './aliases';
+export * from './prefixed';
+export * from './suffixed';
diff --git a/packages/lucide-react-native/src/createLucideIcon.ts b/packages/lucide-react-native/src/createLucideIcon.ts
index 9a080895ca..9eb27bd972 100644
--- a/packages/lucide-react-native/src/createLucideIcon.ts
+++ b/packages/lucide-react-native/src/createLucideIcon.ts
@@ -1,21 +1,28 @@
-import { forwardRef, createElement, ReactSVG, FunctionComponent, ForwardRefExoticComponent } from 'react';
+import {
+ forwardRef,
+ createElement,
+ ReactSVG,
+ FunctionComponent,
+ ForwardRefExoticComponent,
+} from 'react';
import * as NativeSvg from 'react-native-svg';
import defaultAttributes, { childDefaultAttributes } from './defaultAttributes';
-import type { SvgProps } from 'react-native-svg';
-
-export type IconNode = [elementName: keyof ReactSVG, attrs: Record][]
-
-export interface LucideProps extends SvgProps {
- size?: string | number
- absoluteStrokeWidth?: boolean
- 'data-testid'?: string
-}
-
-export type LucideIcon = ForwardRefExoticComponent;
+import { IconNode, LucideIcon, LucideProps } from './types';
const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
const Component = forwardRef(
- ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, children, 'data-testid': dataTestId, ...rest }: LucideProps, ref) => {
+ (
+ {
+ color = 'currentColor',
+ size = 24,
+ strokeWidth = 2,
+ absoluteStrokeWidth,
+ children,
+ 'data-testid': dataTestId,
+ ...rest
+ }: LucideProps,
+ ref,
+ ) => {
const customAttrs = {
stroke: color,
strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
@@ -42,12 +49,10 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
{ ...childDefaultAttributes, ...customAttrs, ...attrs } as LucideProps,
);
}),
- ...(
- (Array.isArray(children) ? children : [children]) || []
- ),
+ ...((Array.isArray(children) ? children : [children]) || []),
],
);
- }
+ },
);
Component.displayName = `${iconName}`;
diff --git a/packages/lucide-react-native/src/lucide-react-native.prefixed.ts b/packages/lucide-react-native/src/lucide-react-native.prefixed.ts
new file mode 100644
index 0000000000..408ad714b1
--- /dev/null
+++ b/packages/lucide-react-native/src/lucide-react-native.prefixed.ts
@@ -0,0 +1,7 @@
+export * from './icons';
+export * as icons from './icons';
+export * from './aliases/prefixed';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-react-native/src/lucide-react-native.suffixed.ts b/packages/lucide-react-native/src/lucide-react-native.suffixed.ts
new file mode 100644
index 0000000000..8993799d23
--- /dev/null
+++ b/packages/lucide-react-native/src/lucide-react-native.suffixed.ts
@@ -0,0 +1,7 @@
+export * from './icons';
+export * as icons from './icons';
+export * from './aliases/suffixed';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-react-native/src/lucide-react-native.ts b/packages/lucide-react-native/src/lucide-react-native.ts
index a024114981..6636c22592 100644
--- a/packages/lucide-react-native/src/lucide-react-native.ts
+++ b/packages/lucide-react-native/src/lucide-react-native.ts
@@ -1,9 +1,7 @@
export * from './icons';
export * as icons from './icons';
export * from './aliases';
-export {
- default as createLucideIcon,
- type IconNode,
- type LucideProps,
- type LucideIcon,
-} from './createLucideIcon';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-react-native/src/types.ts b/packages/lucide-react-native/src/types.ts
new file mode 100644
index 0000000000..fd534414ac
--- /dev/null
+++ b/packages/lucide-react-native/src/types.ts
@@ -0,0 +1,12 @@
+import type { ForwardRefExoticComponent, ReactSVG } from 'react';
+import type { SvgProps } from 'react-native-svg';
+
+export type IconNode = [elementName: keyof ReactSVG, attrs: Record][];
+
+export interface LucideProps extends SvgProps {
+ size?: string | number;
+ absoluteStrokeWidth?: boolean;
+ 'data-testid'?: string;
+}
+
+export type LucideIcon = ForwardRefExoticComponent;
diff --git a/packages/lucide-react-native/tests/Icon.spec.tsx b/packages/lucide-react-native/tests/Icon.spec.tsx
new file mode 100644
index 0000000000..0bf4e886ad
--- /dev/null
+++ b/packages/lucide-react-native/tests/Icon.spec.tsx
@@ -0,0 +1,35 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { airVent } from './testIconNodes';
+import { Icon } from '../src/lucide-react-native';
+
+vi.mock('react-native-svg');
+
+describe('Using Icon Component', () => {
+ it('should render icon based on a iconNode', async () => {
+ const { container } = render(
+ should not scale the strokeWidth when ab
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
- data-testid="grid-icon"
>
+type Attributes = Record;
describe('Using lucide icon components', () => {
it('should render an component', () => {
- const { container } = render( {
/>,
);
- expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
+ expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
});
-
it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
- const testId = 'grid-icon';
- const { container, getByTestId } = render(
+ const { container } = render(
};
- expect(attributes.stroke.value).toBe('red');
- expect(attributes.width.value).toBe('48');
- expect(attributes.height.value).toBe('48');
- expect(attributes['stroke-width'].value).toBe('1');
+ const SVGElement = container.firstElementChild;
- expect( container.innerHTML ).toMatchSnapshot();
+ expect(SVGElement).toHaveAttribute('stroke', 'red');
+ expect(SVGElement).toHaveAttribute('width', '48');
+ expect(SVGElement).toHaveAttribute('height', '48');
+ expect(SVGElement).toHaveAttribute('stroke-width', '1');
+
+ expect(container.innerHTML).toMatchSnapshot();
});
it('should work with a single child component', () => {
- const testId = "single-child";
- const childId = "child";
+ const testId = 'single-child';
+ const childId = 'child';
const { container, getByTestId } = render(
-
-
+ ,
);
- const { children} = getByTestId(testId) as unknown as{ children: HTMLCollection};
- const lastChild = children[children.length -1];
+ const { children } = container.firstElementChild ?? {};
+ const lastChild = children?.[children.length - 1];
expect(lastChild).toEqual(getByTestId(childId));
expect(container.innerHTML).toMatchSnapshot();
- })
+ });
it('should work with several children components', () => {
- const testId = "multiple-children";
- const childId1 = "child1";
- const childId2 = "child2";
+ const testId = 'multiple-children';
+ const childId1 = 'child1';
+ const childId2 = 'child2';
const { container, getByTestId } = render(
-
-
-
+ ,
);
- const {children} = getByTestId(testId) as unknown as{ children: HTMLCollection};
+ const { children } = getByTestId(testId) as unknown as { children: HTMLCollection };
const child1 = children[children.length - 2];
const child2 = children[children.length - 1];
expect(child1).toEqual(getByTestId(childId1));
expect(child2).toEqual(getByTestId(childId2));
expect(container.innerHTML).toMatchSnapshot();
- })
+ });
it('should duplicate properties to children components', () => {
const testId = 'multiple-children';
@@ -125,7 +122,12 @@ describe('Using lucide icon components', () => {
const strokeWidth = 10;
const { container, getByTestId } = render(
- {
- name: keyof typeof dynamicIconImports;
-}
-
-const Icon = ({ name, ...props }: IconProps) => {
- const LucideIcon = lazy(dynamicIconImports[name]);
-
- return (
-
-
- );
-}
-
-export default Icon
-```
-
-##### NextJS Example
-
-In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component.
-
-To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this:
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
- transpilePackages: ['lucide-react'] // add this
-}
-
-module.exports = nextConfig
-
-```
-
-You can then start using it:
-
-```tsx
-import dynamic from 'next/dynamic'
-import { LucideProps } from 'lucide-react';
-import dynamicIconImports from 'lucide-react/dynamicIconImports';
-
-interface IconProps extends LucideProps {
- name: keyof typeof dynamicIconImports;
-}
-
-const Icon = ({ name, ...props }: IconProps) => {
- const LucideIcon = dynamic(dynamicIconImports[name])
-
- return (
+ (
+ {
+ color = 'currentColor',
+ size = 24,
+ strokeWidth = 2,
+ absoluteStrokeWidth,
+ className = '',
+ children,
+ iconNode,
+ ...rest
+ },
+ ref,
+ ) => {
+ return createElement(
+ 'svg',
+ {
+ ref,
+ ...defaultAttributes,
+ width: size,
+ height: size,
+ stroke: color,
+ strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
+ className: mergeClasses('lucide', className),
+ ...rest,
+ },
+ [
+ ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+ ...(Array.isArray(children) ? children : [children]),
+ ],
+ );
+ },
+);
+
+export default Icon;
diff --git a/packages/lucide-react/src/aliases/index.ts b/packages/lucide-react/src/aliases/index.ts
new file mode 100644
index 0000000000..bbe66d0a23
--- /dev/null
+++ b/packages/lucide-react/src/aliases/index.ts
@@ -0,0 +1,3 @@
+export * from './aliases';
+export * from './prefixed';
+export * from './suffixed';
diff --git a/packages/lucide-react/src/createLucideIcon.ts b/packages/lucide-react/src/createLucideIcon.ts
index b7c2b7c1f6..b209293824 100644
--- a/packages/lucide-react/src/createLucideIcon.ts
+++ b/packages/lucide-react/src/createLucideIcon.ts
@@ -1,60 +1,22 @@
-import {
- forwardRef,
- createElement,
- ReactSVG,
- SVGProps,
- ForwardRefExoticComponent,
- RefAttributes,
-} from 'react';
-import defaultAttributes from './defaultAttributes';
+import { createElement, forwardRef } from 'react';
+import { mergeClasses, toKebabCase } from '@lucide/shared';
+import { IconNode, LucideProps } from './types';
+import Icon from './Icon';
-export type IconNode = [elementName: keyof ReactSVG, attrs: Record][];
-
-export type SVGAttributes = Partial>;
-type ComponentAttributes = RefAttributes & SVGAttributes;
-
-export interface LucideProps extends ComponentAttributes {
- size?: string | number;
- absoluteStrokeWidth?: boolean;
-}
-
-export type LucideIcon = ForwardRefExoticComponent;
/**
- * Converts string to KebabCase
- * Copied from scripts/helper. If anyone knows how to properly import it here
- * then please fix it.
- *
- * @param {string} string
- * @returns {string} A kebabized string
+ * Create a Lucide icon component
+ * @param {string} iconName
+ * @param {array} iconNode
+ * @returns {ForwardRefExoticComponent} LucideIcon
*/
-export const toKebabCase = (string: string) =>
- string
- .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
- .toLowerCase()
- .trim();
-
-const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
- const Component = forwardRef(
- ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, className = '', children, ...rest }, ref) =>{
-
- return createElement(
- 'svg',
- {
- ref,
- ...defaultAttributes,
- width: size,
- height: size,
- stroke: color,
- strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
- className: ['lucide', `lucide-${toKebabCase(iconName)}`, className].join(' '),
- ...rest,
- },
- [
- ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
- ...(Array.isArray(children) ? children : [children]),
- ]
- )
- }
+const createLucideIcon = (iconName: string, iconNode: IconNode) => {
+ const Component = forwardRef(({ className, ...props }, ref) =>
+ createElement(Icon, {
+ ref,
+ iconNode,
+ className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+ ...props,
+ }),
);
Component.displayName = `${iconName}`;
diff --git a/packages/lucide-react/src/lucide-react.prefixed.ts b/packages/lucide-react/src/lucide-react.prefixed.ts
new file mode 100644
index 0000000000..a6eed90a35
--- /dev/null
+++ b/packages/lucide-react/src/lucide-react.prefixed.ts
@@ -0,0 +1,6 @@
+export * as icons from './icons';
+export * from './aliases/prefixed';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-react/src/lucide-react.suffixed.ts b/packages/lucide-react/src/lucide-react.suffixed.ts
new file mode 100644
index 0000000000..10d5d93d59
--- /dev/null
+++ b/packages/lucide-react/src/lucide-react.suffixed.ts
@@ -0,0 +1,6 @@
+export * as icons from './icons';
+export * from './aliases/suffixed';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-react/src/lucide-react.ts b/packages/lucide-react/src/lucide-react.ts
index a024114981..6636c22592 100644
--- a/packages/lucide-react/src/lucide-react.ts
+++ b/packages/lucide-react/src/lucide-react.ts
@@ -1,9 +1,7 @@
export * from './icons';
export * as icons from './icons';
export * from './aliases';
-export {
- default as createLucideIcon,
- type IconNode,
- type LucideProps,
- type LucideIcon,
-} from './createLucideIcon';
+export * from './types';
+
+export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-react/src/types.ts b/packages/lucide-react/src/types.ts
new file mode 100644
index 0000000000..ed686b315b
--- /dev/null
+++ b/packages/lucide-react/src/types.ts
@@ -0,0 +1,15 @@
+import { ReactSVG, SVGProps, ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export type IconNode = [elementName: keyof ReactSVG, attrs: Record][];
+
+export type SVGAttributes = Partial>;
+type ElementAttributes = RefAttributes & SVGAttributes;
+
+export interface LucideProps extends ElementAttributes {
+ size?: string | number;
+ absoluteStrokeWidth?: boolean;
+}
+
+export type LucideIcon = ForwardRefExoticComponent<
+ Omit & RefAttributes
+>;
diff --git a/packages/lucide-react/tests/Icon.spec.tsx b/packages/lucide-react/tests/Icon.spec.tsx
new file mode 100644
index 0000000000..906f0c3117
--- /dev/null
+++ b/packages/lucide-react/tests/Icon.spec.tsx
@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+
+import { airVent } from './testIconNodes';
+import { Icon } from '../src/lucide-react';
+
+describe('Using Icon Component', () => {
+ it('should render icon based on a iconNode', async () => {
+ const { container } = render(
+ should not scale the strokeWidth when ab
stroke-width="1"
stroke-linecap="round"
stroke-linejoin="round"
- class="lucide lucide-grid3x3 "
- data-testid="grid-icon"
+ class="lucide lucide-grid3x3"
>
should render an component 1`] = `
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
- class="lucide lucide-grid3x3 "
+ class="lucide lucide-grid3x3"
>
should render an component 1`] = `
`;
-
-exports[`Using lucide icon components > should render icons dynamically by using the dynamicIconImports module 1`] = `
-
-`;
diff --git a/packages/lucide-react/tests/createLucideIcon.spec.tsx b/packages/lucide-react/tests/createLucideIcon.spec.tsx
new file mode 100644
index 0000000000..7c1b5e475b
--- /dev/null
+++ b/packages/lucide-react/tests/createLucideIcon.spec.tsx
@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { createLucideIcon } from '../src/lucide-react';
+import { airVent } from './testIconNodes';
+import { render } from '@testing-library/react';
+
+describe('Using createLucideIcon', () => {
+ it('should create a component from an iconNode', () => {
+ const AirVent = createLucideIcon('AirVent', airVent);
+
+ const { container } = render( {
+ name: keyof typeof dynamicIconImports;
+ }
+
+ const Icon = ({ name, ...props }: IconProps) => {
+ const LucideIcon = lazy(dynamicIconImports[name]);
+
+ return (
+
+
+ );
+ };
+
+ const { container, getByLabelText } = render(
+ };
- expect(attributes.stroke.value).toBe('red');
- expect(attributes.width.value).toBe('48');
- expect(attributes.height.value).toBe('48');
- expect(attributes['stroke-width'].value).toBe('4');
+ const SVGElement = container.firstElementChild;
- expect( container.innerHTML ).toMatchSnapshot();
+ expect(SVGElement).toHaveAttribute('stroke', 'red');
+ expect(SVGElement).toHaveAttribute('width', '48');
+ expect(SVGElement).toHaveAttribute('height', '48');
+ expect(SVGElement).toHaveAttribute('stroke-width', '4');
+
+ expect(container.innerHTML).toMatchSnapshot();
});
it('should render the alias icon', () => {
@@ -40,9 +54,9 @@ describe('Using lucide icon components', () => {
/>,
);
- const PenIconRenderedHTML = container.innerHTML
+ const PenIconRenderedHTML = container.innerHTML;
- cleanup()
+ cleanup();
const { container: Edit2Container } = render(
{
/>,
);
- expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML)
+ expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML);
});
-
it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => {
- const testId = 'grid-icon';
const { container, getByTestId } = render(
};
- expect(attributes.stroke.value).toBe('red');
- expect(attributes.width.value).toBe('48');
- expect(attributes.height.value).toBe('48');
- expect(attributes['stroke-width'].value).toBe('1');
+ const SVGElement = container.firstElementChild;
+
+ expect(SVGElement).toHaveAttribute('stroke', 'red');
+ expect(SVGElement).toHaveAttribute('width', '48');
+ expect(SVGElement).toHaveAttribute('height', '48');
+ expect(SVGElement).toHaveAttribute('stroke-width', '1');
- expect( container.innerHTML ).toMatchSnapshot();
+ expect(container.innerHTML).toMatchSnapshot();
});
it('should apply all classNames to the element', () => {
const testClass = 'my-class';
- const { container } = render(
- {
- name: keyof typeof dynamicIconImports;
- }
-
- const Icon = ({ name, ...props }: IconProps) => {
- const LucideIcon = lazy(dynamicIconImports[name]);
-
- return (
-
-
- );
- }
-
- const { container, getByLabelText } = render(
- > {
- key?: string | number;
- color?: string
- size?: string | number
- strokeWidth?: string | number
- absoluteStrokeWidth?: boolean
- class?: string
-}
-
-export type LucideIcon = (props: LucideProps) => JSX.Element;
-
-// Generated icons
-`;
-
-const svgFiles = readSvgDirectory(ICONS_DIR);
-
-svgFiles.forEach((svgFile) => {
- const iconName = path.basename(svgFile, '.svg');
- const componentName = toPascalCase(iconName);
-
- declarationFileContent += `export declare const ${componentName}: LucideIcon;\n`;
-});
-
-const aliases = await getAliases(ICONS_DIR);
-
-declarationFileContent += `\n
-
-// Generated icon aliases
-`;
-
-let aliasesCount = 0;
-
-svgFiles.forEach((svgFile) => {
- const iconName = path.basename(svgFile, '.svg');
- const componentName = toPascalCase(iconName);
- const iconAliases = aliases[iconName]?.aliases;
-
- declarationFileContent += `// ${componentName} aliases\n`;
- declarationFileContent += `export declare const ${componentName}Icon: LucideIcon;\n`;
- declarationFileContent += `export declare const Lucide${componentName}: LucideIcon;\n`;
- aliasesCount += 1;
- if (iconAliases != null && Array.isArray(iconAliases)) {
- iconAliases.forEach((alias) => {
- const componentNameAlias = toPascalCase(alias);
- declarationFileContent += `export declare const ${componentNameAlias}: LucideIcon;\n`;
-
- aliasesCount += 1;
- });
- }
-
- declarationFileContent += '\n';
-});
-
-writeDeclarationFile(TYPES_FILE, srcDirectory, declarationFileContent);
-console.log(
- `Generated ${TYPES_FILE} file with`,
- svgFiles.length,
- 'icons and with',
- aliasesCount,
- 'aliases',
-);
diff --git a/packages/lucide-solid/scripts/exportTemplate.mjs b/packages/lucide-solid/scripts/exportTemplate.mjs
index 72385eb338..b71d4bd1a4 100644
--- a/packages/lucide-solid/scripts/exportTemplate.mjs
+++ b/packages/lucide-solid/scripts/exportTemplate.mjs
@@ -1,7 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+export default ({ componentName, iconName, children, getSvg, deprecated, deprecationReason }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
@@ -20,7 +20,7 @@ const iconNode: IconNode = ${JSON.stringify(children)};
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {JSX.Element} JSX Element
- * ${deprecated ? '@deprecated' : ''}
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName} = (props: LucideProps) => (
][]
-export type SVGAttributes = Partial>
+export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record][];
+export type SVGAttributes = Partial>;
export interface LucideProps extends SVGAttributes {
key?: string | number;
- color?: string
- size?: string | number
- strokeWidth?: string | number
- class?: string
- absoluteStrokeWidth?: boolean
+ color?: string;
+ size?: string | number;
+ strokeWidth?: string | number;
+ class?: string;
+ absoluteStrokeWidth?: boolean;
}
+
+export type LucideIcon = (props: LucideProps) => JSX.Element;
diff --git a/packages/lucide-solid/tests/Icon.spec.tsx b/packages/lucide-solid/tests/Icon.spec.tsx
new file mode 100644
index 0000000000..74c3936abb
--- /dev/null
+++ b/packages/lucide-solid/tests/Icon.spec.tsx
@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@solidjs/testing-library';
+
+import { airVent } from './testIconNodes';
+import { Icon } from '../src/lucide-solid';
+
+describe('Using Icon Component', () => {
+ it('should render icon based on a iconNode', async () => {
+ const { container } = render(() => (
+
{{ props.packageData.name }}
+{{ props.packageData?.name }}
+
+ Phone number
+
+```
+
+### Example - Tailwind CSS
+
+```html
+
+
+
+ Phone number
+
+```
+
+If you're not sure, you may consider learning more
+about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/)
+
+## Further resources
+
+We also recommend checking out the following resources about accessibility:
+
+- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
+- [Learn accessibility on web.dev](https://web.dev/learn/accessibility)
+- [Inclusive Components](https://inclusive-components.design/)
+- [A11yTalks](https://www.a11ytalks.com/)
+- [A11y automation tracker](https://a11y-automation.dev/)
+- [The A11Y Project](https://www.a11yproject.com/)
diff --git a/docs/guide/advanced/aliased-names.md b/docs/guide/advanced/aliased-names.md
new file mode 100644
index 0000000000..148af8faf6
--- /dev/null
+++ b/docs/guide/advanced/aliased-names.md
@@ -0,0 +1,93 @@
+# Aliased Names
+
+Icons can have multiple names for the same icon. This is because we choose to rename some icons to make them more consistent with the rest of the icon set, or the name was not generic. For example, the `edit-2` icon is renamed to `pen` to make the name more generic, since it is just a pen icon.
+
+Beside aliases names lucide also includes prefixed and suffixed names to use within your project. This is to prevent import name collisions with other libraries or your own code.
+
+```tsx
+// These are all the same icon
+import {
+ Home,
+ HomeIcon,
+ LucideHome,
+} from "lucide-react";
+```
+
+## Choosing import name style
+
+To be consistent in your imports or want to change the autocompletion of Lucide icons in your IDE there an option to able the choose the import name style you want.
+
+This can be done by creating a custom module declaration file to override the lucide imports and turning off the autocomplete in your IDE.
+
+### Turn off autocomplete in your IDE
+
+```json [.vscode/settings.json]
+{
+ "typescript.preferences.autoImportFileExcludePatterns": [
+ "lucide-react", // or
+ "lucide-preact", // or
+ "lucide-react-native", // or
+ "lucide-vue-next",
+ ]
+}
+```
+
+### Create a custom module declaration file
+
+Only available for `lucide-react`, `lucide-preact`, `lucide-react-native`, `lucide-vue-next` package.
+This will enable you to choose the import name style you want to use in your project.
+
+::: code-group
+
+```ts [React]
+declare module "lucide-react" {
+ // Prefixed import names
+ export * from "lucide-react/dist/lucide-react.prefixed";
+ // or
+ // Suffixed import names
+ export * from "lucide-react/dist/lucide-react.suffixed";
+}
+```
+
+```ts [Vue]
+declare module "lucide-vue-next" {
+ // Prefixed import names
+ export * from "lucide-vue-next/dist/lucide-vue-next.prefixed";
+ // or
+ // Suffixed import names
+ export * from "lucide-vue-next/dist/lucide-vue-next.suffixed";
+}
+```
+
+```ts [Preact]
+declare module "lucide-preact" {
+ // Prefixed import names
+ export * from "lucide-preact/dist/lucide-preact.prefixed";
+ // or
+ // Suffixed import names
+ export * from "lucide-preact/dist/lucide-preact.suffixed";
+}
+```
+
+```ts [React Native]
+declare module "lucide-react-native" {
+ // Prefixed import names
+ export * from "lucide-react-native/dist/lucide-react-native.prefixed";
+ // or
+ // Suffixed import names
+ export * from "lucide-react-native/dist/lucide-react-native.suffixed";
+}
+```
+
+:::
+
+Place this in your project root or in a folder where your tsconfig.json is located, or locate it in your defined type directory.
+Easiest way is to create a `@types` folder in your project root and name the file `[package-name].d.ts`.
+
+### Import name styles
+
+| Import Style | Available imports | Declaration file import |
+| ------------- | --------------------------- | ----------------------- |
+| Default | Home, HomeIcon, LucideHome | |
+| Prefixed | LucideHome | [package].prefixed |
+| Suffixed | HomeIcon | [package].suffixed |
diff --git a/docs/guide/design/affinity-designer-guide.md b/docs/guide/design/affinity-designer-guide.md
new file mode 100644
index 0000000000..c4c1518975
--- /dev/null
+++ b/docs/guide/design/affinity-designer-guide.md
@@ -0,0 +1,18 @@
+---
+title: Affinity Designer Template Guide
+---
+
+# Affinity Designer Template Guide
+
+This guide describes how to use the Affinity Designer template for Lucide.
+
+## General Workflow
+
+>Attention: By default, Affinity Designer sets the unit for stroke to points. Make sure that it is set to pixel. To do this, open `Preferences > User Interface`. Under `Decimal Places for Unit Types`, uncheck `Show Lines in points`.
+
+1. Download and open the [Affinity Designer template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/affinity_designer.aftemplate).
+2. Follow the [Icon Design Principles](icon-design-guide.md) while you use the template (to ensure integrity with the Lucide icon pack).
+3. Export the file as SVG (`File > Export`). Make sure that _Rastering_ is set to _Nothing_, _Export text as curves_ is checked (hopefully, you won't need this), _Use hex colors_ is checked, and _Flatten transforms_ is checked.
+
+ 
+4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`).
diff --git a/docs/guide/design/icon-design-guide.md b/docs/guide/design/icon-design-guide.md
index 007863e07f..f2bcdd471c 100644
--- a/docs/guide/design/icon-design-guide.md
+++ b/docs/guide/design/icon-design-guide.md
@@ -52,7 +52,7 @@ Here are rules that should be followed to keep quality and consistency when maki
-**Tip:** place your icon next to circle or square and blur them both; your icon should not feel much darker than the base shape.
+**Tip:** place your icon next to the circle or square icon and blur them both; your icon should not feel much darker than the base shape.
### 10. Icons should be visually centered by their center of gravity.
@@ -76,7 +76,7 @@ Here are rules that should be followed to keep quality and consistency when maki
-**Tip:** make sure to use arcs or quadratic curves, when using cubic curves control points should have mirrored angles for smooth curves.
+**Tip:** make sure to use arcs or quadratic curves. When using cubic curves control points should have mirrored angles for smooth curves.
### 13. Icons should aim to be pixel perfect so that they will be sharp on low DPI displays.
@@ -106,6 +106,15 @@ Here are rules that should be followed to keep quality and consistency when maki
6. Names containing numerals are not allowed, unless the number itself is represented in the icon.\
For example: `arrow-down-0-to-1` contains both numerals.
+7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\
+ For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.
+
+8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements front to back in case one element is in front of the other, otherwise in English reading order (top to bottom, left to right).\
+ For example: if the `pencil` is either in front of, above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
+
+9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.\
+ For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.
+
## Code Conventions
Before an icon is added to the library, we like to have readable and optimized SVG code.
@@ -133,7 +142,7 @@ For each icon these attributes are applied, corresponding to the above rules.
### Minify paths
The code of paths can sometimes get quite large. To reduce file size we like to minify the code.
-We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths to 2 points of precision.
+We recommend to use [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths to 2 points of precision.
### Allowed elements
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 582ffbe430..5e19a3a2fd 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -20,9 +20,15 @@ As new applications with specific features arise, Lucide aims to provide a compl
In addition to design, code is also important. Assets like icons can significantly increase bandwidth usage in web projects. With the growing internet, Lucide has a responsibility to keep their assets as small as possible. To achieve this, Lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you only ship the icons you used, which helps to keep software distribution size to a minimum.
+## Accessibility
+
+Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.
+
+However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./advanced/accessibility.md).
+
## 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/lucide-angular), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
+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), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
## Community
If you have any questions about Lucide, feel free to reach out to the community. You can find them on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
diff --git a/docs/guide/packages/lucide-angular.md b/docs/guide/packages/lucide-angular.md
index aba4524502..403e9fd5e1 100644
--- a/docs/guide/packages/lucide-angular.md
+++ b/docs/guide/packages/lucide-angular.md
@@ -37,6 +37,23 @@ import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular
export class AppModule { }
```
+or using standalone version:
+
+```js
+import { Component } from '@angular/core';
+import { LucideAngularModule, FileIcon } from 'lucide-angular';
+
+@Component({
+ standalone: true,
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrl: './app.component.scss',
+ imports: [LucideAngularModule]
+})
+export class AppComponent {
+ readonly FileIcon = FileIcon;
+}
+```
### Step 2: Use the icons in templates
Within your templates you may now use one of the following component tags to insert an icon:
@@ -47,6 +64,13 @@ Within your templates you may now use one of the following component tags to ins
+ 
+
+
-```js
-import { icons } from 'lucide-angular';
+
-...
+### Awesome backer ๐บ
-LucideAngularModule.pick(icons)
-```
+
diff --git a/packages/lucide-angular/angular.json b/packages/lucide-angular/angular.json
index cbbf8de7ff..f518cd3e5a 100644
--- a/packages/lucide-angular/angular.json
+++ b/packages/lucide-angular/angular.json
@@ -35,10 +35,7 @@
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
- "lintFilePatterns": [
- "src/**/*.ts",
- "src/**/*.html"
- ]
+ "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
diff --git a/packages/lucide-angular/karma.conf.js b/packages/lucide-angular/karma.conf.js
index 995319346b..1bd44e6a56 100644
--- a/packages/lucide-angular/karma.conf.js
+++ b/packages/lucide-angular/karma.conf.js
@@ -1,9 +1,8 @@
/* eslint-disable global-require, func-names */
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-module.exports = function(config) {
+module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
diff --git a/packages/lucide-angular/package.json b/packages/lucide-angular/package.json
index ee47d7c500..565c5a6ebd 100644
--- a/packages/lucide-angular/package.json
+++ b/packages/lucide-angular/package.json
@@ -29,7 +29,7 @@
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && 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.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=lucide-icons.ts",
+ "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasNamesOnly --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=lucide-icons.ts",
"build:ng": "ng build --configuration production",
"test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
"test:watch": "ng test",
@@ -67,8 +67,6 @@
"karma-jasmine-html-reporter": "~1.7.0",
"ng-packagr": "^13.3.0",
"prettier": "^2.8.4",
- "protractor": "~7.0.0",
- "puppeteer": "^8.0.0",
"rxjs": "~7.5.0",
"ts-node": "~10.9.1",
"tslib": "^2.3.0",
@@ -76,7 +74,7 @@
"zone.js": "~0.11.4"
},
"peerDependencies": {
- "@angular/common": "13.x - 17.x",
- "@angular/core": "13.x - 17.x"
+ "@angular/common": "13.x - 18.x",
+ "@angular/core": "13.x - 18.x"
}
}
diff --git a/packages/lucide-angular/scripts/exportTemplate.mjs b/packages/lucide-angular/scripts/exportTemplate.mjs
index 064d70ecb1..2dee463dde 100644
--- a/packages/lucide-angular/scripts/exportTemplate.mjs
+++ b/packages/lucide-angular/scripts/exportTemplate.mjs
@@ -1,7 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+export default ({ componentName, iconName, children, getSvg, deprecated, deprecationReason }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
@@ -17,10 +17,10 @@ import { LucideIconData } from './types';
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {FunctionalComponent} Vue component
- * ${deprecated ? '@deprecated' : ''}
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName}: LucideIconData = ${JSON.stringify(children)}; //eslint-disable-line no-shadow-restricted-names
export default ${componentName};
-`
+`;
};
diff --git a/packages/lucide-angular/src/aliases/index.ts b/packages/lucide-angular/src/aliases/index.ts
new file mode 100644
index 0000000000..26527c62ed
--- /dev/null
+++ b/packages/lucide-angular/src/aliases/index.ts
@@ -0,0 +1 @@
+export * from './aliases';
diff --git a/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts b/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
index d6ffedfdd3..33578a41da 100644
--- a/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
+++ b/packages/lucide-angular/src/lib/lucide-angular.component.spec.ts
@@ -63,7 +63,7 @@ describe('LucideAngularComponent', () => {
testHostComponent.setAbsoluteStrokeWidth(true);
testHostFixture.detectChanges();
expect(getSvgAttribute('stroke-width')).toBe(
- formatFixed(strokeWidth / (size / defaultAttributes.height))
+ formatFixed(strokeWidth / (size / defaultAttributes.height)),
);
});
diff --git a/packages/lucide-angular/src/lib/lucide-angular.component.ts b/packages/lucide-angular/src/lib/lucide-angular.component.ts
index 194bbeaebd..931239cbad 100644
--- a/packages/lucide-angular/src/lib/lucide-angular.component.ts
+++ b/packages/lucide-angular/src/lib/lucide-angular.component.ts
@@ -27,6 +27,7 @@ type LucideAngularComponentChanges = {
size?: TypedChange
-
- )
-}
-
-export default SearchInput
diff --git a/packages/lucide-figma/src/components/SearchInput/index.ts b/packages/lucide-figma/src/components/SearchInput/index.ts
deleted file mode 100644
index 5c19d6ebe6..0000000000
--- a/packages/lucide-figma/src/components/SearchInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './SearchInput'
diff --git a/packages/lucide-figma/src/components/Skeleton/Skeleton.scss b/packages/lucide-figma/src/components/Skeleton/Skeleton.scss
deleted file mode 100644
index f4fd7a9b71..0000000000
--- a/packages/lucide-figma/src/components/Skeleton/Skeleton.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@keyframes load {
- to {
- background-position: 200% 0;
- }
-}
-
-.skeleton {
- --block: rgba(0, 0, 0, 0.06);
- --loader: hsl(0 0% 89%);
-
- background: linear-gradient(
- -75deg,
- transparent 40%,
- var(--loader),
- transparent 60%
- ) 0 0 / 200% 100%,
- var(--block);
-
- border-radius: calc(var(--padding) * 0.5);
- animation: load 2s infinite linear;
- background-attachment: fixed;
- width: 40px;
- height: 40px;
- border-radius: 2px;
-}
diff --git a/packages/lucide-figma/src/components/Skeleton/Skeleton.tsx b/packages/lucide-figma/src/components/Skeleton/Skeleton.tsx
deleted file mode 100644
index c12930022f..0000000000
--- a/packages/lucide-figma/src/components/Skeleton/Skeleton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import './Skeleton.scss'
-
-const Skeleton = () => {
- return (
- <>
- {Array.from({length: 48 }, () => (
-
- ))}
-
- )
-}
-
-export default Skeleton
diff --git a/packages/lucide-figma/src/components/icons/SearchIcon.tsx b/packages/lucide-figma/src/components/icons/SearchIcon.tsx
deleted file mode 100644
index b33ce94b26..0000000000
--- a/packages/lucide-figma/src/components/icons/SearchIcon.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { createElement, forwardRef } from 'react'
-
-
-const SearchIcon = (props: any) => (
-
-)
-
-export default SearchIcon
diff --git a/packages/lucide-figma/src/helpers/createIconComponent.ts b/packages/lucide-figma/src/helpers/createIconComponent.ts
deleted file mode 100644
index 51c8b351e4..0000000000
--- a/packages/lucide-figma/src/helpers/createIconComponent.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { forwardRef, createElement, SVGProps } from 'react';
-import { IconNode } from '../api/fetchIcons';
-
-const defaultAttributes = {
- xmlns: 'http://www.w3.org/2000/svg',
- width: 24,
- height: 24,
- viewBox: '0 0 24 24',
- fill: 'none',
- stroke: 'currentColor',
- strokeWidth: 2,
- strokeLinecap: 'round',
- strokeLinejoin: 'round',
-};
-
-
-export interface LucideProps extends Partial
-
- )
-}
-
-ReactDOM.render(
- {icons.length ? (
- searchResults.map(([name, iconNode]: any) => (
-
-
- 
- 
+ 
+
+
-#### Icon Component Example
+
-```js
-import * as icons from 'lucide-preact';
+### Awesome backer ๐บ
-const Icon = ({ name, color, size }) => {
- const LucideIcon = icons[name];
-
- return
diff --git a/packages/lucide-preact/package.json b/packages/lucide-preact/package.json
index 10ce43d809..0928f85705 100644
--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -38,21 +38,22 @@
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
"build:bundles": "rollup -c ./rollup.config.mjs",
- "test": "vitest run",
+ "test": "pnpm build:icons && vitest run",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
+ "@lucide/shared": "workspace:*",
"@preact/preset-vite": "^2.7.0",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/preact": "^3.2.3",
"jest-serializer-html": "^7.1.0",
"preact": "^10.19.2",
- "rollup": "^4.9.2",
+ "rollup": "^4.22.4",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^5.3.3",
- "vite": "5.0.10",
+ "vite": "5.1.8",
"vitest": "^1.1.1"
},
"peerDependencies": {
diff --git a/packages/lucide-preact/rollup.config.mjs b/packages/lucide-preact/rollup.config.mjs
index 64c9876b60..5675607053 100644
--- a/packages/lucide-preact/rollup.config.mjs
+++ b/packages/lucide-preact/rollup.config.mjs
@@ -1,6 +1,6 @@
-import plugins, { replace } from '@lucide/rollup-plugins';
-import dts from "rollup-plugin-dts";
-import pkg from './package.json' assert { type: "json" };
+import plugins from '@lucide/rollup-plugins';
+import dts from 'rollup-plugin-dts';
+import pkg from './package.json' assert { type: 'json' };
const packageName = 'LucidePreact';
const outputFileName = 'lucide-preact';
@@ -33,9 +33,9 @@ const bundles = [
const configs = bundles
.map(({ inputs, outputDir, format, minify, preserveModules }) =>
- inputs.map(input => ({
+ inputs.map((input) => ({
input,
- plugins: plugins(pkg, minify),
+ plugins: plugins({ pkg, minify }),
external: ['preact'],
output: {
name: packageName,
@@ -49,6 +49,7 @@ const configs = bundles
preserveModules,
format,
sourcemap: true,
+ preserveModulesRoot: 'src',
globals: {
preact: 'preact',
},
@@ -57,13 +58,36 @@ const configs = bundles
)
.flat();
- export default [
- {
- input: inputs[0],
- output: [{
- file: `dist/${outputFileName}.d.ts`, format: "es"
- }],
- plugins: [dts()],
- },
- ...configs
- ];
+export default [
+ {
+ input: inputs[0],
+ output: [
+ {
+ file: `dist/${outputFileName}.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ {
+ input: `src/${outputFileName}.suffixed.ts`,
+ output: [
+ {
+ file: `dist/${outputFileName}.suffixed.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ {
+ input: `src/${outputFileName}.prefixed.ts`,
+ output: [
+ {
+ file: `dist/${outputFileName}.prefixed.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ ...configs,
+];
diff --git a/packages/lucide-preact/scripts/exportTemplate.mjs b/packages/lucide-preact/scripts/exportTemplate.mjs
index 857ce67cca..06b9c7f128 100644
--- a/packages/lucide-preact/scripts/exportTemplate.mjs
+++ b/packages/lucide-preact/scripts/exportTemplate.mjs
@@ -1,7 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+export default ({ componentName, iconName, children, getSvg, deprecated, deprecationReason }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
@@ -17,7 +17,7 @@ import createLucideIcon from '../createLucideIcon';
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {JSX.Element} JSX Element
- * ${deprecated ? '@deprecated' : ''}
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
diff --git a/packages/lucide-preact/src/Icon.ts b/packages/lucide-preact/src/Icon.ts
new file mode 100644
index 0000000000..bfbda22977
--- /dev/null
+++ b/packages/lucide-preact/src/Icon.ts
@@ -0,0 +1,50 @@
+import { h, toChildArray } from 'preact';
+import defaultAttributes from './defaultAttributes';
+import type { IconNode, LucideProps } from './types';
+
+interface IconComponentProps extends LucideProps {
+ iconNode: IconNode;
+}
+
+/**
+ * Lucide icon component
+ *
+ * @component Icon
+ * @param {object} props
+ * @param {string} props.color - The color of the icon
+ * @param {number} props.size - The size of the icon
+ * @param {number} props.strokeWidth - The stroke width of the icon
+ * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
+ * @param {string} props.class - The class name of the icon
+ * @param {IconNode} props.children - The children of the icon
+ * @param {IconNode} props.iconNode - The icon node of the icon
+ *
+ * @returns {ForwardRefExoticComponent} LucideIcon
+ */
+const Icon = ({
+ color = 'currentColor',
+ size = 24,
+ strokeWidth = 2,
+ absoluteStrokeWidth,
+ children,
+ iconNode,
+ class: classes = '',
+ ...rest
+}: IconComponentProps) =>
+ h(
+ 'svg',
+ {
+ ...defaultAttributes,
+ width: String(size),
+ height: size,
+ stroke: color,
+ ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth
+ ? (Number(strokeWidth) * 24) / Number(size)
+ : strokeWidth,
+ class: ['lucide', classes].join(' '),
+ ...rest,
+ },
+ [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
+ );
+
+export default Icon;
diff --git a/packages/lucide-preact/src/aliases/index.ts b/packages/lucide-preact/src/aliases/index.ts
new file mode 100644
index 0000000000..bbe66d0a23
--- /dev/null
+++ b/packages/lucide-preact/src/aliases/index.ts
@@ -0,0 +1,3 @@
+export * from './aliases';
+export * from './prefixed';
+export * from './suffixed';
diff --git a/packages/lucide-preact/src/createLucideIcon.ts b/packages/lucide-preact/src/createLucideIcon.ts
index b4238c95d8..2ba13086f3 100644
--- a/packages/lucide-preact/src/createLucideIcon.ts
+++ b/packages/lucide-preact/src/createLucideIcon.ts
@@ -1,43 +1,27 @@
-import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
-import defaultAttributes from './defaultAttributes';
-
-export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record
+ 
+
+
-### Custom props
-
-You can also pass custom props that will be added in the svg as attributes.
-
-```js
-const App = () => {
- return
-### Generic icon component
+### Awesome backer ๐บ
-It is possible to create a generic icon component to load icons.
-
-> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
-
-```js
-import * as icons from 'lucide-react-native';
-
-const Icon = ({ name, color, size }) => {
- const LucideIcon = icons[name];
-
- return
diff --git a/packages/lucide-react-native/__mocks__/react-native-svg/index.ts b/packages/lucide-react-native/__mocks__/react-native-svg/index.ts
index 942db0e571..8ebb9b6dc4 100644
--- a/packages/lucide-react-native/__mocks__/react-native-svg/index.ts
+++ b/packages/lucide-react-native/__mocks__/react-native-svg/index.ts
@@ -3,14 +3,14 @@ import React from 'react';
import type { LucideProps } from '../../src/createReactComponent';
export type { SvgProps } from 'react-native-svg';
-const createComponent = function(name: string) {
+const createComponent = function (name: string) {
const component = (props: LucideProps) => {
return React.createElement(name, props, props.children);
- }
+ };
component.displayName = name;
- return component
+ return component;
};
// Mock all react-native-svg exports
diff --git a/packages/lucide-react-native/lucide-react-native.d.ts b/packages/lucide-react-native/lucide-react-native.d.ts
index ec234923b3..6d98426758 100644
--- a/packages/lucide-react-native/lucide-react-native.d.ts
+++ b/packages/lucide-react-native/lucide-react-native.d.ts
@@ -1,13 +1,16 @@
/// 
+ 
+
+
-Example with React suspense:
+
-```tsx
-import React, { lazy, Suspense } from 'react';
-import { dynamicIconImports, LucideProps } from 'lucide-react';
+### Awesome backer ๐บ
-const fallback =
-
-interface IconProps extends Omit
diff --git a/packages/lucide-react/package.json b/packages/lucide-react/package.json
index aa5649a4ba..6a402f1ceb 100644
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -40,17 +40,17 @@
"copy:license": "cp ../../LICENSE ./LICENSE",
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts && rm -f dynamicIconImports.*",
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --withDynamicImports --separateAliasesFile --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
- "build:types": "node ./scripts/buildTypes.mjs",
"build:bundles": "rollup -c ./rollup.config.mjs",
"typecheck": "tsc",
"typecheck:watch": "tsc -w",
- "test": "vitest run",
+ "test": "pnpm build:icons && vitest run",
"test:watch": "vitest watch",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
"@lucide/build-icons": "workspace:*",
"@lucide/rollup-plugins": "workspace:*",
+ "@lucide/shared": "workspace:*",
"@testing-library/jest-dom": "^6.1.6",
"@testing-library/react": "^14.1.2",
"@types/react": "^18.2.37",
@@ -58,13 +58,13 @@
"jest-serializer-html": "^7.1.0",
"react": "18.2.0",
"react-dom": "18.2.0",
- "rollup": "^4.9.2",
+ "rollup": "^4.22.4",
"rollup-plugin-dts": "^6.1.0",
"typescript": "^4.9.5",
- "vite": "5.0.10",
+ "vite": "5.1.8",
"vitest": "^1.1.1"
},
"peerDependencies": {
- "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
}
}
diff --git a/packages/lucide-react/rollup.config.mjs b/packages/lucide-react/rollup.config.mjs
index e4a153f131..5f76f7e113 100644
--- a/packages/lucide-react/rollup.config.mjs
+++ b/packages/lucide-react/rollup.config.mjs
@@ -1,9 +1,9 @@
-import plugins, { replace } from '@lucide/rollup-plugins';
+import plugins from '@lucide/rollup-plugins';
import pkg from './package.json' assert { type: 'json' };
-import dts from "rollup-plugin-dts";
+import dts from 'rollup-plugin-dts';
import getAliasesEntryNames from './scripts/getAliasesEntryNames.mjs';
-const aliasesEntries = await getAliasesEntryNames()
+const aliasesEntries = await getAliasesEntryNames();
const packageName = 'LucideReact';
const outputFileName = 'lucide-react';
@@ -28,10 +28,7 @@ const bundles = [
},
{
format: 'esm',
- inputs: [
- ...inputs,
- ...aliasesEntries
- ],
+ inputs: [...inputs, ...aliasesEntries],
outputDir,
preserveModules: true,
},
@@ -42,61 +39,97 @@ const bundles = [
external: [/src/],
paths: (id) => {
if (id.match(/src/)) {
- const [, modulePath] = id.match(/src\/(.*)\.ts/)
+ const [, modulePath] = id.match(/src\/(.*)\.ts/);
- return `dist/esm/${modulePath}.js`
+ return `dist/esm/${modulePath}.js`;
}
- }
+ },
},
];
const configs = bundles
- .map(({ inputs, outputDir, outputFile, format, minify, preserveModules, entryFileNames, external = [], paths }) =>
- inputs.map(input => ({
- input,
- plugins: plugins(pkg, minify),
- external: [
- 'react',
- 'prop-types',
- ...external
- ],
- output: {
- name: packageName,
- ...(preserveModules
- ? {
- dir:`${outputDir}/${format}`,
- }
- : {
- file: outputFile ?? `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
- }),
- paths,
- entryFileNames,
- format,
- sourcemap: true,
- preserveModules,
- globals: {
- react: 'react',
- 'prop-types': 'PropTypes'
+ .map(
+ ({
+ inputs,
+ outputDir,
+ outputFile,
+ format,
+ minify,
+ preserveModules,
+ entryFileNames,
+ external = [],
+ paths,
+ }) =>
+ inputs.map((input) => ({
+ input,
+ plugins: plugins({ pkg, minify }),
+ external: ['react', 'prop-types', ...external],
+ output: {
+ name: packageName,
+ ...(preserveModules
+ ? {
+ dir: `${outputDir}/${format}`,
+ }
+ : {
+ file:
+ outputFile ??
+ `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+ }),
+ paths,
+ entryFileNames,
+ format,
+ sourcemap: true,
+ preserveModules,
+ preserveModulesRoot: 'src',
+ globals: {
+ react: 'react',
+ 'prop-types': 'PropTypes',
+ },
},
- },
- })),
+ })),
)
.flat();
export default [
{
input: 'src/dynamicIconImports.ts',
- output: [{
- file: `dynamicIconImports.d.ts`, format: "es"
- }],
+ output: [
+ {
+ file: `dynamicIconImports.d.ts`,
+ format: 'es',
+ },
+ ],
plugins: [dts()],
},
{
input: inputs[0],
- output: [{
- file: `dist/${outputFileName}.d.ts`, format: "es"
- }],
+ output: [
+ {
+ file: `dist/${outputFileName}.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ {
+ input: `src/${outputFileName}.suffixed.ts`,
+ output: [
+ {
+ file: `dist/${outputFileName}.suffixed.d.ts`,
+ format: 'es',
+ },
+ ],
+ plugins: [dts()],
+ },
+ {
+ input: `src/${outputFileName}.prefixed.ts`,
+ output: [
+ {
+ file: `dist/${outputFileName}.prefixed.d.ts`,
+ format: 'es',
+ },
+ ],
plugins: [dts()],
},
- ...configs
+ ...configs,
];
diff --git a/packages/lucide-react/scripts/exportTemplate.mjs b/packages/lucide-react/scripts/exportTemplate.mjs
index 7ccb638e74..e6fd638fa8 100644
--- a/packages/lucide-react/scripts/exportTemplate.mjs
+++ b/packages/lucide-react/scripts/exportTemplate.mjs
@@ -1,7 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
-export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+export default ({ componentName, iconName, children, getSvg, deprecated, deprecationReason }) => {
const svgContents = getSvg();
const svgBase64 = base64SVG(svgContents);
@@ -17,7 +17,7 @@ import createLucideIcon from '../createLucideIcon';
*
* @param {Object} props - Lucide icons props and any valid SVG attribute
* @returns {JSX.Element} JSX Element
- * ${deprecated ? '@deprecated' : ''}
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
*/
const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
diff --git a/packages/lucide-react/scripts/getAliasesEntryNames.mjs b/packages/lucide-react/scripts/getAliasesEntryNames.mjs
index e67c535abd..3f634c2eeb 100644
--- a/packages/lucide-react/scripts/getAliasesEntryNames.mjs
+++ b/packages/lucide-react/scripts/getAliasesEntryNames.mjs
@@ -11,5 +11,7 @@ export default async function getAliasesEntryNames() {
const aliases = iconWithAliases.flatMap(({ aliases }) => aliases);
- return aliases.map((alias) => path.join('src/icons', `${alias}.ts`));
+ return aliases
+ .map((alias) => (typeof alias === 'string' ? alias : alias.name))
+ .map((alias) => path.join('src/icons', `${alias}.ts`));
}
diff --git a/packages/lucide-react/src/Icon.ts b/packages/lucide-react/src/Icon.ts
new file mode 100644
index 0000000000..c623c0e3e5
--- /dev/null
+++ b/packages/lucide-react/src/Icon.ts
@@ -0,0 +1,59 @@
+import { createElement, forwardRef } from 'react';
+import defaultAttributes from './defaultAttributes';
+import { IconNode, LucideProps } from './types';
+import { mergeClasses } from '@lucide/shared';
+
+interface IconComponentProps extends LucideProps {
+ iconNode: IconNode;
+}
+
+/**
+ * Lucide icon component
+ *
+ * @component Icon
+ * @param {object} props
+ * @param {string} props.color - The color of the icon
+ * @param {number} props.size - The size of the icon
+ * @param {number} props.strokeWidth - The stroke width of the icon
+ * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
+ * @param {string} props.className - The class name of the icon
+ * @param {IconNode} props.children - The children of the icon
+ * @param {IconNode} props.iconNode - The icon node of the icon
+ *
+ * @returns {ForwardRefExoticComponent} LucideIcon
+ */
+const Icon = forwardRef
+ 
+
+
-#### Icon Component Example
+
-```tsx
-import * as icons from 'lucide-solid';
-import type { LucideProps } from 'lucide-solid';
-import { splitProps } from 'solid-js';
-import { Dynamic } from 'solid-js/web';
+### Awesome backer ๐บ
-const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
- const [local, others] = splitProps(props, ["name"]);
-
- return
diff --git a/packages/lucide-solid/package.json b/packages/lucide-solid/package.json
index 46de9cea95..2e3e06e2f2 100644
--- a/packages/lucide-solid/package.json
+++ b/packages/lucide-solid/package.json
@@ -33,40 +33,60 @@
"exports": {
".": {
"types": "./dist/types/lucide-solid.d.ts",
- "solid": "./dist/source/lucide-solid.js",
+ "solid": "./dist/source/lucide-solid.jsx",
"import": "./dist/esm/lucide-solid.js",
"browser": "./dist/esm/lucide-solid.js",
"require": "./dist/cjs/lucide-solid.js",
"node": "./dist/cjs/lucide-solid.js"
+ },
+ "./icons": {
+ "types": "./dist/types/lucide-solid.d.ts",
+ "solid": "./dist/source/lucide-solid.jsx",
+ "import": "./dist/esm/lucide-solid.js",
+ "browser": "./dist/esm/lucide-solid.js",
+ "require": "./dist/cjs/lucide-solid.js",
+ "node": "./dist/cjs/lucide-solid.js"
+ },
+ "./icons/*": {
+ "types": "./dist/types/icons/*.d.ts",
+ "solid": "./dist/source/icons/*.jsx",
+ "import": "./dist/esm/icons/*.js",
+ "browser": "./dist/esm/icons/*.js",
+ "require": "./dist/cjs/icons/*.js",
+ "node": "./dist/cjs/icons/*.js"
}
},
"sideEffects": false,
"scripts": {
- "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle && pnpm build:version",
+ "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundle",
"copy:license": "cp ../../LICENSE ./LICENSE",
- "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+ "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts",
"build:transpile": "tsc --jsx preserve -t es2020 --rootDir src --outDir dist --noEmit false",
"build:version": "node ./scripts/replaceVersion.mjs",
"build:bundle": "rollup -c rollup.config.mjs",
- "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts",
- "test": "vitest run",
+ "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --separateAliasesFile --aliasesFileExtension=.ts --iconFileExtension=.tsx --exportFileName=index.ts",
+ "test": "pnpm build:icons && vitest run",
"version": "pnpm version --git-tag-version=false"
},
"devDependencies": {
- "@atomico/rollup-plugin-sizes": "^1.1.4",
+ "@babel/core": "^7.23.9",
+ "@babel/preset-env": "^7.23.9",
+ "@babel/preset-typescript": "^7.23.3",
"@lucide/build-icons": "workspace:*",
- "@solidjs/testing-library": "^0.8.5",
- "@testing-library/jest-dom": "^6.1.4",
+ "@lucide/rollup-plugins": "workspace:*",
+ "@lucide/shared": "workspace:*",
+ "@rollup/plugin-babel": "^6.0.4",
+ "@solidjs/testing-library": "^0.8.6",
+ "@testing-library/jest-dom": "^6.4.2",
+ "babel-preset-solid": "^1.8.12",
"jest-serializer-html": "^7.1.0",
- "jsdom": "^23.0.1",
- "rollup": "^4.9.2",
- "rollup-plugin-license": "^3.0.1",
- "rollup-preset-solid": "^2.0.1",
+ "rollup": "^4.22.4",
"solid-js": "^1.8.7",
"typescript": "^4.9.4",
- "vite": "5.0.10",
- "vite-plugin-solid": "^2.8.0",
- "vitest": "0.34.2"
+ "vite": "5.1.8",
+ "vite-plugin-solid": "^2.10.1",
+ "vitest": "^1.1.1",
+ "esbuild": "^0.19.11"
},
"peerDependencies": {
"solid-js": "^1.4.7"
diff --git a/packages/lucide-solid/rollup.config.mjs b/packages/lucide-solid/rollup.config.mjs
index 4bcd8edfeb..a989b59b48 100644
--- a/packages/lucide-solid/rollup.config.mjs
+++ b/packages/lucide-solid/rollup.config.mjs
@@ -1,20 +1,133 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import withSolid from 'rollup-preset-solid';
-import bundleSize from '@atomico/rollup-plugin-sizes';
-import license from 'rollup-plugin-license';
+import path from 'path';
+import { babel } from '@rollup/plugin-babel';
+import esbuild from 'esbuild';
+import plugins from '@lucide/rollup-plugins';
+import ts from 'typescript';
import pkg from './package.json' assert { type: 'json' };
-const config = withSolid({
- targets: ['esm', 'cjs'],
-});
+const packageName = 'LucideSolid';
+const outputFileName = 'lucide-solid';
+const outputDir = 'dist';
+const inputs = ['src/lucide-solid.ts'];
-config.plugins = [
- ...config.plugins,
- license({
- banner: `${pkg.name} v${pkg.version} - ${pkg.license}`,
- }),
- bundleSize(),
+const bundles = [
+ {
+ format: 'cjs',
+ inputs,
+ outputDir,
+ preserveModules: true,
+ },
+ {
+ format: 'esm',
+ inputs,
+ outputDir,
+ preserveModules: true,
+ },
];
-export default config;
+const configs = bundles
+ .map(({ inputs, outputDir, format, preserveModules }) =>
+ inputs.map((input) => ({
+ input,
+ plugins: [
+ babel({
+ extensions: ['.ts', '.tsx', '.js', '.jsx'],
+ babelHelpers: 'bundled',
+ presets: [
+ 'babel-preset-solid',
+ '@babel/preset-typescript',
+ ['@babel/preset-env', { bugfixes: true, targets: 'last 2 years' }],
+ ],
+ }),
+ ...plugins({
+ pkg,
+ withEsbuild: false,
+ }),
+ format === 'esm'
+ ? {
+ name: 'ts',
+ buildEnd() {
+ // Transpile typescript to './dist/source'
+ esbuild.build({
+ entryPoints: ['./src/**/*.tsx', './src/**/*.ts'],
+ outdir: './dist/source',
+ outExtension: {
+ '.js': '.jsx',
+ },
+ loader: {
+ '.js': 'jsx',
+ },
+ jsx: 'preserve',
+ jsxImportSource: 'solid-js',
+ bundle: true,
+ format: 'esm',
+ sourcemap: true,
+ target: ['esnext'],
+ banner: {
+ js: `/**
+* @license ${pkg.name} v${pkg.version} - ${pkg.license}
+*
+* This source code is licensed under the ${pkg.license} license.
+* See the LICENSE file in the root directory of this source tree.
+*/`,
+ },
+ plugins: [
+ {
+ name: 'externalize-everything-except-own-dependencies',
+ setup(build) {
+ build.onResolve({ filter: /(.*)/ }, (args) => {
+ const modulePath = path.join(args.resolveDir, args.path);
+ if (
+ args.kind === 'import-statement' &&
+ args.path !== '@lucide/shared' &&
+ !modulePath.includes('packages/shared')
+ ) {
+ return { path: args.path, external: true };
+ }
+ });
+ },
+ },
+ ],
+ external: ['solid-js'],
+ });
+
+ // Generate types
+ const program = ts.createProgram([pkg.source], {
+ target: ts.ScriptTarget.ESNext,
+ module: ts.ModuleKind.ESNext,
+ moduleResolution: ts.ModuleResolutionKind.NodeJs,
+ jsx: ts.JsxEmit.Preserve,
+ jsxImportSource: 'solid-js',
+ allowSyntheticDefaultImports: true,
+ esModuleInterop: true,
+ declarationDir: `dist/types`,
+ declaration: true,
+ emitDeclarationOnly: true,
+ });
+ program.emit();
+ },
+ }
+ : null,
+ ],
+ external: ['solid-js', 'solid-js/web', 'solid-js/store'],
+ output: {
+ name: packageName,
+ ...(preserveModules
+ ? {
+ dir: `${outputDir}/${format}`,
+ exports: 'auto',
+ }
+ : {
+ file: `${outputDir}/${format}/${outputFileName}.js`,
+ }),
+ format: format === 'source' ? 'esm' : format,
+ preserveModules,
+ preserveModulesRoot: 'src',
+ sourcemap: true,
+ },
+ })),
+ )
+ .flat();
+
+export default configs;
diff --git a/packages/lucide-solid/scripts/buildTypes.mjs b/packages/lucide-solid/scripts/buildTypes.mjs
deleted file mode 100644
index 4bc32bc163..0000000000
--- a/packages/lucide-solid/scripts/buildTypes.mjs
+++ /dev/null
@@ -1,88 +0,0 @@
-import path from 'path';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { getAliases } from '@lucide/build-icons';
-import {
- writeFile,
- readSvgDirectory,
- resetFile,
- toPascalCase,
- getCurrentDirPath,
-} from '../../../scripts/helpers.mjs';
-
-const currentDir = getCurrentDirPath(import.meta.url);
-const srcDirectory = path.join(currentDir, '../dist');
-
-const writeDeclarationFile = (typesFile, directory, content) => {
- resetFile(typesFile, directory);
- writeFile(content, typesFile, directory);
-};
-
-const ICONS_DIR = path.resolve(currentDir, '../../../icons');
-const TYPES_FILE = 'lucide-solid.d.ts';
-
-// Declare type definitions
-let declarationFileContent = `\
-///