tosijs-ui 1.5.11 → 1.5.13

package/dist/icons.js

@@ -616,10 +616,34 @@ export const iconRules = [
         apply: (baseName) => `search80s30x30y$${baseName}50o`,
     },
 ];
+let iconIdCounter = 0;
 function makeIcon(spec, parts) {
     const div = elements.div();
     div.innerHTML = spec;
     const sourceSvg = div.querySelector('svg');
+    // Uniquify IDs (clipPath, mask, gradient, etc.) to prevent collisions
+    const idEls = sourceSvg.querySelectorAll('[id]');
+    if (idEls.length > 0) {
+        const idMap = new Map();
+        for (const el of idEls) {
+            const oldId = el.id;
+            const newId = `tosi_svg_id_${++iconIdCounter}`;
+            idMap.set(oldId, newId);
+            el.id = newId;
+        }
+        // Update all url(#...) and href references
+        const html = sourceSvg.innerHTML;
+        let updated = html;
+        for (const [oldId, newId] of idMap) {
+            const escaped = oldId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            updated = updated
+                .replace(new RegExp(`url\\(#${escaped}\\)`, 'g'), `url(#${newId})`)
+                .replace(new RegExp(`href="#${escaped}"`, 'g'), `href="#${newId}"`);
+        }
+        if (updated !== html) {
+            sourceSvg.innerHTML = updated;
+        }
+    }
     const classes = new Set(sourceSvg.classList);
     classes.add('tosi-icon');
     const svg = svgElements.svg({
@@ -742,11 +766,7 @@ function parseStyleSuffixes(name) {
     const suffixes = match[0].match(/_?\d+[osxyr]|[01]f|_[a-zA-Z0-9]+[FS]|\d+W/g);
     if (!suffixes)
         return null;
-    let tx = '';
-    let ty = '';
-    let scale = '';
-    let rotate = '';
-    let flip = '';
+    const transforms = [];
     for (const s of suffixes) {
         const code = s[s.length - 1];
         if (code === 'F' || code === 'S') {
@@ -770,26 +790,25 @@ function parseStyleSuffixes(name) {
                     style.opacity = String(val / 100);
                     break;
                 case 's':
-                    scale = `scale(${val / 100})`;
+                    transforms.push(`scale(${val / 100})`);
                     break;
                 case 'x':
-                    tx = `translateX(${val}%)`;
+                    transforms.push(`translateX(${val}%)`);
                     break;
                 case 'y':
-                    ty = `translateY(${val}%)`;
+                    transforms.push(`translateY(${val}%)`);
                     break;
                 case 'r':
-                    rotate = `rotate(${val}deg)`;
+                    transforms.push(`rotate(${val}deg)`);
                     break;
                 case 'f':
-                    flip = val === 0 ? 'scaleX(-1)' : 'scaleY(-1)';
+                    transforms.push(val === 0 ? 'scaleX(-1)' : 'scaleY(-1)');
                     break;
             }
         }
     }
-    const transform = [rotate, flip, scale, tx, ty].filter(Boolean).join(' ');
-    if (transform) {
-        style.transform = transform;
+    if (transforms.length > 0) {
+        style.transform = transforms.join(' ');
         style.transformOrigin = '50% 50%';
     }
     return { baseName, style };
@@ -825,7 +844,10 @@ export function resolveIcon(prop, parts) {
         const segments = prop.split('$');
         // Last segment is the base (sets the size), rest are overlays
         const base = resolveIcon(segments[segments.length - 1], []);
-        const overlays = segments.slice(0, -1).map((name) => {
+        const overlays = segments
+            .slice(0, -1)
+            .reverse()
+            .map((name) => {
             const icon = resolveIcon(name, []);
             Object.assign(icon.style, {
                 position: 'absolute',