@ozdao/martyrs 0.2.485 → 0.2.487

package/src/modules/icons/icons.server.js

@@ -0,0 +1,292 @@
+import crypto from 'crypto';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import iconsRoutes from './routes/icons.routes.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const API_KEY = process.env.THENOUNPROJECT_KEY;
+const API_SECRET = process.env.THENOUNPROJECT_SECRET;
+const BASE_URL = 'https://api.thenounproject.com/v2';
+
+// OAuth 1.0a signature generation
+function generateOAuthSignature(method, url, oauthParams, queryParams, consumerSecret) {
+  // Combine OAuth params and query params
+  const allParams = { ...oauthParams, ...queryParams };
+  
+  // Sort and encode parameters
+  const sortedParams = Object.keys(allParams)
+    .sort()
+    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(allParams[key])}`)
+    .join('&');
+
+  const baseString = `${method.toUpperCase()}&${encodeURIComponent(url)}&${encodeURIComponent(sortedParams)}`;
+  const signingKey = `${encodeURIComponent(consumerSecret)}&`;
+  
+  return crypto.createHmac('sha1', signingKey).update(baseString).digest('base64');
+}
+
+// Generate OAuth headers
+function generateOAuthHeader(method, url, queryParams = {}) {
+  const timestamp = Math.floor(Date.now() / 1000).toString();
+  // Generate nonce with minimum 8 characters as per documentation
+  const nonce = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+  
+  const oauthParams = {
+    oauth_consumer_key: API_KEY,
+    oauth_nonce: nonce,
+    oauth_signature_method: 'HMAC-SHA1',
+    oauth_timestamp: timestamp,
+    oauth_version: '1.0'
+  };
+
+  const signature = generateOAuthSignature(method, url, oauthParams, queryParams, API_SECRET);
+  oauthParams.oauth_signature = signature;
+
+  // Build OAuth header
+  const authHeader = 'OAuth ' + Object.keys(oauthParams)
+    .filter(key => key.startsWith('oauth_'))
+    .sort()
+    .map(key => `${encodeURIComponent(key)}="${encodeURIComponent(oauthParams[key])}"`)
+    .join(', ');
+
+  return authHeader;
+}
+
+// Search icons by term with pagination support
+export async function searchIcons(term, options = {}) {
+  try {
+    const { 
+      limit = 20, 
+      next_page, 
+      prev_page 
+    } = typeof options === 'number' ? { limit: options } : options;
+
+    const url = `${BASE_URL}/icon`;
+    const queryParams = { 
+      query: term, 
+      limit_to_public_domain: '1', 
+      limit: limit.toString(),
+      thumbnail_size: '84'
+    };
+
+    // Add pagination tokens if provided
+    if (next_page) {
+      queryParams.next_page = next_page;
+    }
+    if (prev_page) {
+      queryParams.prev_page = prev_page;
+    }
+    
+    const queryString = new URLSearchParams(queryParams).toString();
+    const fullUrl = `${url}?${queryString}`;
+    
+    const authHeader = generateOAuthHeader('GET', url, queryParams);
+    
+    const response = await fetch(fullUrl, {
+      headers: {
+        'Authorization': authHeader,
+        'Accept': 'application/json'
+      }
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('API Error Response:', {
+        status: response.status,
+        statusText: response.statusText,
+        body: errorText,
+        headers: Object.fromEntries(response.headers.entries())
+      });
+      throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    
+    // Return complete response with pagination info
+    return {
+      icons: data.icons || [],
+      next_page: data.next_page || null,
+      prev_page: data.prev_page || null,
+      total: data.total || (data.icons ? data.icons.length : 0)
+    };
+  } catch (error) {
+    console.error('Error searching icons:', error);
+    throw error;
+  }
+}
+
+// Get icon details by ID
+export async function getIconById(iconId) {
+  try {
+    const url = `${BASE_URL}/icon/${iconId}`;
+    const queryParams = { thumbnail_size: '200' };
+    const queryString = new URLSearchParams(queryParams).toString();
+    const fullUrl = `${url}?${queryString}`;
+    
+    const authHeader = generateOAuthHeader('GET', url, queryParams);
+    
+    const response = await fetch(fullUrl, {
+      headers: {
+        'Authorization': authHeader,
+        'Accept': 'application/json'
+      }
+    });
+
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.icon;
+  } catch (error) {
+    console.error('Error getting icon:', error);
+    throw error;
+  }
+}
+
+// Download SVG content
+export async function downloadIconSvg(svgUrl) {
+  try {
+    // The Noun Project SVG URLs are signed and temporary
+    const response = await fetch(svgUrl);
+    if (!response.ok) {
+      throw new Error(`Failed to download SVG: ${response.status}`);
+    }
+    const svgContent = await response.text();
+    
+    // Sometimes the API returns base64 encoded SVG
+    if (svgContent.startsWith('data:image/svg+xml;base64,')) {
+      const base64Data = svgContent.split(',')[1];
+      return Buffer.from(base64Data, 'base64').toString('utf-8');
+    }
+    
+    return svgContent;
+  } catch (error) {
+    console.error('Error downloading SVG:', error);
+    throw error;
+  }
+}
+
+// Convert SVG to Vue component format
+export function convertSvgToVueComponent(svgContent, iconName) {
+  // Remove XML declaration and DOCTYPE if present
+  let cleanSvg = svgContent.replace(/<\?xml[^>]*\?>/g, '');
+  cleanSvg = cleanSvg.replace(/<!DOCTYPE[^>]*>/g, '');
+  cleanSvg = cleanSvg.trim();
+  
+  // Replace fill attributes with :fill prop binding
+  cleanSvg = cleanSvg.replace(/fill="[^"]*"/g, ':fill="fill"');
+  cleanSvg = cleanSvg.replace(/stroke="[^"]*"/g, ':stroke="fill"');
+  
+  // Add fill to SVG elements that don't have fill or stroke attributes
+  const svgElements = ['path', 'rect', 'circle', 'ellipse', 'polygon', 'polyline', 'line', 'g'];
+  svgElements.forEach(element => {
+    // Match opening tags without fill or stroke attributes
+    const regex = new RegExp(`<${element}(\\s+[^>]*?)?(?<!:fill="fill"|:stroke="fill")(/?)>`, 'gi');
+    cleanSvg = cleanSvg.replace(regex, (match, attributes, selfClosing) => {
+      // Check if this element already has fill or stroke
+      if (match.includes('fill') || match.includes('stroke')) {
+        return match;
+      }
+      // Add :fill="fill" right after the element name
+      return `<${element} :fill="fill"${attributes || ''}${selfClosing || ''}>`;
+    });
+  });
+  
+  // Ensure proper formatting with indentation
+  cleanSvg = cleanSvg.replace(/<svg/g, '\n<svg');
+  cleanSvg = cleanSvg.replace(/<\/svg>/g, '\n</svg>');
+  cleanSvg = cleanSvg.replace(/<(path|rect|circle|ellipse|polygon|polyline|line|g)/g, '\n\t<$1');
+  cleanSvg = cleanSvg.replace(/>\s*\n\s*</g, '>\n<');
+  
+  const vueComponent = `<template>${cleanSvg}
+</template>
+
+<script setup>
+\tconst props = defineProps({
+\t  fill: {
+\t    type: String,
+\t    default: 'rgb(var(--black))'
+\t  }
+\t})
+</script>`;
+  
+  return vueComponent;
+}
+
+// Save icon to disk
+export async function saveIconToDisk(iconId, category, iconName, mode = 'add', currentIconName = null) {
+  try {
+    // Get icon details with SVG URL
+    const icon = await getIconById(iconId);
+    
+    if (!icon.icon_url) {
+      throw new Error('No SVG URL available for this icon');
+    }
+    
+    // Download SVG
+    const svgContent = await downloadIconSvg(icon.icon_url);
+    
+    // Convert to Vue component
+    const vueComponent = convertSvgToVueComponent(svgContent, iconName);
+    
+    // Determine file path
+    const categoryPath = path.join(__dirname, category);
+    const filePath = path.join(categoryPath, `${iconName}.vue`);
+    
+    // Ensure directory exists
+    if (!fs.existsSync(categoryPath)) {
+      fs.mkdirSync(categoryPath, { recursive: true });
+    }
+    
+    // If replacing, delete old file if name is different
+    if (mode === 'replace' && currentIconName && currentIconName !== iconName) {
+      const oldFilePath = path.join(categoryPath, `${currentIconName}.vue`);
+      if (fs.existsSync(oldFilePath)) {
+        fs.unlinkSync(oldFilePath);
+      }
+    }
+    
+    // Save file
+    fs.writeFileSync(filePath, vueComponent);
+    
+    return {
+      success: true,
+      filePath: filePath.replace(__dirname, ''),
+      content: vueComponent,
+      iconData: {
+        name: iconName,
+        category,
+        originalName: icon.term,
+        attribution: icon.attribution
+      }
+    };
+  } catch (error) {
+    console.error('Error saving icon:', error);
+    throw error;
+  }
+}
+
+// Module initialization
+function initializeIcons(app, db, origins, publicPath, options = {}) {
+  console.log('initializeIcons publicPath:', publicPath);
+  
+  // Setup routes if app object is provided
+  if (app) {
+    iconsRoutes(app, db, origins, publicPath);
+  }
+}
+
+export const routes = {
+  iconsRoutes
+};
+
+export { initializeIcons as initialize };
+
+export default {
+  initialize: initializeIcons,
+  routes
+};

package/src/modules/icons/navigation/IconCross.vue

@@ -1,20 +1,9 @@
 <template>
-	<svg 
-		width="26"
-		height="26" 
-		viewBox="0 0 26 26" 
-		fill="none" 
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path 
-			:fill="fill"
-			fill-rule="evenodd" 
-			clip-rule="evenodd" 
-			d="M12.9996 10.8L22.8994 0.900244L25.0993 3.1002L15.1995 13L25.0993 22.8998L22.8994 25.0998L12.9996 15.2L3.09976 25.0998L0.899801 22.8998L10.7996 13L0.899801 3.1002L3.09976 0.900244L12.9996 10.8Z"/>
-	</svg>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<path :fill="fill" d="m22.055 22.055c1.625-1.6289 4.2656-1.6289 5.8906 0l22.055 22.055 22.055-22.055c1.625-1.6289 4.2656-1.6289 5.8906 0 1.6289 1.625 1.6289 4.2656 0 5.8906l-22.055 22.055 22.055 22.055c1.6289 1.625 1.6289 4.2656 0 5.8906-1.625 1.6289-4.2656 1.6289-5.8906 0l-22.055-22.055-22.055 22.055c-1.625 1.6289-4.2656 1.6289-5.8906 0-1.6289-1.625-1.6289-4.2656 0-5.8906l22.055-22.055-22.055-22.055c-1.6289-1.625-1.6289-4.2656 0-5.8906z"/>
+</svg>
 </template>
 
-
 <script setup>
 	const props = defineProps({
 	  fill: {
@@ -22,5 +11,4 @@
 	    default: 'rgb(var(--black))'
 	  }
 	})
-</script>
-
+</script>

package/src/modules/icons/navigation/IconPause.vue

@@ -1,29 +1,14 @@
 <template>
-	<svg 
-    width="19" 
-    height="15" 
-    viewBox="0 0 19 15" 
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path 
-			:fill="fill"
-      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
-    />
-    <path 
-      :fill="fill"
-      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
-    />
-  </svg>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<path :fill="fill" d="m59.461 100c-1.7266 0-3.125-1.4023-3.125-3.125v-93.75c0-1.7266 1.3984-3.125 3.125-3.125h21.785-0.003906c0.82812 0 1.625 0.32812 2.2109 0.91406 0.58594 0.58594 0.91406 1.3828 0.91406 2.2109v93.75c0 0.82812-0.32813 1.6211-0.91406 2.207-0.58594 0.58594-1.3828 0.91797-2.2109 0.91797zm3.125-6.25h15.531v-87.5h-15.531zm-43.828 6.25h-0.003906c-1.7227 0-3.125-1.4023-3.125-3.125v-93.75c0-1.7266 1.4023-3.125 3.125-3.125h21.895c0.83203 0 1.625 0.32812 2.2109 0.91406 0.58594 0.58594 0.91406 1.3828 0.91406 2.2109v93.75c0 0.82812-0.32813 1.6211-0.91406 2.207-0.58594 0.58594-1.3789 0.91797-2.2109 0.91797zm3.125-6.25h15.645l-0.003906-87.5h-15.645z"/>
+</svg>
 </template>
 
 <script setup>
 	const props = defineProps({
-  fill: {
-    type: String,
-    default: 'rgb(var(--black))'
-  },
-})
-</script>
-
-
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/navigation/IconRefresh.vue

@@ -1,29 +1,14 @@
 <template>
-	<svg 
-    width="19" 
-    height="15" 
-    viewBox="0 0 19 15" 
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path 
-			:fill="fill"
-      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
-    />
-    <path 
-      :fill="fill"
-      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
-    />
-  </svg>
+<svg width="100pt" height="100pt" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<path :fill="fill" d="m87.5 50c0.019531 9.9492-3.9414 19.488-11 26.5-0.76953 0.78516-1.8164 1.2344-2.918 1.25-1.5664-0.13672-2.9219-1.1484-3.5039-2.6094-0.58203-1.4648-0.28906-3.1289 0.75391-4.3086 5.4648-5.3359 8.6133-12.605 8.7734-20.242 0.16016-7.6367-2.6797-15.031-7.9102-20.594-5.2344-5.5625-12.438-8.8555-20.07-9.1641l1.582 1.582v0.003907c1.625 1.6328 1.6133 4.2734-0.019531 5.8945s-4.2734 1.6133-5.8945-0.019531l-8.8359-8.75c-1.6133-1.625-1.6133-4.25 0-5.875l8.8359-8.8359c0.78125-0.78906 1.8477-1.2305 2.957-1.2305s2.1758 0.44141 2.957 1.2305c1.6172 1.625 1.6172 4.25 0 5.875l-1.875 1.793c9.7148 0.34375 18.914 4.4492 25.66 11.445 6.7461 6.9961 10.516 16.336 10.508 26.055zm-34.793 21.75c-0.78125-0.78906-1.8477-1.2344-2.957-1.2344s-2.1758 0.44531-2.957 1.2344c-1.6172 1.625-1.6172 4.25 0 5.875l1.457 1.457c-7.5117-0.45703-14.555-3.8008-19.66-9.332-5.1016-5.5312-7.8711-12.82-7.7227-20.344 0.14453-7.5273 3.1953-14.703 8.5078-20.031 1.4141-1.6523 1.3203-4.1172-0.21875-5.6562s-4.0039-1.6328-5.6562-0.21875c-6.9336 6.9336-10.879 16.305-10.984 26.109-0.10938 9.8047 3.6289 19.262 10.41 26.344s16.066 11.227 25.867 11.547l-2 1.957c-1.625 1.6367-1.6133 4.2734 0.019531 5.8984 1.6328 1.6211 4.2734 1.6133 5.8945-0.023438l8.832-8.832h0.003907c1.6133-1.625 1.6133-4.25 0-5.875z"/>
+</svg>
 </template>
 
 <script setup>
 	const props = defineProps({
-  fill: {
-    type: String,
-    default: 'rgb(var(--black))'
-  },
-})
-</script>
-
-
+	  fill: {
+	    type: String,
+	    default: 'rgb(var(--black))'
+	  }
+	})
+</script>

package/src/modules/icons/pages/IconsPage.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="pd-medium">
-    <h2 class="mn-b-medium">Martyrs Icons Gallery</h2>
+    <div class="flex-between mn-b-medium">
+      <h2>Martyrs Icons Gallery</h2>
+      <button @click="openAddIconPopup" class="pd-small pd-h-medium bg-primary t-white radius-medium hover-scale-1 cursor-pointer border-none">
+        Add New Icon
+      </button>
+    </div>
     
     <div v-for="(category, index) in categories" :key="index" class="mn-b-large">
       <h3 class="mn-b-medium t-medium">{{ formatCategoryName(category.name) }} ({{ category.icons.length }})</h3>
@@ -8,7 +13,7 @@
         <div 
           v-for="(icon, iconIndex) in category.icons" 
           :key="iconIndex" 
-          class="aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer"
+          class="icon-card aspect-1x1 bg-light radius-medium flex-center flex-v-center flex-column flex hover-scale-1 cursor-pointer pos-relative"
           @click="copyIconName(icon.name, category.name)"
         >
           <div class="flex-center flex h-60">
@@ -20,6 +25,13 @@
           <div v-if="copiedIcon === icon.name" class="pd-thin bg-black radius-small t-small t-white pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin">
             Copied!
           </div>
+          <button 
+            @click.stop="openReplaceIconPopup(icon, category.name)"
+            class="replace-btn pos-absolute pos-t-0 pos-r-0 mn-t-thin mn-r-thin pd-micro bg-second radius-small hover-scale-1 cursor-pointer border-none"
+            title="Replace icon"
+          >
+            <IconRefresh class="w-1r h-1r" :fill="'rgb(var(--white))'" />
+          </button>
         </div>
       </div>
     </div>
@@ -27,11 +39,20 @@
     <div v-if="displayNotification" class="notification bg-third pd-small radius-medium pos-fixed pos-b-0 pos-r-0 mn-b-large mn-r-large">
       {{ notificationMessage }}
     </div>
+
+    <IconSearchPopup 
+      :isOpen="showSearchPopup" 
+      :mode="popupMode"
+      :currentIcon="currentIconForReplace"
+      @close="showSearchPopup = false"
+      @icon-selected="handleIconSelected"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import IconSearchPopup from '../components/IconSearchPopup.vue';
 
 // Import navigation icons
 import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue';
@@ -92,6 +113,9 @@ import IconFeatured from '@martyrs/src/modules/icons/entities/IconFeatured.vue';
 import IconLeftovers from '@martyrs/src/modules/icons/entities/IconLeftovers.vue';
 import IconOrders from '@martyrs/src/modules/icons/entities/IconOrders.vue';
 import IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';
+import IconPhone from '@martyrs/src/modules/icons/entities/IconPhone.vue';
+import IconEmail from '@martyrs/src/modules/icons/entities/IconEmail.vue';
+import IconAddress from '@martyrs/src/modules/icons/entities/IconAddress.vue';
 import IconProfile from '@martyrs/src/modules/icons/entities/IconProfile.vue';
 import IconGroups from '@martyrs/src/modules/icons/entities/IconGroups.vue';
 
@@ -184,6 +208,9 @@ const iconsMap = {
     IconRecent,
     IconList,
     IconSettings,
+    IconPhone,
+    IconEmail,
+    IconAddress,
     IconEarn,
     IconPopular,
     IconDiscount,
@@ -237,6 +264,9 @@ const categories = ref([]);
 const copiedIcon = ref('');
 const displayNotification = ref(false);
 const notificationMessage = ref('');
+const showSearchPopup = ref(false);
+const popupMode = ref('add');
+const currentIconForReplace = ref(null);
 
 onMounted(() => {
   loadIcons();
@@ -271,6 +301,37 @@ function copyIconName(iconName, categoryName) {
     }, 2000);
   }, 1000);
 }
+
+function openAddIconPopup() {
+  popupMode.value = 'add';
+  currentIconForReplace.value = null;
+  showSearchPopup.value = true;
+}
+
+function openReplaceIconPopup(icon, categoryName) {
+  popupMode.value = 'replace';
+  currentIconForReplace.value = {
+    name: icon.name,
+    category: categoryName,
+    component: icon.component
+  };
+  showSearchPopup.value = true;
+}
+
+function handleIconSelected(data) {
+  // Reload icons after successful save
+  loadIcons();
+  
+  // Show success notification
+  notificationMessage.value = data.mode === 'add' 
+    ? `Added new icon: ${data.icon.name}` 
+    : `Replaced icon: ${data.icon.name}`;
+  displayNotification.value = true;
+  
+  setTimeout(() => {
+    displayNotification.value = false;
+  }, 3000);
+}
 </script>
 
 <style scoped>
@@ -289,4 +350,19 @@ function copyIconName(iconName, categoryName) {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
 }
+
+.icon-card .replace-btn {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.icon-card:hover .replace-btn {
+  opacity: 1;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>

package/src/modules/icons/routes/icons.routes.js

@@ -0,0 +1,81 @@
+import { searchIcons, getIconById, downloadIconSvg, convertSvgToVueComponent, saveIconToDisk } from '../icons.server.js';
+
+export default function iconsRoutes(app, db, origins, publicPath) {
+  // Search icons endpoint with pagination
+  app.post('/api/icons/search', async (req, res) => {
+    try {
+      const { 
+        search: term, 
+        limit = 20, 
+        skip = 0,
+        next_page,
+        prev_page 
+      } = req.body;
+
+      if (!term) {
+        return res.status(400).json({ error: 'Search term is required' });
+      }
+
+      // Remove "Icon" prefix from search term
+      const cleanTerm = term.replace(/^Icon/i, '').trim();
+      
+      // Для skip-based пагинации запрашиваем больше результатов
+      const requestLimit = skip > 0 ? limit + skip : limit;
+      
+      let searchParams = { limit: requestLimit };
+      
+      if (next_page) {
+        searchParams.next_page = next_page;
+      } else if (prev_page) {
+        searchParams.prev_page = prev_page;
+      }
+
+      const response = await searchIcons(cleanTerm, searchParams);
+      
+      let icons = response.icons || [];
+      
+      // Применяем skip и limit к результатам
+      if (skip > 0) {
+        icons = icons.slice(skip);
+      }
+      if (icons.length > limit) {
+        icons = icons.slice(0, limit);
+      }
+
+      res.json({
+        success: true,
+        icons: icons.map(icon => ({
+          id: icon.id,
+          term: icon.term,
+          preview_url: icon.thumbnail_url || icon.preview_url_84 || icon.preview_url_42,
+          attribution: icon.attribution
+        })),
+        pagination: {
+          next_page: response.next_page || null,
+          prev_page: response.prev_page || null,
+          total: response.total || icons.length
+        }
+      });
+    } catch (error) {
+      console.error('Error searching icons:', error);
+      res.status(500).json({ error: error.message });
+    }
+  });
+
+  // Save icon endpoint
+  app.post('/api/icons/save', async (req, res) => {
+    try {
+      const { iconId, category, iconName, mode = 'add', currentIconName } = req.body;
+
+      if (!iconId || !category || !iconName) {
+        return res.status(400).json({ error: 'iconId, category, and iconName are required' });
+      }
+
+      const result = await saveIconToDisk(iconId, category, iconName, mode, currentIconName);
+      res.json(result);
+    } catch (error) {
+      console.error('Error saving icon:', error);
+      res.status(500).json({ error: error.message });
+    }
+  });
+}

package/src/modules/icons/socials/dribbble.vue

@@ -1,3 +1,12 @@
 <template>
-	<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m35.7603 19.144c-.1629-3.1482-1.2512-6.1768-3.1269-8.702-.5715.6193-1.1824 1.2005-1.8289 1.74-1.9861 1.6597-4.2054 3.0144-6.5859 4.02.332.7.6361 1.378.9045 2.018v.006c.0757.1788.1486.3588.2186.54 3.0097-.34 6.1824-.216 9.2577.202.4095.056.7952.116 1.1609.176zm-18.6564-14.9c1.9373 2.74635 3.7238 5.59727 5.3514 8.54 2.4312-.964 4.441-2.18 6.0591-3.534.5617-.46574 1.0905-.97029 1.5824-1.51-2.8606-2.42057-6.4799-3.74534-10.2178-3.74-.9303-.00064-1.8588.08033-2.7751.242zm-12.62516 11.75c1.35421-.0344 2.70681-.1164 4.05531-.246 3.25945-.2933 6.49105-.843 9.66515-1.644-1.6589-2.8996-3.4499-5.72058-5.3673-8.454-2.0481 1.02079-3.85403 2.47282-5.29529 4.25758-1.44125 1.78472-2.48412 3.86052-3.05787 6.08642zm3.04149 14.076c.7713-1.134 1.78513-2.41 3.13097-3.798 2.8904-2.98 6.3016-5.3 10.2496-6.58l.1232-.036c-.328-.728-.6361-1.378-.9462-1.99-3.6498 1.07-7.4944 1.738-11.32508 2.084-1.86862.17-3.54442.244-4.77692.256-.00352 3.6652 1.24899 7.2195 3.54641 10.064zm18.33237 4.76c-.7666-3.8895-1.8517-7.7085-3.2442-11.418-3.9798 1.454-7.1505 3.58-9.6016 6.116-.9891 1.0048-1.867 2.1146-2.618 3.31 2.7409 2.0576 6.0704 3.1669 9.4902 3.162 2.0474.003 4.0759-.393 5.9736-1.166zm3.7234-2.15c3.1036-2.4005 5.2179-5.8686 5.9378-9.74-.6759-.17-1.5326-.34-2.4749-.472-2.095-.3035-4.2207-.3257-6.3215-.066 1.1829 3.3577 2.138 6.7922 2.8586 10.28zm-9.697 7.32c-10.97917 0-19.879-8.954-19.879-20s8.89983-20 19.879-20c10.9792 0 19.879 8.954 19.879 20s-8.8998 20-19.879 20z" fill="#fff"/></svg>
-</template>
+	<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m35.7603 19.144c-.1629-3.1482-1.2512-6.1768-3.1269-8.702-.5715.6193-1.1824 1.2005-1.8289 1.74-1.9861 1.6597-4.2054 3.0144-6.5859 4.02.332.7.6361 1.378.9045 2.018v.006c.0757.1788.1486.3588.2186.54 3.0097-.34 6.1824-.216 9.2577.202.4095.056.7952.116 1.1609.176zm-18.6564-14.9c1.9373 2.74635 3.7238 5.59727 5.3514 8.54 2.4312-.964 4.441-2.18 6.0591-3.534.5617-.46574 1.0905-.97029 1.5824-1.51-2.8606-2.42057-6.4799-3.74534-10.2178-3.74-.9303-.00064-1.8588.08033-2.7751.242zm-12.62516 11.75c1.35421-.0344 2.70681-.1164 4.05531-.246 3.25945-.2933 6.49105-.843 9.66515-1.644-1.6589-2.8996-3.4499-5.72058-5.3673-8.454-2.0481 1.02079-3.85403 2.47282-5.29529 4.25758-1.44125 1.78472-2.48412 3.86052-3.05787 6.08642zm3.04149 14.076c.7713-1.134 1.78513-2.41 3.13097-3.798 2.8904-2.98 6.3016-5.3 10.2496-6.58l.1232-.036c-.328-.728-.6361-1.378-.9462-1.99-3.6498 1.07-7.4944 1.738-11.32508 2.084-1.86862.17-3.54442.244-4.77692.256-.00352 3.6652 1.24899 7.2195 3.54641 10.064zm18.33237 4.76c-.7666-3.8895-1.8517-7.7085-3.2442-11.418-3.9798 1.454-7.1505 3.58-9.6016 6.116-.9891 1.0048-1.867 2.1146-2.618 3.31 2.7409 2.0576 6.0704 3.1669 9.4902 3.162 2.0474.003 4.0759-.393 5.9736-1.166zm3.7234-2.15c3.1036-2.4005 5.2179-5.8686 5.9378-9.74-.6759-.17-1.5326-.34-2.4749-.472-2.095-.3035-4.2207-.3257-6.3215-.066 1.1829 3.3577 2.138 6.7922 2.8586 10.28zm-9.697 7.32c-10.97917 0-19.879-8.954-19.879-20s8.89983-20 19.879-20c10.9792 0 19.879 8.954 19.879 20s-8.8998 20-19.879 20z" :fill="fill"/></svg>
+</template>
+
+<script setup>
+    const props = defineProps({
+      fill: {
+        type: String,
+        default: 'rgb(var(--black))'
+      }
+    })
+</script>

package/src/modules/icons/socials/facebook.vue

@@ -1,3 +1,12 @@
 <template>
-	<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m20 0c-11.046 0-20 9.0085-20 20.1217 0 10.0428 7.314 18.3672 16.876 19.8783v-14.0631h-5.08v-5.8152h5.08v-4.4328c0-5.0425 2.984-7.82734 7.554-7.82734 2.188 0 4.476.39238 4.476.39238v4.94996h-2.52c-2.486 0-3.26 1.5514-3.26 3.143v3.7748h5.546l-.886 5.8152h-4.66v14.0631c9.56-1.5091 16.874-9.8375 16.874-19.8783 0-11.1132-8.954-20.1217-20-20.1217z" fill="#fff"/></svg>
-</template>
+	<svg fill="none" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><path d="m20 0c-11.046 0-20 9.0085-20 20.1217 0 10.0428 7.314 18.3672 16.876 19.8783v-14.0631h-5.08v-5.8152h5.08v-4.4328c0-5.0425 2.984-7.82734 7.554-7.82734 2.188 0 4.476.39238 4.476.39238v4.94996h-2.52c-2.486 0-3.26 1.5514-3.26 3.143v3.7748h5.546l-.886 5.8152h-4.66v14.0631c9.56-1.5091 16.874-9.8375 16.874-19.8783 0-11.1132-8.954-20.1217-20-20.1217z" :fill="fill"/></svg>
+</template>
+
+<script setup>
+    const props = defineProps({
+      fill: {
+        type: String,
+        default: 'rgb(var(--black))'
+      }
+    })
+</script>