refactor: unify syntax for lucide icons

essenmitsosse · essenmitsosse · commit 542438956dd0 · 2026-02-13T02:14:07.000+01:00
diff --git a/app/components/PackageProvenanceSection.vue b/app/components/PackageProvenanceSection.vue
@@ -18,7 +18,7 @@ defineProps<{
       <div class="space-y-1">
         <p class="flex items-start gap-2 text-sm text-fg m-0">
           <span
-            class="i-lucide-shield-check w-4 h-4 shrink-0 text-emerald-500 mt-0.5"
+            class="i-lucide:shield-check w-4 h-4 shrink-0 text-emerald-500 mt-0.5"
             aria-hidden="true"
           />
           <i18n-t keypath="package.provenance_section.built_and_signed_on" tag="span">
diff --git a/app/components/ProvenanceBadge.vue b/app/components/ProvenanceBadge.vue
@@ -35,7 +35,7 @@ const title = computed(() =>
     class="inline-flex items-center justify-center gap-1 text-xs font-mono text-fg-muted hover:text-fg transition-colors duration-200 min-w-6 min-h-6"
     :title="title"
   >
-    <span class="i-lucide-shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
+    <span class="i-lucide:shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
       $t('badges.provenance.verified')
     }}</span>
@@ -45,7 +45,7 @@ const title = computed(() =>
     class="inline-flex items-center gap-1 text-xs font-mono text-fg-muted"
     :title="title"
   >
-    <span class="i-lucide-shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
+    <span class="i-lucide:shield-check shrink-0" :class="compact ? 'w-3.5 h-3.5' : 'w-4 h-4'" />
     <span v-if="!compact" class="sr-only sm:not-sr-only">{{
       $t('badges.provenance.verified')
     }}</span>
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
@@ -313,8 +313,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='note']::after) {
   background-color: #3b82f6;
-  -webkit-mask: icon('i-lucide-info') no-repeat;
-  mask: icon('i-lucide-info') no-repeat;
+  -webkit-mask: icon('i-lucide:info') no-repeat;
+  mask: icon('i-lucide:info') no-repeat;
 }
 
 /* Tip - green */
@@ -328,8 +328,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='tip']::after) {
   background-color: #22c55e;
-  -webkit-mask: icon('i-lucide-lightbulb') no-repeat;
-  mask: icon('i-lucide-lightbulb') no-repeat;
+  -webkit-mask: icon('i-lucide:lightbulb') no-repeat;
+  mask: icon('i-lucide:lightbulb') no-repeat;
 }
 
 /* Important - purple */
@@ -343,8 +343,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='important']::after) {
   background-color: var(--syntax-fn);
-  -webkit-mask: icon('i-lucide-pin') no-repeat;
-  mask: icon('i-lucide-pin') no-repeat;
+  -webkit-mask: icon('i-lucide:pin') no-repeat;
+  mask: icon('i-lucide:pin') no-repeat;
 }
 
 /* Warning - yellow/orange */
@@ -358,8 +358,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='warning']::after) {
   background-color: #eab308;
-  -webkit-mask: icon('i-lucide-triangle-alert') no-repeat;
-  mask: icon('i-lucide-triangle-alert') no-repeat;
+  -webkit-mask: icon('i-lucide:triangle-alert') no-repeat;
+  mask: icon('i-lucide:triangle-alert') no-repeat;
 }
 
 /* Caution - red */
@@ -373,8 +373,8 @@ function handleClick(event: MouseEvent) {
 }
 .readme :deep(blockquote[data-callout='caution']::after) {
   background-color: #ef4444;
-  -webkit-mask: icon('i-lucide-circle-alert') no-repeat;
-  mask: icon('i-lucide-circle-alert') no-repeat;
+  -webkit-mask: icon('i-lucide:circle-alert') no-repeat;
+  mask: icon('i-lucide:circle-alert') no-repeat;
 }
 
 /* Table wrapper for horizontal scroll on mobile */
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
@@ -735,7 +735,7 @@ const showSkeleton = shallowRef(false)
                   size="small"
                   to="#provenance"
                   :aria-label="$t('package.provenance_section.view_more_details')"
-                  classicon="i-lucide-shield-check"
+                  classicon="i-lucide:shield-check"
                 />
               </TooltipApp>
             </template>
@@ -818,8 +818,8 @@ const showSkeleton = shallowRef(false)
                 :aria-pressed="likesData?.userHasLiked"
                 :classicon="
                   likesData?.userHasLiked
-                    ? 'i-lucide-heart-minus text-red-500'
-                    : 'i-lucide-heart-plus'
+                    ? 'i-lucide:heart-minus text-red-500'
+                    : 'i-lucide:heart-plus'
                 "
               >
                 <span
diff --git a/docs/content/1.getting-started/.navigation.yml b/docs/content/1.getting-started/.navigation.yml
@@ -1,2 +1,2 @@
 title: Getting Started
-icon: i-lucide-rocket
+icon: i-lucide:rocket
diff --git a/docs/content/1.getting-started/1.introduction.md b/docs/content/1.getting-started/1.introduction.md
@@ -2,7 +2,7 @@
 title: Introduction
 description: Learn what npmx.dev is and why you should use it
 navigation:
-  icon: i-lucide-house
+  icon: i-lucide:house
 ---
 
 npmx.dev provides a better way to browse the npm registry.
diff --git a/docs/content/1.getting-started/2.quick-start.md b/docs/content/1.getting-started/2.quick-start.md
@@ -2,7 +2,7 @@
 title: Quick Start
 description: Start using npmx.dev in seconds
 navigation:
-  icon: i-lucide-zap
+  icon: i-lucide:zap
 ---
 
 npmx.dev works in your browser with no installation required.
diff --git a/docs/content/2.guide/.navigation.yml b/docs/content/2.guide/.navigation.yml
@@ -1,2 +1,2 @@
 title: Guide
-icon: i-lucide-book-open
+icon: i-lucide:book-open
diff --git a/docs/content/2.guide/1.features.md b/docs/content/2.guide/1.features.md
@@ -2,7 +2,7 @@
 title: Features
 description: Explore all the features npmx.dev offers
 navigation:
-  icon: i-lucide-sparkles
+  icon: i-lucide:sparkles
 ---
 
 npmx.dev provides a comprehensive set of features for browsing npm packages.
@@ -85,7 +85,7 @@ Quick access to online development environments detected from package READMEs:
 | ------------------------------------------------------------------------------ | -------------------------------------------- |
 | :icon{name="i-simple-icons-stackblitz"} [StackBlitz](https://stackblitz.com)   | Browser-based IDE with instant environments  |
 | :icon{name="i-simple-icons-codesandbox"} [CodeSandbox](https://codesandbox.io) | Online code editor and prototyping tool      |
-| :icon{name="i-lucide-pen-tool"} [CodePen](https://codepen.io)                  | Social development environment for front-end |
+| :icon{name="i-lucide:pen-tool"} [CodePen](https://codepen.io)                  | Social development environment for front-end |
 | :icon{name="i-simple-icons-jsfiddle"} [JSFiddle](https://jsfiddle.net)         | Online editor for web snippets               |
 | :icon{name="i-simple-icons-replit"} [Replit](https://replit.com)               | Collaborative browser-based IDE              |
 
diff --git a/docs/content/2.guide/2.keyboard-shortcuts.md b/docs/content/2.guide/2.keyboard-shortcuts.md
@@ -2,7 +2,7 @@
 title: Keyboard Shortcuts
 description: Navigate npmx.dev efficiently with keyboard shortcuts
 navigation:
-  icon: i-lucide-keyboard
+  icon: i-lucide:keyboard
 ---
 
 npmx.dev supports keyboard navigation for faster browsing.
diff --git a/docs/content/2.guide/3.url-structure.md b/docs/content/2.guide/3.url-structure.md
@@ -2,7 +2,7 @@
 title: URL Structure
 description: Understand how URLs work in npmx.dev
 navigation:
-  icon: i-lucide-link
+  icon: i-lucide:link
 ---
 
 npmx.dev supports npm-compatible URLs and simpler alternatives.
diff --git a/docs/content/3.faq/.navigation.yml b/docs/content/3.faq/.navigation.yml
@@ -1,2 +1,2 @@
 title: FAQ
-icon: i-lucide-circle-help
+icon: i-lucide:circle-help
diff --git a/docs/content/3.faq/1.troubleshooting.md b/docs/content/3.faq/1.troubleshooting.md
@@ -2,7 +2,7 @@
 title: Troubleshooting
 description: Common issues and how to resolve them
 navigation:
-  icon: i-lucide-wrench
+  icon: i-lucide:wrench
 ---
 
 Solutions to common issues when using npmx.dev.
diff --git a/docs/content/3.faq/2.comparison.md b/docs/content/3.faq/2.comparison.md
@@ -2,7 +2,7 @@
 title: Comparison
 description: How npmx.dev compares to npmjs.com
 navigation:
-  icon: i-lucide-git-compare
+  icon: i-lucide:git-compare
 ---
 
 A feature comparison between npmx.dev and npmjs.com.
diff --git a/docs/content/index.md b/docs/content/index.md
@@ -15,7 +15,7 @@ links:
   to: /getting-started/introduction
   color: neutral
   size: xl
-  trailingIcon: i-lucide-arrow-right
+  trailingIcon: i-lucide:arrow-right
 - label: View on GitHub
   to: https://github.com/npmx-dev/npmx.dev
   target: \_blank
@@ -30,21 +30,21 @@ links:
 
 ::u-page-section{title="What you can do"}
 #features
-:::u-page-feature{icon="i-lucide-search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}
+:::u-page-feature{icon="i-lucide:search" to="/guide/features" title="Search packages" description="Fast package search with instant results, infinite scroll, and keyboard navigation."}
 :::
 
-:::u-page-feature{icon="i-lucide-code" to="/guide/features" title="Browse source code" description="View package source code with syntax highlighting and permalink to specific lines."}
+:::u-page-feature{icon="i-lucide:code" to="/guide/features" title="Browse source code" description="View package source code with syntax highlighting and permalink to specific lines."}
 :::
 
-:::u-page-feature{icon="i-lucide-link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
+:::u-page-feature{icon="i-lucide:link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
 :::
 
-:::u-page-feature{icon="i-lucide-keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Press / to search, . for code viewer, arrow keys to navigate results."}
+:::u-page-feature{icon="i-lucide:keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Press / to search, . for code viewer, arrow keys to navigate results."}
 :::
 
-:::u-page-feature{icon="i-lucide-shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}
+:::u-page-feature{icon="i-lucide:shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}
 :::
 
-:::u-page-feature{icon="i-lucide-moon" to="/guide/features" title="Enjoy dark mode" description="Dark mode by default for a better viewing experience."}
+:::u-page-feature{icon="i-lucide:moon" to="/guide/features" title="Enjoy dark mode" description="Dark mode by default for a better viewing experience."}
 :::
 ::

Original file line number	Diff line number	Diff line change
`@@ -313,8 +313,8 @@ function handleClick(event: MouseEvent) {`
`313`	`313`	`}`
`314`	`314`	`.readme :deep(blockquote[data-callout='note']::after) {`
`315`	`315`	`background-color: #3b82f6;`
`316`		`- -webkit-mask: icon('i-lucide-info') no-repeat;`
`317`		`- mask: icon('i-lucide-info') no-repeat;`
	`316`	`+ -webkit-mask: icon('i-lucide:info') no-repeat;`
	`317`	`+ mask: icon('i-lucide:info') no-repeat;`
`318`	`318`	`}`
`319`	`319`
`320`	`320`	`/* Tip - green */`
`@@ -328,8 +328,8 @@ function handleClick(event: MouseEvent) {`
`328`	`328`	`}`
`329`	`329`	`.readme :deep(blockquote[data-callout='tip']::after) {`
`330`	`330`	`background-color: #22c55e;`
`331`		`- -webkit-mask: icon('i-lucide-lightbulb') no-repeat;`
`332`		`- mask: icon('i-lucide-lightbulb') no-repeat;`
	`331`	`+ -webkit-mask: icon('i-lucide:lightbulb') no-repeat;`
	`332`	`+ mask: icon('i-lucide:lightbulb') no-repeat;`
`333`	`333`	`}`
`334`	`334`
`335`	`335`	`/* Important - purple */`
`@@ -343,8 +343,8 @@ function handleClick(event: MouseEvent) {`
`343`	`343`	`}`
`344`	`344`	`.readme :deep(blockquote[data-callout='important']::after) {`
`345`	`345`	`background-color: var(--syntax-fn);`
`346`		`- -webkit-mask: icon('i-lucide-pin') no-repeat;`
`347`		`- mask: icon('i-lucide-pin') no-repeat;`
	`346`	`+ -webkit-mask: icon('i-lucide:pin') no-repeat;`
	`347`	`+ mask: icon('i-lucide:pin') no-repeat;`
`348`	`348`	`}`
`349`	`349`
`350`	`350`	`/* Warning - yellow/orange */`
`@@ -358,8 +358,8 @@ function handleClick(event: MouseEvent) {`
`358`	`358`	`}`
`359`	`359`	`.readme :deep(blockquote[data-callout='warning']::after) {`
`360`	`360`	`background-color: #eab308;`
`361`		`- -webkit-mask: icon('i-lucide-triangle-alert') no-repeat;`
`362`		`- mask: icon('i-lucide-triangle-alert') no-repeat;`
	`361`	`+ -webkit-mask: icon('i-lucide:triangle-alert') no-repeat;`
	`362`	`+ mask: icon('i-lucide:triangle-alert') no-repeat;`
`363`	`363`	`}`
`364`	`364`
`365`	`365`	`/* Caution - red */`
`@@ -373,8 +373,8 @@ function handleClick(event: MouseEvent) {`
`373`	`373`	`}`
`374`	`374`	`.readme :deep(blockquote[data-callout='caution']::after) {`
`375`	`375`	`background-color: #ef4444;`
`376`		`- -webkit-mask: icon('i-lucide-circle-alert') no-repeat;`
`377`		`- mask: icon('i-lucide-circle-alert') no-repeat;`
	`376`	`+ -webkit-mask: icon('i-lucide:circle-alert') no-repeat;`
	`377`	`+ mask: icon('i-lucide:circle-alert') no-repeat;`
`378`	`378`	`}`
`379`	`379`
`380`	`380`	`/* Table wrapper for horizontal scroll on mobile */`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`title: Getting Started`
`2`		`-icon: i-lucide-rocket`
	`2`	`+icon: i-lucide:rocket`
Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`title: Guide`
`2`		`-icon: i-lucide-book-open`
	`2`	`+icon: i-lucide:book-open`