From afd519ef8b46191fc4218ea0b5700f6796bd8f75 Mon Sep 17 00:00:00 2001
From: Alquen Antonio Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 5 Nov 2024 18:26:54 +0800
Subject: [PATCH] =?UTF-8?q?fix=20(icon=20picker):=20revert=20removal=20of?=
 =?UTF-8?q?=20defs,=20add=20instanceId=20suffix=20to=20ensure=20uniquene?=
 =?UTF-8?q?=E2=80=A6=20(#3303)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: revert removal of defs, add instanceId suffix to ensure uniqueness of IDs

* chore: typo in comment

* fix: use random number instead of instanceId

* chore: remove comments
---
 src/components/icon-search-popover/index.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/icon-search-popover/index.js b/src/components/icon-search-popover/index.js
index ed6ebd127..272e81302 100644
--- a/src/components/icon-search-popover/index.js
+++ b/src/components/icon-search-popover/index.js
@@ -58,10 +58,11 @@ export const cleanSvgString = svgString => {
 	let newSvg = svgString.replace( /(^[\s\S]*?)(<svg)/gm, '$2' )
 		.replace( /(<\/svg>)([\s\S]*)/g, '$1' )
 
-	// Remove defs
-	if ( newSvg.indexOf( '<defs' ) !== -1 ) {
-		newSvg = newSvg.replace( /<defs[\s\S]*?<\/defs>/gm, '' )
-	}
+	// Generate a random numbere to append to the IDs
+	const svgId = Math.floor( Math.random() * new Date().getTime() ) % 100000
+	newSvg = newSvg.replace( /id="([^"]*)"/g, `id="$1-${ svgId }"` )
+	newSvg = newSvg.replace( /url\(#([^)]*)\)/g, `url(#$1-${ svgId })` )
+	newSvg = newSvg.replace( /href="#([^"]*)"/g, `href="#$1-${ svgId }"` )
 
 	// Remove comments
 	if ( newSvg.indexOf( '<!--' ) !== -1 ) {
@@ -145,7 +146,7 @@ const IconSearchPopover = props => {
 				return
 			}
 
-			// Read the SVG,
+			// Read the SVG
 			const fr = new FileReader()
 			fr.onload = function( e ) {
 				setIsDropping( false )