feat: support multiple lines #1

Author: wuwb

Diff for: app.js

@@ -3,13 +3,15 @@ let defaultSize = 512
 const generateIconSVG = (options) => {
   const {
     text = 'AI',
-      size = defaultSize,
-      bgColor = '#131516',
-      radius = 80,
-      fontFamily = 'Arial',
-      fontWeight = 'normal',
-      textColor = '#70e000',
-      verticalOffset = 0
+    textLead = -1,
+    textLineHeight = 1,
+    size = defaultSize,
+    bgColor = '#131516',
+    radius = 80,
+    fontFamily = 'Arial',
+    fontWeight = 'normal',
+    textColor = '#70e000',
+    verticalOffset = 0
   } = options;
 
   const svgNS = "http://www.w3.org/2000/svg";
@@ -33,7 +35,14 @@ const generateIconSVG = (options) => {
   textElement.setAttribute("font-family", fontFamily);
   textElement.setAttribute("font-weight", fontWeight);
   textElement.setAttribute("fill", textColor);
-  textElement.textContent = text;
+  textElement.innerHTML = text.replace(/\r\n|\r/g, '\n').split('\n')[0] + text
+    .replace(/\r\n|\r/g, '\n')
+    .split('\n')
+    .slice(1)
+    .map((item) => {
+      return '<tspan dx="'+textLead+'em" dy="'+textLineHeight + 'em">' + item + '</tspan>'
+    }).join('')
+
   svg.appendChild(textElement);
 
   const adjustTextSizeAndPosition = () => {
@@ -506,6 +515,8 @@ const applyColorScheme = (index) => {
 
 const defaultSettings = {
   text: 'AI',
+  textLead: -1,
+  textLineHeight: 1,
   size: defaultSize,
   bgColor: '#131516',
   radius: 80,
@@ -518,6 +529,8 @@ const defaultSettings = {
 const generateIcon = () => {
   const options = {
     text: document.getElementById('text').value,
+    textLead: parseFloat(document.getElementById('textLead').value),
+    textLineHeight: parseFloat(document.getElementById('textLineHeight').value),
     size: parseInt(document.getElementById('size').value),
     bgColor: document.getElementById('bgColor').value,
     radius: parseInt(document.getElementById('radius').value),
@@ -641,6 +654,8 @@ const resetToDefault = () => {
     }
   });
   document.getElementById('verticalOffsetValue').textContent = '0%';
+  document.getElementById('textLeadValue').textContent = -1;
+  document.getElementById('textLineHeightValue').textContent = 1;
 
   generateIcon();
 };
@@ -726,6 +741,24 @@ verticalOffsetInput.addEventListener('input', function() {
   generateIcon();
 });
 
+const textLeadInput = document.getElementById('textLead');
+const textLeadValue = document.getElementById('textLeadValue');
+
+textLeadInput.addEventListener('input', function() {
+  console.log('changed', this.value)
+  textLeadValue.textContent = this.value;
+  generateIcon();
+});
+
+const textLineHeightInput = document.getElementById('textLineHeight');
+const textLineHeightValue = document.getElementById('textLineHeightValue');
+
+textLineHeightInput.addEventListener('input', function() {
+  console.log('changed', this.value)
+  textLineHeightValue.textContent = this.value;
+  generateIcon();
+});
+
 // Add event listeners to all input elements
 const inputElements = document.querySelectorAll('input, select');
 inputElements.forEach(element => {
@@ -1611,6 +1644,8 @@ document.addEventListener('DOMContentLoaded', function() {
 
 function applyConfig(config) {
   document.getElementById('text').value = config.text;
+  document.getElementById('textLead').value = config.textLead;
+  document.getElementById('textLineHeight').value = config.textLineHeight;
   document.getElementById('size').value = config.size === 64 ? config.size * 8 : config.size;
   document.getElementById('bgColor').value = config.bgColor;
   document.getElementById('textColor').value = config.textColor;
@@ -1663,4 +1698,4 @@ document.addEventListener('DOMContentLoaded', (event) => {
       }
     });
   });
-});
+});

Diff for: index.html

@@ -159,10 +159,22 @@ <h2 class="text-3xl sm:text-4xl font-semibold mb-6 text-center text-gray-900">Tr
               <h2 class="text-xl sm:text-2xl font-semibold mb-4 text-gray-700">Settings</h2>
               <div class="mb-4">
                 <label for="text" class="block mb-2 text-gray-600">Text</label>
-                <input type="text" id="text" class="w-full border rounded px-3 py-2" value="AI">
+                <textarea type="text" id="text" class="w-full border rounded px-3 py-2">AI</textarea>
                 <p class="text-xs text-gray-600 mt-2">Emojis are supported. Search & copy emoji on <a href="https://emojispark.com" target="_blank" class="inline-block underline">EmojiSpark.com</a>
                 </p>
               </div>
+              <div class="flex gap-2.5" id="multipleLineConfig">
+                <div class="mb-4 flex-1">
+                  <label for="textLead" class="block mb-2 text-gray-600">Text Lead</label>
+                  <input type="range" id="textLead" min="-3" max="3" value="-1" step="0.01" class="w-full">
+                  <span id="textLeadValue" class="text-sm text-gray-500">-1</span>
+                </div>
+                <div class="mb-4 flex-1">
+                  <label for="textLineHeight" class="block mb-2 text-gray-600">Text Line Height</label>
+                  <input type="range" id="textLineHeight" min="-3" max="3" value="1" step="0.01" class="w-full">
+                  <span id="textLineHeightValue" class="text-sm text-gray-500">1</span>
+                </div>
+              </div>
               <div class="flex flex-wrap -mx-2 mb-4">
                 <div class="w-1/2 px-2">
                   <label for="size" class="block mb-2 text-gray-600">Size</label>
@@ -451,4 +463,4 @@ <h3 class="text-xl font-semibold text-gray-700">How do I add the favicon to my w
       font-display: swap;
     }</style>
   </body>
-</html>
+</html>