feat: make edit button more visible

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

@@ -56,6 +56,29 @@ function onClose() {
 
 const CloseIcon = createLucideIcon('Close', x);
 const Expand = createLucideIcon('Expand', expand);
+
+import getStudioLink from '../../utils/getStudioLink';
+
+const brushSparkles = [
+  ['path', { d: 'M10 3H8' }],
+  ['path', { d: 'm11 10 3 3' }],
+  ['path', { d: 'M20 15v4' }],
+  ['path', { d: 'M22 17h-4' }],
+  ['path', { d: 'M4 5v4' }],
+  ['path', { d: 'M6 7H2' }],
+  ['path', { d: 'M6.5 21A3.5 3.5 0 103 17.5a2.62 2.62 0 01-.708 1.792A1 1 0 003 21z' }],
+  ['path', { d: 'M9 2v2' }],
+  ['path', { d: 'M9.969 17.031 21.378 5.624a1 1 0 00-3.002-3.002L6.967 14.031' }],
+];
+
+const BrushSparklesIcon = createLucideIcon('BrushSparkels', brushSparkles);
+
+function openStudio() {
+  if (typeof window !== 'undefined' && icon.value) {
+    const link = getStudioLink(icon.value.name, icon.value.iconNode, 'icon-detail-overlay');
+    window.open(link, '_blank');
+  }
+}
 </script>
 
 <template>
@@ -75,6 +98,13 @@ const Expand = createLucideIcon('Expand', expand);
             :href="releaseTagLink(icon.createdRelease.version)"
             >v{{ icon.createdRelease.version }}</Badge
           >
+          <IconButton
+            title="Edit"
+            aria-label="Edit"
+            @click="openStudio"
+          >
+            <BrushSparklesIcon />
+          </IconButton>
           <IconButton
             @click="
               go(

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

@@ -14,6 +14,7 @@ import deprecationReasonTemplate from '../../../../../tools/build-icons/utils/de
 const props = defineProps<{
   icon: IconEntity;
   popoverPosition?: 'top' | 'bottom';
+  showEditButton?: boolean;
 }>();
 
 const { go } = useRouter();
@@ -34,6 +35,22 @@ const deprecatedTitle = computed(() => {
     toBeRemovedInVersion: props.icon.toBeRemovedInVersion,
   });
 });
+
+import getStudioLink from '../../utils/getStudioLink';
+
+const brushSparkles = [
+  ['path', { d: 'M10 3H8' }],
+  ['path', { d: 'm11 10 3 3' }],
+  ['path', { d: 'M20 15v4' }],
+  ['path', { d: 'M22 17h-4' }],
+  ['path', { d: 'M4 5v4' }],
+  ['path', { d: 'M6 7H2' }],
+  ['path', { d: 'M6.5 21A3.5 3.5 0 103 17.5a2.62 2.62 0 01-.708 1.792A1 1 0 003 21z' }],
+  ['path', { d: 'M9 2v2' }],
+  ['path', { d: 'M9.969 17.031 21.378 5.624a1 1 0 00-3.002-3.002L6.967 14.031' }],
+];
+
+const BrushSparklesIcon = createLucideIcon('BrushSparkels', brushSparkles);
 </script>
 
 <template>
@@ -109,12 +126,54 @@ const deprecatedTitle = computed(() => {
         :name="icon.name"
         :popoverPosition="popoverPosition"
       />
+      <a
+        v-if="showEditButton"
+        class="studio-edit-button"
+        :href="getStudioLink(icon.name, icon.iconNode, 'icon-info')"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <BrushSparklesIcon :size="20" />
+        <span>Edit</span>
+      </a>
     </div>
     <slot name="footer" />
   </div>
 </template>
 
 <style scoped>
+.studio-edit-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 14px;
+  min-height: 40px;
+  border: 1px solid var(--vp-button-alt-border);
+  border-radius: 999px;
+  background-color: var(--vp-button-alt-bg);
+  color: var(--vp-button-alt-text);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    background-color 0.2s,
+    transform 0.2s;
+  margin-left: 0;
+  margin-inline-start: 0;
+}
+
+.studio-edit-button:hover,
+.studio-edit-button:focus-visible {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+  transform: translateY(-1px);
+}
+
 .group {
   display: flex;
   flex-wrap: wrap;

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

@@ -3,7 +3,6 @@ import type { IconEntity } from '../../types';
 import { computed, ref } from 'vue';
 import createLucideIcon from '@lucide/vue/src/createLucideIcon';
 import { useIconStyleContext } from '../../composables/useIconStyle';
-import { squarePen } from '../../../data/iconNodes';
 
 const props = defineProps<{
   name: IconEntity['name'];
@@ -20,31 +19,6 @@ const iconComponent = computed(() => {
   if (!props.name || !props.iconNode) return null;
   return createLucideIcon(props.name, props.iconNode);
 });
-
-const SquarePenIcon = createLucideIcon('SquarePen', squarePen);
-
-const innerSvg = computed(() => {
-  if (!props.iconNode) return '';
-
-  const string = props.iconNode
-    .map(([tag, attrs]) => {
-      const attributes = Object.entries(attrs)
-        .map(([key, value]) => `${key}="${value}"`)
-        .join(' ');
-      return `<${tag} ${attributes}/>`;
-    })
-    .join('');
-
-  return string
-    .replace(/>[\r\n ]+</g, '><')
-    .replace(/(<.*?>)|\s+/g, (m, $1) => $1 || ' ')
-    .trim();
-});
-
-const base64InnerSvg = computed(() => {
-  if (typeof window === 'undefined') return '';
-  return btoa(innerSvg.value);
-});
 </script>
 
 <template>
@@ -83,16 +57,6 @@ const base64InnerSvg = computed(() => {
         />
       </g>
     </svg>
-    <a
-      :href="`https://studio.lucide.dev/edit?value=${encodeURIComponent(base64InnerSvg)}&name=${name}&utm_source=lucide.dev&utm_medium=icon-detail-preview`"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="studio-button"
-      title="Open in Lucide Studio"
-      aria-label="Open in Lucide Studio"
-    >
-      <SquarePenIcon :size="14" />
-    </a>
   </div>
 </template>
 
@@ -123,34 +87,6 @@ const base64InnerSvg = computed(() => {
   opacity: 0.8;
 }
 
-.studio-button {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--vp-c-text-2);
-  opacity: 0;
-  transition: opacity 0.2s, color 0.2s, background-color 0.2s;
-  z-index: 2;
-}
-
-.icon-container:hover .studio-button,
-.studio-button:focus-visible {
-  opacity: 1;
-}
-
-.studio-button:hover,
-.studio-button:focus-visible {
-  background: var(--vp-c-bg-soft);
-  color: var(--vp-c-text-1);
-}
-
 .icon-component.customizable {
   will-change: width, height, stroke-width, stroke;
   /* color: var(--customize-color, currentColor);

docs/icons/[name].md

@@ -65,7 +65,10 @@ function releaseTagLink(version) {
   </div>
   <div >
     <div :class="$style.info">
-      <IconInfo :icon="params" />
+      <IconInfo
+        :icon="params"
+        :showEditButton="true"
+      />
       <div :class="$style.meta">
         <div
           v-if="params.createdRelease?.version"