github-personal/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2026-08-28 11:33:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor logo management components: remove LogoModal, add Actions and Grid components, enhance List and Preview components with improved theme handling and SVG support.

Browse Source
This commit is contained in:
sha
2025-05-01 11:57:23 +03:00
parent 0313d091fc
commit c62d453946
6 changed files with 40 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InlineSvg.svelte
+22 -19
View File
@@ -1,11 +1,11 @@
<script>
import { onMount } from 'svelte';
import { onMount } from "svelte";
export let path;
export let color;
export let colorConfig = { target: 'path', attribute: 'fill' };
export let alt;
export let colorConfig = { target: "path", attribute: "fill" };
export const alt = "";
let svgHtml = '';
let svgHtml = "";
async function fetchAndColorSvg() {
const res = await fetch(path);
@@ -17,10 +17,10 @@
}
// Parse and update color only if user selected
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'image/svg+xml');
const doc = parser.parseFromString(text, "image/svg+xml");
// 1. Parse <style> rules and apply as inline attributes before removing <style>
const styleEls = Array.from(doc.querySelectorAll('style'));
styleEls.forEach(styleEl => {
const styleEls = Array.from(doc.querySelectorAll("style"));
styleEls.forEach((styleEl) => {
const css = styleEl.textContent;
// Only handle simple .class { ... } rules
const regex = /\.([\w-]+)\s*{([^}]*)}/g;
@@ -29,19 +29,22 @@
const className = match[1];
const rules = match[2];
// Find all elements with this class
doc.querySelectorAll('.' + className).forEach(el => {
rules.split(';').forEach(rule => {
const [prop, value] = rule.split(':').map(s => s && s.trim());
doc.querySelectorAll("." + className).forEach((el) => {
rules.split(";").forEach((rule) => {
const [prop, value] = rule.split(":").map((s) => s && s.trim());
if (prop && value) {
// Apply all style properties, not just fill/stroke
el.setAttribute(prop.replace(/-([a-z])/g, g => g[1].toUpperCase()), value);
el.setAttribute(
prop.replace(/-([a-z])/g, (g) => g[1].toUpperCase()),
value,
);
}
});
});
}
});
// Remove all <style> elements
styleEls.forEach(styleEl => styleEl.remove());
styleEls.forEach((styleEl) => styleEl.remove());
let targets;
if (colorConfig.selector) {
targets = doc.querySelectorAll(colorConfig.selector);
@@ -50,21 +53,21 @@
} else {
targets = [];
}
targets.forEach(el => {
targets.forEach((el) => {
if (colorConfig.attribute) {
// Legacy: force a single attribute
el.setAttribute(colorConfig.attribute, color);
} else {
// Always override fill and stroke unless they are 'none'
if (el.hasAttribute('fill') && el.getAttribute('fill') !== 'none') {
el.setAttribute('fill', color);
if (el.hasAttribute("fill") && el.getAttribute("fill") !== "none") {
el.setAttribute("fill", color);
}
if (el.hasAttribute('stroke') && el.getAttribute('stroke') !== 'none') {
el.setAttribute('stroke', color);
if (el.hasAttribute("stroke") && el.getAttribute("stroke") !== "none") {
el.setAttribute("stroke", color);
}
if (!el.hasAttribute('fill') && !el.hasAttribute('stroke')) {
if (!el.hasAttribute("fill") && !el.hasAttribute("stroke")) {
// If neither, prefer fill
el.setAttribute('fill', color);
el.setAttribute("fill", color);
}
}
});