@jjlmoya/utils-developer 1.2.0

package/src/tool/svgToCss/component.astro

@@ -0,0 +1,381 @@
+---
+import type { KnownLocale } from '../../types';
+import type { SvgToCssUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SvgToCssUI;
+
+const defaultSvg = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>`;
+---
+
+<div
+  class="stc-container"
+  data-btn-copy={t.btnCopy}
+  data-btn-copied={t.btnCopied}
+>
+  <div class="stc-grid">
+    <div class="stc-card">
+      <div class="stc-title-group">
+        <div class="stc-icon-box">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m5 16s1 1 4 1 4-1 4-1"></path>
+            <path d="m11 20s1 1 4 1 4-1 4-1"></path>
+            <path d="m17 4s1 1 4 1 4-1 4-1"></path>
+            <path d="m3 12s1 1 4 1 4-1 4-1"></path>
+            <path d="m9 8s1 1 4 1 4-1 4-1"></path>
+            <circle cx="5" cy="16" r="1"></circle>
+            <circle cx="11" cy="20" r="1"></circle>
+            <circle cx="17" cy="4" r="1"></circle>
+            <circle cx="3" cy="12" r="1"></circle>
+            <circle cx="9" cy="8" r="1"></circle>
+          </svg>
+        </div>
+        <h2 class="stc-card-title">{t.labelPasteTitle}</h2>
+      </div>
+
+      <span class="stc-area-label">{t.labelInputArea}</span>
+      <textarea id="stc-input" class="stc-textarea" placeholder={t.placeholder}>{defaultSvg}</textarea>
+
+      <span class="stc-area-label">{t.labelPreviewOriginal}</span>
+      <div class="stc-preview-container">
+        <div class="stc-preview-bg"></div>
+        <div id="stc-preview-original" class="stc-preview-img"></div>
+      </div>
+    </div>
+
+    <div class="stc-card">
+      <div class="stc-title-group">
+        <div class="stc-icon-box">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" x2="12" y1="3" y2="15"></line>
+          </svg>
+        </div>
+        <h2 class="stc-card-title">{t.labelResultTitle}</h2>
+      </div>
+
+      <div class="stc-output-tabs">
+        <button class="stc-tab-btn active" data-type="background">{t.tabBackground}</button>
+        <button class="stc-tab-btn" data-type="mask">{t.tabMask}</button>
+        <button class="stc-tab-btn" data-type="uri">{t.tabUri}</button>
+      </div>
+
+      <div class="stc-result-box">
+        <button id="stc-copy" class="stc-copy-btn">{t.btnCopy}</button>
+        <textarea id="stc-output" class="stc-textarea" readonly></textarea>
+      </div>
+
+      <span class="stc-area-label">{t.labelPreviewApplied}</span>
+      <div class="stc-preview-container">
+        <div class="stc-preview-bg"></div>
+        <div id="stc-preview-applied" class="stc-preview-applied"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .stc-container {
+    --stc-primary: #ec4899;
+    --stc-secondary: #8b5cf6;
+    --stc-card-bg: #fff;
+    --stc-text: #0f172a;
+    --stc-text-muted: #64748b;
+    --stc-border: #e2e8f0;
+    --stc-input-bg: #f1f5f9;
+    --stc-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+    max-width: 1000px;
+    margin: 4rem auto;
+    color: var(--stc-text);
+  }
+
+  :global(.theme-dark) .stc-container {
+    --stc-card-bg: #1e293b;
+    --stc-text: #f8fafc;
+    --stc-text-muted: #94a3b8;
+    --stc-border: #334155;
+    --stc-input-bg: #0f172a;
+  }
+
+  .stc-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  @media (min-width: 850px) {
+    .stc-grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .stc-card {
+    background: var(--stc-card-bg);
+    border: 1px solid var(--stc-border);
+    border-radius: 1.5rem;
+    padding: 2.5rem;
+    box-shadow: var(--stc-shadow-lg);
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .stc-title-group {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .stc-icon-box {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--stc-primary), var(--stc-secondary));
+    border-radius: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+  }
+
+  .stc-card-title {
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+  }
+
+  .stc-area-label {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--stc-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .stc-textarea {
+    width: 100%;
+    min-height: 250px;
+    background: var(--stc-input-bg);
+    border: 2px solid var(--stc-border);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    font-size: 0.9rem;
+    color: var(--stc-text);
+    outline: none;
+    resize: vertical;
+    transition: all 0.2s;
+  }
+
+  .stc-textarea:focus {
+    border-color: var(--stc-primary);
+    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
+  }
+
+  .stc-result-box {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .stc-copy-btn {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: var(--stc-primary);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+    z-index: 1;
+  }
+
+  .stc-copy-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
+  }
+
+  .stc-preview-container {
+    background: var(--stc-input-bg);
+    border: 2px dashed var(--stc-border);
+    border-radius: 1rem;
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .stc-preview-bg {
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(45deg, var(--stc-border) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--stc-border) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--stc-border) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--stc-border) 75%);
+    background-size: 20px 20px;
+    background-position:
+      0 0,
+      0 10px,
+      10px -10px,
+      -10px 0;
+    opacity: 0.1;
+  }
+
+  .stc-preview-img {
+    max-width: 80px;
+    max-height: 80px;
+    z-index: 1;
+  }
+
+  .stc-preview-applied {
+    width: 60px;
+    height: 60px;
+    z-index: 1;
+  }
+
+  .stc-output-tabs {
+    display: flex;
+    gap: 0.5rem;
+    background: var(--stc-input-bg);
+    padding: 0.3rem;
+    border-radius: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .stc-tab-btn {
+    flex: 1;
+    border: none;
+    background: transparent;
+    padding: 0.6rem;
+    border-radius: 0.5rem;
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--stc-text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  :global(.stc-tab-btn.active) {
+    background: var(--stc-card-bg);
+    color: var(--stc-primary);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+</style>
+
+<script>
+  const container = document.querySelector('.stc-container') as HTMLElement | null;
+  const input = document.getElementById('stc-input') as HTMLTextAreaElement | null;
+  const output = document.getElementById('stc-output') as HTMLTextAreaElement | null;
+  const copyBtn = document.getElementById('stc-copy');
+  const previewOriginal = document.getElementById('stc-preview-original');
+  const previewApplied = document.getElementById('stc-preview-applied');
+  const tabBtns = document.querySelectorAll<HTMLButtonElement>('.stc-tab-btn');
+
+  const btnCopy = container?.dataset.btnCopy ?? 'Copy';
+  const btnCopied = container?.dataset.btnCopied ?? 'Copied!';
+
+  let currentType = 'background';
+
+  function cleanSvg(svg: string): string {
+    return svg
+      .trim()
+      .replace(/\r?\n|\r/g, '')
+      .replace(/>\s+</g, '><')
+      .replace(/\s{2,}/g, ' ');
+  }
+
+  function encodeSvg(svg: string): string {
+    return svg
+      .replace(/"/g, "'")
+      .replace(/%/g, '%25')
+      .replace(/#/g, '%23')
+      .replace(/{/g, '%7B')
+      .replace(/}/g, '%7D')
+      .replace(/</g, '%3C')
+      .replace(/>/g, '%3E');
+  }
+
+  function applyBackground(dataUri: string): void {
+    if (!previewApplied) return;
+    previewApplied.style.backgroundImage = `url("${dataUri}")`;
+    previewApplied.style.maskImage = 'none';
+    (previewApplied.style as CSSStyleDeclaration & { webkitMaskImage: string }).webkitMaskImage = 'none';
+    previewApplied.style.backgroundColor = 'transparent';
+  }
+
+  function applyMask(dataUri: string): void {
+    if (!previewApplied) return;
+    const style = previewApplied.style as CSSStyleDeclaration & {
+      webkitMaskImage: string;
+      webkitMaskRepeat: string;
+      webkitMaskSize: string;
+    };
+    previewApplied.style.backgroundImage = 'none';
+    previewApplied.style.maskImage = `url("${dataUri}")`;
+    style.webkitMaskImage = `url("${dataUri}")`;
+    previewApplied.style.maskRepeat = 'no-repeat';
+    previewApplied.style.maskSize = 'contain';
+    style.webkitMaskRepeat = 'no-repeat';
+    style.webkitMaskSize = 'contain';
+    previewApplied.style.backgroundColor = '#ec4899';
+  }
+
+  function generateOutput(): void {
+    if (!input || !output || !previewOriginal || !previewApplied) return;
+
+    const raw = input.value;
+    const cleaned = cleanSvg(raw);
+    const encoded = encodeSvg(cleaned);
+    const dataUri = `data:image/svg+xml,${encoded}`;
+
+    previewOriginal.innerHTML = cleaned;
+
+    if (currentType === 'background') {
+      output.value = `background-image: url("${dataUri}");`;
+      applyBackground(dataUri);
+    } else if (currentType === 'mask') {
+      output.value = `mask-image: url("${dataUri}");\n-webkit-mask-image: url("${dataUri}");\nmask-repeat: no-repeat;\nmask-size: contain;\nbackground-color: currentColor;`;
+      applyMask(dataUri);
+    } else {
+      output.value = dataUri;
+      applyBackground(dataUri);
+    }
+  }
+
+  input?.addEventListener('input', generateOutput);
+
+  tabBtns.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      tabBtns.forEach((b) => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentType = btn.dataset.type ?? 'background';
+      generateOutput();
+    });
+  });
+
+  copyBtn?.addEventListener('click', async () => {
+    if (!output) return;
+    await navigator.clipboard.writeText(output.value);
+    copyBtn.textContent = btnCopied;
+    setTimeout(() => {
+      copyBtn.textContent = btnCopy;
+    }, 2000);
+  });
+
+  generateOutput();
+</script>

package/src/tool/svgToCss/i18n/en.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-to-css-converter';
+const title = 'Free Online SVG to CSS and Data URI Converter';
+const description =
+  'Transform your SVG icons and vectors into CSS code (Background or Mask) or compressed Data URI. Optimise your website performance by eliminating external HTTP requests.';
+
+const faqData = [
+  {
+    question: 'Is it better to use a Data URI or an external .svg file?',
+    answer:
+      'It depends on the use case. Data URIs eliminate HTTP requests (ideal for small icons), but increase CSS file size. For large or detail-rich illustrations, an external file is preferable.',
+  },
+  {
+    question: 'How do I change the colour of an SVG embedded in CSS?',
+    answer:
+      "The best way is via 'mask-image'. By defining the SVG as a mask, you can use 'background-color' to change its colour dynamically, even in :hover states.",
+  },
+  {
+    question: 'Which browsers support CSS Masks?',
+    answer:
+      'All modern browsers (Chrome, Firefox, Safari, Edge) have full support. For older browsers, -webkit- prefixes are commonly used.',
+  },
+  {
+    question: 'Does using Data URIs affect SEO?',
+    answer:
+      'Yes, positively. By reducing the number of requests needed to render the page, it improves load time (LCP) and Core Web Vitals scores.',
+  },
+  {
+    question: 'Can I use it in frameworks like React or Tailwind?',
+    answer:
+      'Absolutely! You can copy the generated code and use it in your .css files or even as arbitrary values in Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Paste the SVG',
+    text: 'Copy the source code of your SVG file and paste it into the text area on the left.',
+  },
+  {
+    name: 'Choose the output type',
+    text: 'Select between Background Image (for static backgrounds), CSS Mask (for icons with dynamic colour) or Data URI Only (for direct use).',
+  },
+  {
+    name: 'Copy the result',
+    text: 'Click "Copy" to bring the generated CSS code to your clipboard.',
+  },
+  {
+    name: 'Apply in your project',
+    text: 'Paste the code into your stylesheet or CSS component. For Masks, also add background-color to define the icon colour.',
+  },
+];
+
+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: 'en',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Paste SVG',
+  labelInputArea: 'SVG Source Code',
+  labelPreviewOriginal: 'Original Preview',
+  labelResultTitle: 'CSS Result',
+  labelPreviewApplied: 'Applied Result',
+  tabBackground: 'Background Image',
+  tabMask: 'CSS Mask / Webkit',
+  tabUri: 'Data URI Only',
+  btnCopy: 'Copy',
+  btnCopied: 'Copied!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References and Documentation',
+  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: 'Why Convert SVG to CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'In modern web development, optimising performance and resource loading is essential. Embedding icons directly in CSS via <strong>Data URIs</strong> eliminates unnecessary HTTP requests, reducing latency and improving Time to Interactive (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool transforms <code>&lt;svg&gt;</code> vector code into an encoded text string that the browser can interpret as a background image or a clipping mask, maintaining infinite scalability and the sharpness characteristic of vectors.',
+    },
+    {
+      type: 'title',
+      text: 'Key Technical Benefits',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Zero HTTP Requests:</strong> By embedding the graphic in your <code>.css</code> files, the browser does not need to download additional external files.',
+        '<strong>Customisation via CSS Mask:</strong> Using the <code>mask-image</code> technique, you can change the colour of a complex vector icon simply by using <code>background-color</code>.',
+        '<strong>Immediate Rendering:</strong> You avoid content flicker (FOUC) since critical visual resources are available as soon as the stylesheet is downloaded.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'CSS Masks vs Backgrounds',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Many developers simply use <code>background-image</code> to embed vectors, but this has a limitation: you cannot change the SVG colour dynamically from CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Our utility supports code generation for <strong>CSS Masks</strong>. By applying a <code>mask-image</code> with the generated Data URI, the icon acts as a stencil, allowing the <code>background-color</code> of the element to define the final icon colour. It is the most professional and flexible way to manage icons in Astro, Next.js or any modern framework.',
+    },
+  ],
+};