@jjlmoya/utils-developer 1.4.0 → 1.5.0

package/src/tool/svgToCss/i18n/pl.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 = 'konwerter-svg-na-css';
+const title = 'Darmowy konwerter SVG na CSS i Data URI online';
+const description =
+  'Przekształć swoje ikony i wektory SVG w kod CSS (Background lub Mask) lub skompresowany Data URI. Zoptymalizuj wydajność swojej strony internetowej, eliminując zewnętrzne żądania HTTP.';
+
+const faqData = [
+  {
+    question: 'Czy lepiej jest używać Data URI czy zewnętrznego pliku .svg?',
+    answer:
+      'To zależy od przypadku użycia. Data URI eliminują żądania HTTP (idealne dla małych ikon), ale zwiększają rozmiar pliku CSS. W przypadku dużych lub bogatych w szczegóły ilustracji preferowany jest plik zewnętrzny.',
+  },
+  {
+    question: 'Jak zmienić kolor obrazu SVG osadzonego w CSS?',
+    answer:
+      "Najlepszym sposobem jest użycie 'mask-image'. Definiując SVG jako maskę, możesz użyć 'background-color', aby dynamicznie zmieniać jego kolor, nawet w stanach :hover.",
+  },
+  {
+    question: 'Które przeglądarki obsługują maski CSS?',
+    answer:
+      'Wszystkie nowoczesne przeglądarki (Chrome, Firefox, Safari, Edge) mają pełne wsparcie. W przypadku starszych przeglądarek powszechnie stosuje się prefiksy -webkit-.',
+  },
+  {
+    question: 'Czy używanie Data URI wpływa na SEO?',
+    answer:
+      'Tak, pozytywnie. Zmniejszając liczbę żądań potrzebnych do wyrenderowania strony, poprawia czas ładowania (LCP) i wyniki Core Web Vitals.',
+  },
+  {
+    question: 'Czy mogę go używać w frameworkach takich jak React czy Tailwind?',
+    answer:
+      'Oczywiście! Możesz skopiować wygenerowany kod i użyć go w swoich plikach .css lub nawet jako dowolne wartości w Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Wklej SVG',
+    text: 'Skopiuj kod źródłowy pliku SVG i wklej go w polu tekstowym po lewej stronie.',
+  },
+  {
+    name: 'Wybierz typ wyjściowy',
+    text: 'Wybierz między tłem (Background Image dla statycznego tła), maską CSS (CSS Mask dla ikon z dynamicznym kolorem) lub samym Data URI (do bezpośredniego użycia).',
+  },
+  {
+    name: 'Skopiuj wynik',
+    text: 'Kliknij „Kopiuj”, aby pobrać wygenerowany kod CSS do schowka.',
+  },
+  {
+    name: 'Zastosuj w swoim projekcie',
+    text: 'Wklej kod do arkusza stylów lub komponentu CSS. W przypadku masek dodaj również background-color, aby zdefiniować kolor ikony.',
+  },
+];
+
+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: 'pl',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Wklej SVG',
+  labelInputArea: 'Kod źródłowy SVG',
+  labelPreviewOriginal: 'Podgląd oryginału',
+  labelResultTitle: 'Wynik CSS',
+  labelPreviewApplied: 'Zastosowany wynik',
+  tabBackground: 'Obraz tła (Background)',
+  tabMask: 'Maska CSS / Webkit',
+  tabUri: 'Tylko Data URI',
+  btnCopy: 'Kopiuj',
+  btnCopied: 'Skopiowano!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Często zadawane pytania',
+  faq: faqData,
+  bibliographyTitle: 'Referencje i dokumentacja',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Używanie SVG jako tła',
+      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: 'Dlaczego warto konwertować SVG na CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'W nowoczesnym programowaniu stron internetowych optymalizacja wydajności i ładowania zasobów jest kluczowa. Osadzanie ikon bezpośrednio w CSS za pomocą <strong>Data URI</strong> eliminuje niepotrzebne żądania HTTP, zmniejszając opóźnienia i poprawiając wskaźnik Time to Interactive (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'To narzędzie przekształca kod wektorowy <code>&lt;svg&gt;</code> w zakodowany ciąg tekstowy, który przeglądarka może zinterpretować jako obraz tła lub maskę przycinającą, zachowując nieskończoną skalowalność i ostrość charakterystyczną dla wektorów.',
+    },
+    {
+      type: 'title',
+      text: 'Kluczowe korzyści techniczne',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Zero żądań HTTP:</strong> Osadzając grafikę w plikach <code>.css</code>, przeglądarka nie musi pobierać dodatkowych plików zewnętrznych.',
+        '<strong>Personalizacja przez maskę CSS:</strong> Dzięki technice <code>mask-image</code> możesz zmienić kolor złożonej ikony wektorowej po prostu za pomocą <code>background-color</code>.',
+        '<strong>Natychmiastowe renderowanie:</strong> Unikasz mignięcia treści (FOUC), ponieważ krytyczne zasoby wizualne są dostępne natychmiast po pobraniu arkusza stylów.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Maski CSS vs Tła (Backgrounds)',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Wielu deweloperów używa po prostu <code>background-image</code> do osadzania wektorów, ale ma to pewne ograniczenie: nie można dynamicznie zmieniać koloru SVG z poziomu CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Nasze narzędzie obsługuje generowanie kodu dla <strong>masek CSS</strong>. Stosując <code>mask-image</code> z wygenerowanym Data URI, ikona działa jak szablon, pozwalając <code>background-color</code> elementu zdefiniować ostateczny kolor ikony. To najbardziej profesjonalny i elastyczny sposób zarządzania ikonami w Astro, Next.js lub jakimkolwiek nowoczesnym frameworku.',
+    },
+  ],
+};

package/src/tool/svgToCss/i18n/pt.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 = 'conversor-svg-para-css';
+const title = 'Conversor Gratuito Online de SVG para CSS e Data URI';
+const description =
+  'Transforme seus ícones e vetores SVG em código CSS (Background ou Mask) ou Data URI compactado. Otimize o desempenho do seu site eliminando solicitações HTTP externas.';
+
+const faqData = [
+  {
+    question: 'É melhor usar um Data URI ou um arquivo .svg externo?',
+    answer:
+      'Depende do caso de uso. Os Data URIs eliminam solicitações HTTP (ideal para ícones pequenos), mas aumentam o tamanho do arquivo CSS. Para ilustrações grandes ou ricas em detalhes, um arquivo externo é preferível.',
+  },
+  {
+    question: 'Como faço para alterar a cor de um SVG incorporado no CSS?',
+    answer:
+      "A melhor maneira é via 'mask-image'. Definindo o SVG como uma máscara, você pode usar 'background-color' para alterar sua cor dinamicamente, inclusive em estados :hover.",
+  },
+  {
+    question: 'Quais navegadores suportam CSS Masks?',
+    answer:
+      'Todos os navegadores modernos (Chrome, Firefox, Safari, Edge) têm suporte total. Para navegadores mais antigos, os prefixos -webkit- são comumente usados.',
+  },
+  {
+    question: 'O uso de Data URIs afeta o SEO?',
+    answer:
+      'Sim, positivamente. Ao reduzir o número de solicitações necessárias para renderizar a página, melhora o tempo de carregamento (LCP) e as pontuações do Core Web Vitals.',
+  },
+  {
+    question: 'Posso usá-lo em frameworks como React ou Tailwind?',
+    answer:
+      'Com certeza! Você pode copiar o código gerado e usá-lo em seus arquivos .css ou até mesmo como valores arbitrários no Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Cole o SVG',
+    text: 'Copie o código-fonte do seu arquivo SVG e cole-o na área de texto à esquerda.',
+  },
+  {
+    name: 'Escolha o tipo de saída',
+    text: 'Selecione entre Imagem de Fundo (para fundos estáticos), Máscara CSS (para ícones com cor dinâmica) ou Apenas Data URI (para uso direto).',
+  },
+  {
+    name: 'Copie o resultado',
+    text: 'Clique em "Copiar" para levar o código CSS gerado para sua área de transferência.',
+  },
+  {
+    name: 'Aplique no seu projeto',
+    text: 'Cole o código em sua folha de estilo ou componente CSS. Para Máscaras, adicione também background-color para definir a cor do ícone.',
+  },
+];
+
+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: 'pt',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Colar SVG',
+  labelInputArea: 'Código Fonte do SVG',
+  labelPreviewOriginal: 'Visualização Original',
+  labelResultTitle: 'Resultado CSS',
+  labelPreviewApplied: 'Resultado Aplicado',
+  tabBackground: 'Imagem de Fundo',
+  tabMask: 'Máscara CSS / Webkit',
+  tabUri: 'Apenas Data URI',
+  btnCopy: 'Copiar',
+  btnCopied: 'Copiado!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  bibliographyTitle: 'Referências e Documentação',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Usando SVG como Fundo',
+      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: 'Por que Converter SVG para CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'No desenvolvimento web moderno, otimizar o desempenho e o carregamento de recursos é essencial. Incorporar ícones diretamente no CSS via <strong>Data URIs</strong> elimina solicitações HTTP desnecessárias, reduzindo a latência e melhorando o Tempo para Interatividade (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta ferramenta transforma o código vetorial <code>&lt;svg&gt;</code> em uma sequência de texto codificada que o navegador pode interpretar como uma imagem de fundo ou uma máscara de recorte, mantendo a escalabilidade infinita e a nitidez característica dos vetores.',
+    },
+    {
+      type: 'title',
+      text: 'Principais Benefícios Técnicos',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Zero Solicitações HTTP:</strong> Ao incorporar o gráfico em seus arquivos <code>.css</code>, o navegador não precisa baixar arquivos externos adicionais.',
+        '<strong>Personalização via Máscara CSS:</strong> Usando a técnica <code>mask-image</code>, você pode alterar a cor de um ícone vetorial complexo apenas usando <code>background-color</code>.',
+        '<strong>Renderização Imediata:</strong> Você evita a oscilação de conteúdo (FOUC), pois os recursos visuais críticos estão disponíveis assim que a folha de estilo é baixada.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Máscaras CSS vs Fundos',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Muitos desenvolvedores simplesmente usam <code>background-image</code> para incorporar vetores, mas isso tem uma limitação: você não pode alterar a cor do SVG dinamicamente pelo CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Nossa ferramenta suporta a geração de código para <strong>Máscaras CSS</strong>. Ao aplicar uma <code>mask-image</code> com o Data URI gerado, o ícone atua como um estêncil, permitindo que o <code>background-color</code> do elemento defina a cor final do ícone. É a maneira mais profissional e flexível de gerenciar ícones no Astro, Next.js ou qualquer framework moderno.',
+    },
+  ],
+};

package/src/tool/svgToCss/i18n/ru.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-v-css';
+const title = 'Бесплатный онлайн конвертер SVG в CSS и Data URI';
+const description =
+  'Преобразуйте ваши SVG-иконки и векторы в CSS-код (Background или Mask) или сжатые Data URI. Оптимизируйте производительность вашего сайта, исключив внешние HTTP-запросы.';
+
+const faqData = [
+  {
+    question: 'Что лучше использовать: Data URI или внешний файл .svg?',
+    answer:
+      'Это зависит от случая. Data URI исключают HTTP-запросы (идеально для небольших иконок), но увеличивают размер CSS-файла. Для больших или детальных иллюстраций предпочтительнее внешний файл.',
+  },
+  {
+    question: 'Как изменить цвет SVG, встроенного в CSS?',
+    answer:
+      "Лучший способ — через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
+  },
+  {
+    question: ' какие браузеры поддерживают CSS Masks?',
+    answer:
+      'Все современные браузеры (Chrome, Firefox, Safari, Edge) имеют полную поддержку. Для старых браузеров часто используются префиксы -webkit-.',
+  },
+  {
+    question: 'Влияет ли использование Data URI на SEO?',
+    answer:
+      'Да, положительно. Уменьшая количество запросов, необходимых для рендеринга страницы, это улучшает время загрузки (LCP) и показатели Core Web Vitals.',
+  },
+  {
+    question: 'Могу ли я использовать его в таких фреймворках, как React или Tailwind?',
+    answer:
+      'Конечно! Вы можете скопировать сгенерированный код и использовать его в своих .css-файлах или даже как произвольные значения в Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Вставьте SVG',
+    text: 'Скопируйте исходный код вашего SVG-файла и вставьте его в текстовое поле слева.',
+  },
+  {
+    name: 'Выберите тип вывода',
+    text: 'Выберите между фоновым изображением (Background Image для статических фонов), маской CSS (CSS Mask для иконок с динамическим цветом) или только Data URI (для прямого использования).',
+  },
+  {
+    name: 'Скопируйте результат',
+    text: 'Нажмите «Копировать», чтобы перенести сгенерированный CSS-код в буфер обмена.',
+  },
+  {
+    name: 'Примените в своем проекте',
+    text: 'Вставьте код в свою таблицу стилей или CSS-компонент. Для масок также добавьте background-color, чтобы определить цвет иконки.',
+  },
+];
+
+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: 'ru',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Вставьте SVG',
+  labelInputArea: 'Исходный код SVG',
+  labelPreviewOriginal: 'Оригинальный просмотр',
+  labelResultTitle: 'Результат CSS',
+  labelPreviewApplied: 'Примененный результат',
+  tabBackground: 'Фоновое изображение',
+  tabMask: 'CSS-маска / Webkit',
+  tabUri: 'Только Data URI',
+  btnCopy: 'Копировать',
+  btnCopied: 'Скопировано!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Часто задаваемые вопросы',
+  faq: faqData,
+  bibliographyTitle: 'Ссылки и документация',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Использование SVG в качестве фона',
+      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: 'Зачем конвертировать SVG в CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'В современной веб-разработке оптимизация производительности и загрузки ресурсов имеет важное значение. Встраивание иконок непосредственно в CSS через <strong>Data URI</strong> исключает ненужные HTTP-запросы, сокращая задержки и улучшая время до интерактивности (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Этот инструмент преобразует векторный код <code>&lt;svg&gt;</code> в закодированную текстовую строку, которую браузер может интерпретировать как фоновое изображение или маску обрезки, сохраняя бесконечную масштабируемость и четкость векторов.',
+    },
+    {
+      type: 'title',
+      text: 'Основные технические преимущества',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Ноль HTTP-запросов:</strong> Встраивая графику в ваши <code>.css</code>-файлы, браузеру не нужно загружать дополнительные внешние файлы.',
+        '<strong>Настройка через CSS-маску:</strong> Используя технологию <code>mask-image</code>, вы можете изменить цвет сложной векторной иконки, просто используя <code>background-color</code>.',
+        '<strong>Мгновенный рендеринг:</strong> Вы избегаете мерцания контента (FOUC), так как критические визуальные ресурсы доступны сразу после загрузки таблицы стилей.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS-маски против фонов',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Многие разработчики просто используют <code>background-image</code> для встраивания векторов, но это имеет ограничение: вы не можете динамически изменять цвет SVG из CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Наша утилита поддерживает генерацию кода для <strong>CSS-масок</strong>. Применяя <code>mask-image</code> со сгенерированным Data URI, иконка действует как трафарет, позволяя <code>background-color</code> элемента определять конечный цвет иконки. Это самый профессиональный и гибкий способ управления иконками в Astro, Next.js или любом современном фреймворке.',
+    },
+  ],
+};