feat: keep guideline images in sync

docs/guide/design/icon-design-guide.md

@@ -2,13 +2,17 @@
 title: Icon Design Guide
 ---
 
+<script setup>
+import example from '../../images/24px-24px.svg?raw'
+</script>
+
 ## Icon Design Principles
 
 Here are rules that should be followed to keep quality and consistency when making icons for Lucide.
 
 ### 1. Icons must be designed on a **24 by 24 pixels** canvas.
 
-![24px-24px](../../images/24px-24px.svg?raw=true "24px-24px")
+<i v-html="example" />
 
 ### 2. Icons must have at least **1 pixel padding** within the canvas.
 

docs/images/24px-24px.svg

@@ -49,9 +49,7 @@
     <path d="M120 350h240" stroke="#D8D8D9" stroke-width=".5"/>
     <path d="M350 120v240" stroke="#D8D8D9" stroke-width=".5"/>
   </g>
-  <path d="m240 140-100 50 100 50 100-50-100-50Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m140 290 100 50 100-50" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m140 240 100 50 100-50" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+  <image xlink:href="https://lucide.dev/api/icons/layers?color=3C3C43" src="https://lucide.dev/api/icons/layers?color=3C3C43" width="240" height="240" x="120" y="120"/>
   <g opacity=".5" stroke="#fff" stroke-width="3">
     <path d="M120 92v16"/>
     <path d="M360 92v16"/>