refactor: add pull-2, icon label, icon repeat

src/markdown/index.ts

@@ -59,8 +59,17 @@ const marked = new Marked()
                     }
                 }
                 
+                const label = token.attrs?.label as string | undefined;
+                const inner = label ? `<span class="icon-label-stroke">${label}</span><span class="icon-label">${label}</span>` : "";
                 const style = globalIconPrefix ? `style="--icon-src: url('${globalIconPrefix}/${iconName}.${extension}')"` : '';
-                return `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}"></icon>`;
+                const iconHtml = `<icon ${style} class="icon-${iconName} ${token.attrs?.class || ""}">${inner}</icon>`;
+                
+                const repeat = parseInt(`${token.attrs?.repeat || ''}`);
+                const join = token.attrs?.join || '';
+                const separator = join ? `<${join}></${join}>` : '';
+                if(isNaN(repeat) || repeat < 1) return iconHtml;
+                
+                return Array(repeat).fill(iconHtml).join(separator);
             }
             return false;
         }

src/styles.css

@@ -2,7 +2,7 @@
 @plugin "@tailwindcss/typography";
 
 /* icon */
-icon, pull{
+icon, pull, pull-2{
     @apply inline-block;
     width: 1.5em;
     height: 1.28em;
@@ -12,6 +12,7 @@ icon, pull{
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
+    position: relative;
 }
 icon.big{
     width: 2em;
@@ -21,6 +22,27 @@ pull{
     margin-right: -.5em;
     width: 0;
 }
+pull-2{
+    margin-right: -1em;
+    width: 0;
+}
+icon.big .icon-label, icon.big .icon-label-stroke{
+    line-height: 2;
+    text-weight: bold;
+}
+.icon-label, .icon-label-stroke{
+    position: absolute;
+    text-align: center;
+    line-height: 1.28;
+    left: 0; right: 0; top: 0; bottom: 0;
+}
+.icon-label{
+    color: white;
+}
+.icon-label-stroke{
+    color: black;
+    -webkit-text-stroke: .14em black;
+}
 
 /* prose */