@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/svgToCss/i18n/de.ts

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'svg-zu-css-konverter';
+const title = 'Kostenloser Online SVG zu CSS und Data URI Konverter';
+const description =
+  'Verwandeln Sie Ihre SVG-Icons und Vektoren in CSS-Code (Background oder Mask) oder komprimierte Data-URIs. Optimieren Sie die Performance Ihrer Website durch Vermeidung externer HTTP-Anfragen.';
+
+const faqData = [
+  {
+    question: 'Ist es besser, eine Data-URI oder eine externe .svg-Datei zu verwenden?',
+    answer:
+      'Das hängt vom Anwendungsfall ab. Data-URIs eliminieren HTTP-Anfragen (ideal für kleine Icons), vergrößern jedoch die CSS-Datei. Für große oder detailreiche Illustrationen ist eine externe Datei vorzuziehen.',
+  },
+  {
+    question: 'Wie ändere ich die Farbe eines in CSS eingebetteten SVGs?',
+    answer:
+      'Der beste Weg ist über „mask-image“. Indem Sie das SVG als Maske definieren, können Sie die „background-color“ verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
+  },
+  {
+    question: 'Welche Browser unterstützen CSS-Masken?',
+    answer:
+      'Alle modernen Browser (Chrome, Firefox, Safari, Edge) bieten volle Unterstützung. Für ältere Browser werden häufig -webkit-Präfixe verwendet.',
+  },
+  {
+    question: 'Beeinflusst die Verwendung von Data-URIs die SEO?',
+    answer:
+      'Ja, positiv. Durch die Reduzierung der Anzahl der Anfragen, die zum Rendern der Seite benötigt werden, verbessert sich die Ladezeit (LCP) und die Core Web Vitals-Werte.',
+  },
+  {
+    question: 'Kann ich es in Frameworks wie React oder Tailwind verwenden?',
+    answer:
+      'Absolut! Sie können den generierten Code kopieren und in Ihren .css-Dateien oder sogar als beliebige Werte in Tailwind CSS verwenden.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'SVG einfügen',
+    text: 'Kopieren Sie den Quellcode Ihrer SVG-Datei und fügen Sie ihn in das Textfeld auf der linken Seite ein.',
+  },
+  {
+    name: 'Ausgabetyp wählen',
+    text: 'Wählen Sie zwischen Background Image (für statische Hintergründe), CSS Mask (für Icons mit dynamischer Farbe) oder Data URI Only (zur direkten Verwendung).',
+  },
+  {
+    name: 'Ergebnis kopieren',
+    text: 'Klicken Sie auf „Kopieren“, um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
+  },
+  {
+    name: 'In Ihr Projekt übernehmen',
+    text: 'Fügen Sie den Code in Ihr Stylesheet oder Ihre CSS-Komponente ein. Bei Masken fügen Sie zusätzlich background-color hinzu, um die Icon-Farbe zu definieren.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'de',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'SVG einfügen',
+  labelInputArea: 'SVG Quellcode',
+  labelPreviewOriginal: 'Original Vorschau',
+  labelResultTitle: 'CSS Ergebnis',
+  labelPreviewApplied: 'Angewandtes Ergebnis',
+  tabBackground: 'Background Image',
+  tabMask: 'CSS Mask / Webkit',
+  tabUri: 'Nur Data URI',
+  btnCopy: 'Kopieren',
+  btnCopied: 'Kopiert!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenzen und Dokumentation',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Using SVG as Background',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Warum SVG in CSS Data URI konvertieren?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'In der modernen Webentwicklung ist die Optimierung von Performance und Ressourcen-Ladezeiten essenziell. Das direkte Einbetten von Icons in CSS via <strong>Data URIs</strong> eliminiert unnötige HTTP-Anfragen, reduziert Latenzen und verbessert den Time to Interactive (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Dieses Tool transformiert <code>&lt;svg&gt;</code> Vektor-Code in einen kodierten Text-String, den der Browser als Hintergrundbild oder Maske interpretieren kann. Dabei bleiben die unendliche Skalierbarkeit und die Schärfe von Vektoren erhalten.',
+    },
+    {
+      type: 'title',
+      text: 'Wichtige technische Vorteile',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Null HTTP-Anfragen:</strong> Durch das Einbetten der Grafiken in Ihre <code>.css</code>-Dateien muss der Browser keine zusätzlichen externen Dateien herunterladen.',
+        '<strong>Anpassung via CSS-Maske:</strong> Mit der <code>mask-image</code>-Technik können Sie die Farbe eines komplexen Vektor-Icons einfach über <code>background-color</code> ändern.',
+        '<strong>Sofortiges Rendering:</strong> Sie vermeiden Content-Flackern (FOUC), da kritische visuelle Ressourcen sofort verfügbar sind, sobald das Stylesheet geladen ist.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS Masken vs. Hintergründe',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Viele Entwickler nutzen einfach <code>background-image</code>, um Vektoren einzubetten, was jedoch eine Einschränkung hat: Die Farbe des SVGs kann nicht dynamisch über CSS geändert werden.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Unser Tool unterstützt die Code-Generierung für <strong>CSS Masken</strong>. Durch Anwendung einer <code>mask-image</code> mit der generierten Data-URI fungiert das Icon als Schablone, wodurch die <code>background-color</code> des Elements die endgültige Farbe definiert. Dies ist der professionellste Weg, Icons in Astro, Next.js oder anderen modernen Frameworks zu verwalten.',
+    },
+  ],
+};

package/src/tool/svgToCss/i18n/id.ts

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'konverter-svg-ke-css';
+const title = 'Konverter SVG ke CSS dan Data URI Online Gratis';
+const description =
+  'Ubah ikon dan vektor SVG Anda menjadi kode CSS (Background atau Mask) atau Data URI terkompresi. Optimalkan performa situs web Anda dengan menghilangkan permintaan HTTP eksternal.';
+
+const faqData = [
+  {
+    question: 'Mana yang lebih baik, menggunakan Data URI atau file .svg eksternal?',
+    answer:
+      'Tergantung pada kasus penggunaan. Data URI menghilangkan permintaan HTTP (ideal untuk ikon kecil), tetapi menambah ukuran file CSS. Untuk ilustrasi besar atau kaya detail, file eksternal lebih disukai.',
+  },
+  {
+    question: 'Bagaimana cara mengubah warna SVG yang tertanam di CSS?',
+    answer:
+      "Cara terbaik adalah melalui 'mask-image'. Dengan mendefinisikan SVG sebagai masker, Anda dapat menggunakan 'background-color' untuk mengubah warnanya secara dinamis, bahkan dalam status :hover.",
+  },
+  {
+    question: 'Browser mana yang mendukung CSS Masks?',
+    answer:
+      'Semua browser modern (Chrome, Firefox, Safari, Edge) memiliki dukungan penuh. Untuk browser lama, awalan -webkit- umum digunakan.',
+  },
+  {
+    question: 'Apakah menggunakan Data URI mempengaruhi SEO?',
+    answer:
+      'Ya, secara positif. Dengan mengurangi jumlah permintaan yang diperlukan untuk merender halaman, ini meningkatkan waktu pemuatan (LCP) dan skor Core Web Vitals.',
+  },
+  {
+    question: 'Dapatkah saya menggunakannya di framework seperti React atau Tailwind?',
+    answer:
+      'Tentu saja! Anda dapat menyalin kode yang dihasilkan dan menggunakannya dalam file .css Anda atau bahkan sebagai nilai arbitrer di Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tempel SVG',
+    text: 'Salin kode sumber file SVG Anda dan tempelkan ke area teks di sebelah kiri.',
+  },
+  {
+    name: 'Pilih jenis output',
+    text: 'Pilih antara Gambar Latar Belakang (untuk latar belakang statis), CSS Mask (untuk ikon dengan warna dinamis), atau Hanya Data URI (untuk penggunaan langsung).',
+  },
+  {
+    name: 'Salin hasilnya',
+    text: 'Klik "Salin" untuk mengambil kode CSS yang dihasilkan ke papan klip Anda.',
+  },
+  {
+    name: 'Terapkan di proyek Anda',
+    text: 'Tempelkan kode ke dalam stylesheet atau komponen CSS Anda. Untuk Mask, tambahkan juga background-color untuk menentukan warna ikon.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'id',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Tempel SVG',
+  labelInputArea: 'Kode Sumber SVG',
+  labelPreviewOriginal: 'Pratinjau Asli',
+  labelResultTitle: 'Hasil CSS',
+  labelPreviewApplied: 'Hasil Terapan',
+  tabBackground: 'Gambar Latar Belakang',
+  tabMask: 'CSS Mask / Webkit',
+  tabUri: 'Hanya Data URI',
+  btnCopy: 'Salin',
+  btnCopied: 'Tersalin!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan yang Sering Diajukan',
+  faq: faqData,
+  bibliographyTitle: 'Referensi dan Dokumentasi',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Menggunakan SVG sebagai Latar Belakang',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Mengapa Mengonversi SVG ke CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Dalam pengembangan web modern, mengoptimalkan performa dan pemuatan sumber daya sangatlah penting. Menanamkan ikon secara langsung di CSS melalui <strong>Data URI</strong> menghilangkan permintaan HTTP yang tidak perlu, mengurangi latensi, dan meningkatkan Time to Interactive (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Alat ini mengubah kode vektor <code>&lt;svg&gt;</code> menjadi string teks terenkripsi yang dapat diinterpretasikan oleh browser sebagai gambar latar belakang atau masker kliping, dengan tetap mempertahankan skalabilitas tak terbatas dan ketajaman karakteristik vektor.',
+    },
+    {
+      type: 'title',
+      text: 'Manfaat Teknis Utama',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Nol Permintaan HTTP:</strong> Dengan menanamkan grafis di file <code>.css</code> Anda, browser tidak perlu mengunduh file eksternal tambahan.',
+        '<strong>Kustomisasi melalui CSS Mask:</strong> Menggunakan teknik <code>mask-image</code>, Anda dapat mengubah warna ikon vektor yang kompleks hanya dengan menggunakan <code>background-color</code>.',
+        '<strong>Perenderan Instan:</strong> Anda menghindari kedipan konten (FOUC) karena sumber daya visual kritis tersedia segera setelah stylesheet diunduh.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS Masks vs Latar Belakang',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Banyak pengembang hanya menggunakan <code>background-image</code> untuk menanamkan vektor, tetapi ini memiliki batasan: Anda tidak dapat mengubah warna SVG secara dinamis dari CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Utilitas kami mendukung pembuatan kode untuk <strong>CSS Masks</strong>. Dengan menerapkan <code>mask-image</code> dengan Data URI yang dihasilkan, ikon bertindak sebagai stensil, memungkinkan <code>background-color</code> elemen untuk menentukan warna ikon akhir. Ini adalah cara paling profesional dan fleksibel untuk mengelola ikon di Astro, Next.js, atau framework modern lainnya.',
+    },
+  ],
+};

package/src/tool/svgToCss/i18n/it.ts

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'convertitore-svg-in-css';
+const title = 'Convertitore Online gratuito da SVG a CSS e Data URI';
+const description =
+  'Trasforma i tuoi grafici vettoriali e icone SVG in codice CSS (Background o Mask) o in Data URI compressi. Ottimizza le prestazioni del tuo sito web eliminando le richieste HTTP esterne.';
+
+const faqData = [
+  {
+    question: 'È meglio usare un Data URI o un file .svg esterno?',
+    answer:
+      'Dipende dal caso d\'uso. I Data URI eliminano le richieste HTTP (ideale per piccole icone), ma aumentano le dimensioni del file CSS. Per illustrazioni grandi o ricche di dettagli, è preferibile un file esterno.',
+  },
+  {
+    question: 'Come posso cambiare il colore di un SVG incorporato nel CSS?',
+    answer:
+      'Il modo migliore è tramite "mask-image". Definendo l\'SVG come maschera, puoi usare "background-color" per cambiarne il colore dinamicamente, anche negli stati :hover.',
+  },
+  {
+    question: 'Quali browser supportano le CSS Masks?',
+    answer:
+      'Tutti i browser moderni (Chrome, Firefox, Safari, Edge) hanno il pieno supporto. Per i browser più vecchi, vengono comunemente usati i prefissi -webkit-.',
+  },
+  {
+    question: 'L\'uso dei Data URI influisce sulla SEO?',
+    answer:
+      'Sì, positivamente. Riducendo il numero di richieste necessarie per il rendering della pagina, migliora il tempo di caricamento (LCP) e i punteggi dei Core Web Vitals.',
+  },
+  {
+    question: 'Posso usarlo in framework come React o Tailwind?',
+    answer:
+      'Assolutamente! Puoi copiare il codice generato e usarlo nei tuoi file .css o anche come valori arbitrari in Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Incolla l\'SVG',
+    text: 'Copia il codice sorgente del tuo file SVG e incollalo nell\'area di testo a sinistra.',
+  },
+  {
+    name: 'Scegli il tipo di output',
+    text: 'Seleziona tra Immagine di Sfondo (per sfondi statici), Maschera CSS (per icone con colore dinamico) o Solo Data URI (per uso diretto).',
+  },
+  {
+    name: 'Copia il risultato',
+    text: 'Fai clic su "Copia" per portare il codice CSS generato nei tuoi appunti.',
+  },
+  {
+    name: 'Applica nel tuo progetto',
+    text: 'Incolla il codice nel tuo foglio di stile o componente CSS. Per le maschere, aggiungi anche background-color per definire il colore dell\'icona.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'it',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Incolla SVG',
+  labelInputArea: 'Codice Sorgente SVG',
+  labelPreviewOriginal: 'Anteprima Originale',
+  labelResultTitle: 'Risultato CSS',
+  labelPreviewApplied: 'Risultato Applicato',
+  tabBackground: 'Immagine di Sfondo',
+  tabMask: 'CSS Mask / Webkit',
+  tabUri: 'Solo Data URI',
+  btnCopy: 'Copia',
+  btnCopied: 'Copiato!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e Documentazione',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Usare SVG come Sfondo',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/it/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/it/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Perché Convertire SVG in CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nello sviluppo web moderno, ottimizzare le prestazioni e il caricamento delle risorse è essenziale. Incorporare le icone direttamente nel CSS tramite <strong>Data URI</strong> elimina le richieste HTTP non necessarie, riducendo la latenza e migliorando il Time to Interactive (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Questo strumento trasforma il codice vettoriale <code>&lt;svg&gt;</code> in una stringa di testo codificata che il browser può interpretare come immagine di sfondo o maschera di ritaglio, mantenendo la scalabilità infinita e la nitidezza tipica dei vettori.',
+    },
+    {
+      type: 'title',
+      text: 'Principali Vantaggi Tecnici',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Zero Richieste HTTP:</strong> Incorporando la grafica nei tuoi file <code>.css</code>, il browser non ha bisogno di scaricare ulteriori file esterni.',
+        '<strong>Personalizzazione tramite CSS Mask:</strong> Usando la tecnica <code>mask-image</code>, puoi cambiare il colore di un\'icona vettoriale complessa semplicemente usando <code>background-color</code>.',
+        '<strong>Rendering Immediato:</strong> Eviti lo sfarfallio dei contenuti (FOUC) poiché le risorse visive critiche sono disponibili non appena il foglio di stile viene scaricato.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS Mask vs Sfondi',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Molti sviluppatori usano semplicemente <code>background-image</code> per incorporare vettori, ma questo ha un limite: non è possibile cambiare il colore dell\'SVG dinamicamente dal CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'La nostra utility supporta la generazione di codice per <strong>CSS Mask</strong>. Applicando una <code>mask-image</code> con il Data URI generato, l\'icona funge da stencil, permettendo al <code>background-color</code> dell\'elemento di definire il colore finale dell\'icona. È il modo più professionale e flessibile per gestire le icone in Astro, Next.js o qualsiasi framework moderno.',
+    },
+  ],
+};