Improve scroll icons metadata (#1380)

* Optimise `table` icon

* Add `table-properties` (property list) icon

* Improve `table` icons metadata

.vscode/svg.code-snippets

@@ -0,0 +1,95 @@
+{
+  "Lucide SVG": {
+    "scope": "xml",
+    "description": "Base SVG with Lucide attributes.",
+    "prefix": [
+      "svg",
+      "lucide"
+    ],
+    "body": [
+      "<svg",
+      "  xmlns=\"http://www.w3.org/2000/svg\"",
+      "  width=\"24\"",
+      "  height=\"24\"",
+      "  viewBox=\"0 0 24 24\"",
+      "  fill=\"none\"",
+      "  stroke=\"currentColor\"",
+      "  stroke-width=\"2\"",
+      "  stroke-linecap=\"round\"",
+      "  stroke-linejoin=\"round\"",
+      ">",
+      "  $0",
+      "</svg>"
+    ]
+  },
+  "Rectangle": {
+    "scope": "xml",
+    "description": "SVG `rect`angle, with Lucide defaults.",
+    "prefix": [
+      "rect",
+      "<rect"
+    ],
+    "body": "<rect width=\"${1:20}\" height=\"${2:12}\" x=\"${3:2}\" y=\"${4:6}\" rx=\"${5|2,1|}\"/>"
+  },
+  "Square": {
+    "scope": "xml",
+    "description": "SVG square `rect`angle, with Lucide defaults.",
+    "prefix": [
+      "square",
+      "rect",
+      "<rect",
+      "tile"
+    ],
+    "body": "<rect width=\"${1:18}\" height=\"$1\" x=\"${2:3}\" y=\"${3:$2}\" rx=\"${4|2,1|}\" />"
+  },
+  "Circle": {
+    "scope": "xml",
+    "description": "SVG `circle`, with Lucide defaults.",
+    "prefix": [
+      "circle",
+      "<circle"
+    ],
+    "body": "<circle cx=\"${2:12}\" cy=\"${3:$2}\" r=\"${1|10,2,.5|}\" />"
+  },
+  "Ellipse": {
+    "scope": "xml",
+    "description": "SVG `ellipse`.",
+    "prefix": [
+      "ellipse",
+      "<ellipse"
+    ],
+    "body": "<ellipse cx=\"${3:12}\" cy=\"${4:$3}\" rx=\"${1:10}\" ry=\"${2:$1}\" />"
+  },
+  "Path": {
+    "scope": "xml",
+    "description": "SVG custom `path`.",
+    "prefix": [
+      "path",
+      "<path",
+      "polyline",
+      "<polyline",
+      "polygon",
+      "<polygon"
+    ],
+    "body": "<path d=\"${1|M,m|}$0\" />"
+  },
+  "Line": {
+    "scope": "xml",
+    "description": "SVG `path`, preffered to `line` in Lucide.",
+    "prefix": [
+      "line",
+      "<line",
+      "minus"
+    ],
+    "body": "<path d=\"M${3:5} ${4:12}${1|h,v|}${2:14}\" />"
+  },
+  "Dot": {
+    "scope": "xml",
+    "description": "SVG small dot, within the Lucide guidelines.",
+    "prefix": [
+      "dot",
+      "."
+    ],
+    "body": "<path d=\"M ${1:12} ${2:$1}h.01\" />"
+  }
+}

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {onMounted, ref} from 'vue';
+import {useFloating, offset, shift} from '@floating-ui/vue';
+
+const reference = ref(null);
+const tooltip = ref(null);
+const middleware = ref([shift(), offset(8)]);
+const { floatingStyles, update } = useFloating(reference, tooltip, {
+  middleware,
+  transform: false
+});
+
+defineProps<{
+  title: string
+}>()
+
+onMounted(() => {
+  update()
+});
+</script>
+
+<template>
+  <span ref="reference" class="reference">
+    <slot/>
+  </span>
+  <div ref="tooltip" class="tooltip" :style="floatingStyles">
+    {{title}}
+  </div>
+</template>
+
+<style scoped>
+.reference:hover + .tooltip{
+  opacity: 1;
+  transform: scale(1);
+}
+
+.tooltip {
+  display: block;
+  font-size: 12px;
+  line-height: 20px;
+  transform: scale(0.9);
+  font-weight: 400;
+  background: var(--vp-c-brand-dark);
+  color: white;
+  z-index: 10;
+  white-space: nowrap;
+  padding: 2px 8px;
+  border-radius: 4px;
+  box-shadow: var(--vp-shadow-1);
+  opacity: 0;
+  pointer-events: none;
+  transition: cubic-bezier(0.19, 1, 0.22, 1) .2s;
+  transition-property: opacity, transform;
+}
+</style>

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

@@ -3,19 +3,9 @@ import { ref } from 'vue';
 import ButtonMenu from '../base/ButtonMenu.vue'
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
+import getSVGIcon from '../../utils/getSVGIcon';
+import downloadData from '../../utils/downloadData';
 
-const allowedAttrs = [
-  'xmlns',
-  'width',
-  'height',
-  'viewBox',
-  'fill',
-  'stroke',
-  'stroke-width',
-  'stroke-linecap',
-  'stroke-linejoin',
-  'class',
-]
 const downloadText = 'Download!'
 const copiedText = 'Copied!'
 const confettiText = ref(copiedText)
@@ -28,24 +18,6 @@ const { size } = useIconStyleContext()
 
 const { animate, confetti } = useConfetti()
 
-function getSVGIcon() {
-  const svg = document.querySelector('#previewer svg')
-  if (!svg) return
-
-  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)
-    }
-  }
-
-  const svgString = new XMLSerializer().serializeToString(clonedSvg)
-
-  return svgString
-}
-
 function copySVG() {
   confettiText.value = copiedText
   const svgString = getSVGIcon()
@@ -70,11 +42,7 @@ function downloadSVG() {
   confettiText.value = downloadText
   const svgString = getSVGIcon()
 
-  const link = document.createElement('a');
-  link.download = `${props.name}.svg`;
-  link.href = `data:image/svg+xml;base64,${btoa(svgString)}`
-  link.click();
-
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
   confetti()
 }
 
@@ -91,12 +59,7 @@ function downloadPNG() {
   image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
   image.onload = function() {
     ctx.drawImage(image, 0, 0);
-
-    const link = document.createElement('a');
-    link.download = `${props.name}.png`;
-    link.href = canvas.toDataURL('image/png')
-    link.click();
-
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'))
     confetti()
   }
 }

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

@@ -43,5 +43,6 @@ function setActiveIcon(name: string) {
 
 .icon {
   aspect-ratio: 1/1;
+  position: relative;
 }
 </style>

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

@@ -2,13 +2,17 @@
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import { useMediaQuery } from '@vueuse/core';
 import { useRouter } from 'vitepress';
+import getSVGIcon from '../../utils/getSVGIcon';
+import useConfetti from '../../composables/useConfetti';
+import Tooltip from '../base/Tooltip.vue';
+
+const downloadText = 'Download!'
+const copiedText = 'Copied!'
 
 export type IconNode = [elementName: string, attrs: Record<string, string>][]
 
 const props = defineProps<{
   name: string;
-  // tags: string[];
-  // categories: string[];
   iconNode: IconNode;
   active: boolean;
   customizable?: boolean;
@@ -20,40 +24,65 @@ const emit = defineEmits(['setActiveIcon'])
 
 const { go } = useRouter()
 const showOverlay = useMediaQuery('(min-width: 860px)');
+const { animate, confetti, confettiText } = useConfetti()
+
 
 const icon = createLucideIcon(props.name, props.iconNode)
 
-function navigateToIcon() {
+async function navigateToIcon(event) {
+
+  if (event.shiftKey) {
+    event.preventDefault()
+    const svgString = getSVGIcon(event.target.firstChild, {
+      class: `lucide lucide-${props.name}`,
+    })
+
+    await navigator.clipboard.writeText(svgString)
+
+    confettiText.value = copiedText
+    confetti()
+    return
+  }
+
   if(props.overlayMode && showOverlay.value) {
+    event.preventDefault()
     window.history.pushState({}, '', `/icons/${props.name}`)
     emit('setActiveIcon', props.name)
   }
   else {
+    event.preventDefault()
     go(`/icons/${props.name}`)
   }
 }
 </script>
 
 <template>
-  <button
-    class="icon-button"
-    @click="navigateToIcon"
-    :class="{ 'active' : active }"
-    :data-title="name"
-    :aria-label="name"
-    :href="`/icons/${props.name}`"
-  >
-    <KeepAlive>
-      <component
-        v-if="!hideIcon"
-        :is="icon"
-        class="lucide-icon"
-        :class="{ customizable }"
-      />
-    </KeepAlive>
-  </button>
+  <Tooltip :title="name">
+    <a
+      class="icon-button confetti-button vp-raw"
+      @click="navigateToIcon"
+      :class="{ active, animate }"
+      :aria-label="name"
+      :href="`/icons/${props.name}`"
+      :data-confetti-text="confettiText"
+      ref="ref"
+    >
+      <KeepAlive>
+        <component
+          v-if="!hideIcon"
+          :is="icon"
+          class="lucide-icon"
+          :class="{
+            customizable,
+          }"
+        />
+      </KeepAlive>
+    </a>
+  </Tooltip>
 </template>
 
+<style src="./confetti.css" />
+
 <style scoped>
 .icon-button {
   display: inline-block;
@@ -72,35 +101,13 @@ function navigateToIcon() {
   color: var(--vp-c-text-1);
 }
 
-.icon-button:hover:before {
-  opacity: 1;
-  transform: translate(-50%, 48px) scale(1);
+.confetti-button:before,
+.confetti-button:after {
+  z-index: 100;
 }
 
-.icon-button:before {
-  content: attr(data-title);
-  display: block;
-  font-size: 12px;
-  line-height: 20px;
-  margin-left: 27px;
-  transform: translate(-50%, 48px) scale(0.9);
-  font-weight: 400;
-  position: absolute;
-  background: var(--vp-c-brand-dark);
-  color: white;
-  z-index: 10;
-  white-space: nowrap;
-  padding: 2px 8px;
-  border-radius: 4px;
-  box-shadow: var(--vp-shadow-1);
-  opacity: 0;
-  pointer-events: none;
-  transition: cubic-bezier(0.19, 1, 0.22, 1) .2s;
-  transition-property: opacity, transform;
-  /* max-width: calc((32px * 2) + 56px); */
-  overflow: hidden;
-  white-space: pre-wrap;
-  word-break: break-word;
+.confetti-button:before {
+  line-height: 80px;
 }
 
 .icon-button:active {
@@ -139,6 +146,7 @@ function navigateToIcon() {
 
 .lucide-icon {
   margin: auto;
+  pointer-events: none;
 }
 .lucide-icon.customizable {
   will-change: width, height, stroke-width, stroke;

docs/.vitepress/theme/composables/useConfetti.ts

@@ -2,6 +2,7 @@ import { ref } from "vue";
 
 export default function useConfetti() {
   const animate = ref(false)
+  const confettiText = ref('confetti!')
 
   function confetti() {
     animate.value = true;
@@ -13,6 +14,7 @@ export default function useConfetti() {
 
   return {
     animate,
-    confetti
+    confetti,
+    confettiText
   }
 }

docs/.vitepress/theme/utils/downloadData.ts

@@ -0,0 +1,6 @@
+export default function downloadData(filename:string, data:string) {
+  const link = document.createElement('a');
+  link.download = filename;
+  link.href = data
+  link.click();
+}

docs/.vitepress/theme/utils/getSVGIcon.ts

@@ -0,0 +1,34 @@
+const allowedAttrs = [
+  'xmlns',
+  'width',
+  'height',
+  'viewBox',
+  'fill',
+  'stroke',
+  'stroke-width',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'class',
+]
+
+export default function getSVGIcon(element?: HTMLElement, attrs?: Record<string, string>) {
+  const svg = element ?? document.querySelector('#previewer svg')
+  if (!svg) return
+
+  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)
+    }
+  }
+
+  for (const [key, value] of Object.entries(attrs ?? {})) {
+    clonedSvg.setAttribute(key, value)
+  }
+
+  const svgString = new XMLSerializer().serializeToString(clonedSvg)
+
+  return svgString
+}

docs/guide/packages/lucide-react.md

@@ -89,7 +89,7 @@ export default Icon;
 import Icon from './Icon';
 
 const App = () => {
-  return <Icon name="home" />;
+  return <Icon name="Home" />;
 };
 
 export default App;

docs/package.json

@@ -30,6 +30,7 @@
     "vitepress": "1.0.0-beta.1"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
     "@headlessui/vue": "^1.7.13",
     "@vueuse/components": "^10.1.0",
     "@vueuse/core": "^10.1.0",

icons/calculator.json

@@ -9,6 +9,7 @@
     "calculating machine"
   ],
   "categories": [
-    "maths"
+    "maths",
+    "devices"
   ]
 }

icons/scroll-text.json

@@ -8,11 +8,14 @@
     "log",
     "scripture",
     "document",
+    "notes",
     "parchment",
     "list",
     "long",
     "script",
-    "code"
+    "story",
+    "code",
+    "coding"
   ],
   "categories": [
     "gaming",

icons/scroll.json

@@ -10,11 +10,14 @@
     "log",
     "scripture",
     "document",
+    "notes",
     "parchment",
     "list",
     "long",
     "script",
-    "code"
+    "story",
+    "code",
+    "coding"
   ],
   "categories": [
     "gaming",

icons/table-2.json

@@ -6,9 +6,8 @@
     "ericfennis"
   ],
   "tags": [
-    "sheet",
-    "grid",
-    "spreadsheet"
+    "spreadsheet",
+    "grid"
   ],
   "categories": [
     "text",

icons/table-properties.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "property list",
+    "plist",
+    "spreadsheet",
+    "grid",
+    "dictionary",
+    "object",
+    "hash"
+  ],
+  "categories": [
+    "text",
+    "development",
+    "files"
+  ]
+}

icons/table-properties.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 3v18" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M21 9H3" />
+  <path d="M21 15H3" />
+</svg>

icons/table.json

@@ -8,9 +8,8 @@
     "mittalyashu"
   ],
   "tags": [
-    "sheet",
-    "grid",
-    "spreadsheet"
+    "spreadsheet",
+    "grid"
   ],
   "categories": [
     "text",

icons/table.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
-  <line x1="3" x2="21" y1="9" y2="9" />
-  <line x1="3" x2="21" y1="15" y2="15" />
-  <line x1="12" x2="12" y1="3" y2="21" />
+  <path d="M12 3v18" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="M3 9h18" />
+  <path d="M3 15h18" />
 </svg>

icons/tally-1.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "count",
+    "score",
+    "enumerate",
+    "days",
+    "one",
+    "1",
+    "first",
+    "bar",
+    "prison",
+    "cell",
+    "sentence"
+  ],
+  "categories": [
+    "maths",
+    "gaming"
+  ]
+}

icons/tally-1.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 4v16" />
+</svg>

icons/tally-2.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "count",
+    "score",
+    "enumerate",
+    "days",
+    "two",
+    "2",
+    "second",
+    "double",
+    "bars",
+    "prison",
+    "cell",
+    "sentence"
+  ],
+  "categories": [
+    "maths",
+    "gaming"
+  ]
+}

icons/tally-2.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 4v16" />
+  <path d="M9 4v16" />
+</svg>

icons/tally-3.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "count",
+    "score",
+    "enumerate",
+    "days",
+    "three",
+    "3",
+    "third",
+    "triple",
+    "bars",
+    "prison",
+    "cell",
+    "sentence"
+  ],
+  "categories": [
+    "maths",
+    "gaming"
+  ]
+}

icons/tally-3.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 4v16" />
+  <path d="M9 4v16" />
+  <path d="M14 4v16" />
+</svg>

icons/tally-4.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "count",
+    "score",
+    "enumerate",
+    "days",
+    "4",
+    "fourth",
+    "quadruple",
+    "bars",
+    "prison",
+    "cell",
+    "sentence"
+  ],
+  "categories": [
+    "maths",
+    "gaming"
+  ]
+}

icons/tally-4.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 4v16" />
+  <path d="M9 4v16" />
+  <path d="M14 4v16" />
+  <path d="M19 4v16" />
+</svg>

icons/tally-5.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "count",
+    "score",
+    "enumerate",
+    "days",
+    "five",
+    "5",
+    "fifth",
+    "bars",
+    "prison",
+    "cell",
+    "sentence",
+    "slash",
+    "/"
+  ],
+  "categories": [
+    "maths",
+    "gaming"
+  ]
+}

icons/tally-5.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M4 4v16" />
+  <path d="M9 4v16" />
+  <path d="M14 4v16" />
+  <path d="M19 4v16" />
+  <path d="M22 6 2 18" />
+</svg>

package.json

@@ -32,20 +32,20 @@
     "gi": "node ./scripts/generate/generateIcons.mjs"
   },
   "devDependencies": {
-    "@octokit/rest": "^19.0.7",
-    "eslint": "^8.36.0",
+    "@octokit/rest": "^19.0.13",
+    "eslint": "^8.43.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.0",
+    "lint-staged": "^13.2.3",
     "minimist": "^1.2.8",
     "node-fetch": "^3.3.1",
     "p-memoize": "^7.1.1",
     "prettier": "2.7.1",
-    "semver": "^7.5.0",
-    "simple-git": "^3.18.0",
+    "semver": "^7.5.3",
+    "simple-git": "^3.19.1",
     "svgo": "^3.0.2",
     "svgson": "^5.2.1"
   },

packages/lucide-figma/package.json

@@ -23,7 +23,8 @@
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.0.0",
     "typescript": "^4.3.2",
-    "vite": "^2.6.4",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
     "vite-plugin-singlefile": "^0.5.1"
   }
 }

packages/lucide-preact/package.json

@@ -40,8 +40,8 @@
     "preact": "^10.11.2",
     "rollup": "^3.5.1",
     "typescript": "^4.8.4",
-    "vite": "^3.1.0",
-    "vitest": "^0.24.3"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "preact": "^10.5.13"

packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
 

packages/lucide-react-native/package.json

@@ -47,8 +47,8 @@
     "react-native-svg": "^13.0.0",
     "rollup": "^3.5.1",
     "typescript": "^4.8.4",
-    "vite": "^3.1.0",
-    "vitest": "^0.24.3"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",

packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
 

packages/lucide-react/package.json

@@ -45,8 +45,8 @@
     "react-dom": "17.0.2",
     "rollup": "^3.5.1",
     "typescript": "^4.8.4",
-    "vite": "^3.1.0",
-    "vitest": "^0.24.3"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
     "react": "^16.5.1 || ^17.0.0 || ^18.0.0"

packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\"></line></svg>"`;
 

packages/lucide-solid/package.json

@@ -46,12 +46,12 @@
     "jsdom": "^20.0.0",
     "rollup": "^3.5.1",
     "rollup-preset-solid": "^2.0.1",
-    "solid-js": "^1.4.7",
-    "solid-testing-library": "^0.3.0",
+    "solid-js": "^1.7.7",
+    "solid-testing-library": "^0.5.1",
     "typescript": "^4.9.4",
-    "vite": "^3.2.4",
-    "vite-plugin-solid": "^2.3.0",
-    "vitest": "^0.23.2"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
+    "vite-plugin-solid": "^2.7.0"
   },
   "peerDependencies": {
     "solid-js": "^1.4.7"

packages/lucide-solid/tests/__snapshots__/lucide-solid.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\" key=\\"1m3agn\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\" key=\\"1vqk6q\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\" key=\\"o2sbyz\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\" key=\\"13tij5\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\" key=\\"1hpv9i\\"></line></svg>"`;
+exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `"<svg data-testid=\\"grid-icon\\" width=\\"48\\" height=\\"48\\" stroke=\\"red\\" stroke-width=\\"4\\" class=\\"lucide lucide-grid \\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\" key=\\"1m3agn\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\" key=\\"1vqk6q\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\" key=\\"o2sbyz\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\" key=\\"13tij5\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\" key=\\"1hpv9i\\"></line></svg>"`;
 
-exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid \\" data-testid=\\"grid-icon\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\" key=\\"1m3agn\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\" key=\\"1vqk6q\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\" key=\\"o2sbyz\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\" key=\\"13tij5\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\" key=\\"1hpv9i\\"></line></svg>"`;
+exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `"<svg data-testid=\\"grid-icon\\" width=\\"48\\" height=\\"48\\" stroke=\\"red\\" stroke-width=\\"1\\" class=\\"lucide lucide-grid \\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\" key=\\"1m3agn\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\" key=\\"1vqk6q\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\" key=\\"o2sbyz\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\" key=\\"13tij5\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\" key=\\"1hpv9i\\"></line></svg>"`;
 
-exports[`Using lucide icon components > should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid \\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\" key=\\"1m3agn\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\" key=\\"1vqk6q\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\" key=\\"o2sbyz\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\" key=\\"13tij5\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\" key=\\"1hpv9i\\"></line></svg>"`;
+exports[`Using lucide icon components > should render an component 1`] = `"<svg width=\\"24\\" height=\\"24\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" class=\\"lucide lucide-grid \\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect width=\\"18\\" height=\\"18\\" x=\\"3\\" y=\\"3\\" rx=\\"2\\" ry=\\"2\\" key=\\"1m3agn\\"></rect><line x1=\\"3\\" x2=\\"21\\" y1=\\"9\\" y2=\\"9\\" key=\\"1vqk6q\\"></line><line x1=\\"3\\" x2=\\"21\\" y1=\\"15\\" y2=\\"15\\" key=\\"o2sbyz\\"></line><line x1=\\"9\\" x2=\\"9\\" y1=\\"3\\" y2=\\"21\\" key=\\"13tij5\\"></line><line x1=\\"15\\" x2=\\"15\\" y1=\\"3\\" y2=\\"21\\" key=\\"1hpv9i\\"></line></svg>"`;

packages/lucide-solid/vitest.config.ts

@@ -7,12 +7,12 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     transformMode: {
-      web: [/\.jsx?$/],
+      web: [/\.[jt]sx?$/]
     },
     setupFiles: './tests/setupVitest.js',
-    threads: false,
-    isolate: false,
-    watch: false,
+    // threads: false,
+    // isolate: false,
+    // watch: false,
   },
   resolve: {
     conditions: ['development', 'browser'],

packages/lucide-svelte/package.json

@@ -33,25 +33,25 @@
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@lucide/rollup-plugins": "workspace:*",
     "@lucide/build-icons": "workspace:*",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@sveltejs/vite-plugin-svelte": "^1.2.0",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/svelte": "^3.0.3",
-    "@tsconfig/svelte": "^3.0.0",
+    "@lucide/rollup-plugins": "workspace:*",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/svelte": "^4.0.2",
+    "@tsconfig/svelte": "^5.0.0",
     "jsdom": "^20.0.3",
-    "rollup": "^3.5.1",
-    "rollup-plugin-svelte": "^7.1.0",
-    "svelte": "^3.53.1",
-    "svelte-check": "^2.9.2",
-    "svelte-preprocess": "^4.10.7",
-    "svelte-strip": "^1.0.3",
-    "typescript": "^4.9.3",
-    "vite": "^3.1.0",
-    "vitest": "^0.23.2"
+    "rollup": "^3.25.3",
+    "rollup-plugin-svelte": "^7.1.6",
+    "svelte": "^4.0.1",
+    "svelte-check": "^3.4.4",
+    "svelte-preprocess": "^5.0.4",
+    "svelte-strip": "^2.0.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   },
   "peerDependencies": {
-    "svelte": "^3.49.0"
+    "svelte": ">=3 <5"
   }
 }

packages/lucide-svelte/tests/__snapshots__/lucide-svelte.spec.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Using lucide icon components > should add a class to the element 1`] = `
 <svg

packages/lucide-svelte/tests/lucide-svelte.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, afterEach } from 'vitest';
-import { render, cleanup, logDOM } from '@testing-library/svelte';
+import { render, cleanup } from '@testing-library/svelte';
 import { Smile, Pen, Edit2 } from '../src/lucide-svelte'
 import TestSlots from './TestSlots.svelte'
 

packages/lucide-svelte/vitest.config.ts

@@ -2,12 +2,17 @@ import { defineConfig } from 'vitest/config'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 export default defineConfig({
-  plugins: [svelte({ hot: false })],
+  plugins: [
+    svelte({
+      hot: false,
+    })
+  ],
   test: {
     globals: true,
     environment: 'jsdom',
     setupFiles: './tests/setupVitest.ts',
-    threads: false,
-    isolate: false,
+    alias: [
+      { find: /^svelte$/, replacement: "svelte/internal" }
+    ]
   },
 });

packages/lucide-vue-next/package.json

@@ -42,8 +42,8 @@
     "@vue/test-utils": "2.2.4",
     "@vitejs/plugin-vue": "^3.2.0",
     "rollup": "^3.5.1",
-    "vite": "^3.1.0",
-    "vitest": "^0.24.3",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
     "vue": "3.2.45",
     "jsdom": "^20.0.3"
   },

packages/lucide-vue/package.json

@@ -40,8 +40,8 @@
     "@vue/test-utils": "1.3.0",
     "rollup": "^3.23.0",
     "typescript": "^4.9.5",
-    "vite": "^3.2.7",
-    "vitest": "^0.24.5",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
     "vue": "2.7.14",
     "vue-template-compiler": "2.7.14"
   },

packages/lucide/package.json

@@ -39,7 +39,7 @@
     "rollup": "^3.5.1",
     "rollup-plugin-dts": "^5.0.0",
     "typescript": "^4.9.3",
-    "vite": "^3.1.0",
-    "vitest": "^0.24.3"
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2"
   }
 }

packages/lucide/tests/__snapshots__/lucide.spec.js.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`createIcons > should add custom attributes 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"black\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-lucide=\\"volume-2\\" class=\\"lucide lucide-volume-2 icon custom-class\\"><polygon points=\\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\\"></polygon><path d=\\"M15.54 8.46a5 5 0 0 1 0 7.07\\"></path><path d=\\"M19.07 4.93a10 10 0 0 1 0 14.14\\"></path></svg>"`;
 

packages/lucide/tests/__snapshots__/replaceElement.spec.js.snap

@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`combineClassNames > should retuns a string of classNames 1`] = `"item item1 item2 item3 item4 item5 item6 item7 item8 item9"`;