From 38701a99710f9484dade8a93c5bf3a43ea30a0d3 Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Mon, 21 Oct 2024 20:43:09 +0100
Subject: [PATCH] Fix icons not showing in Safari (#9758)

* add 100% w x h

* add changeset

* add wxh 100%

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/proud-tires-cross.md | 6 ++++++
 js/icons/src/Check.svelte       | 2 ++
 js/icons/src/Community.svelte   | 7 ++++++-
 js/icons/src/Copy.svelte        | 2 ++
 js/icons/src/ImagePaste.svelte  | 6 +++++-
 js/icons/src/Maximize.svelte    | 2 ++
 js/icons/src/Minimize.svelte    | 2 ++
 js/icons/src/Paperclip.svelte   | 2 ++
 js/icons/src/Remove.svelte      | 7 ++++++-
 js/icons/src/Retry.svelte       | 2 ++
 js/icons/src/Trash.svelte       | 2 ++
 11 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/proud-tires-cross.md

diff --git a/.changeset/proud-tires-cross.md b/.changeset/proud-tires-cross.md
new file mode 100644
index 0000000000..812244d9cc
--- /dev/null
+++ b/.changeset/proud-tires-cross.md
@@ -0,0 +1,6 @@
+---
+"@gradio/icons": patch
+"gradio": patch
+---
+
+fix:Fix icons not showing in Safari
diff --git a/js/icons/src/Check.svelte b/js/icons/src/Check.svelte
index 7ea8b35699..7f885dd803 100644
--- a/js/icons/src/Check.svelte
+++ b/js/icons/src/Check.svelte
@@ -1,6 +1,8 @@
 <svg
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="2 0 20 20"
+	width="100%"
+	height="100%"
 	fill="none"
 	stroke="currentColor"
 	aria-hidden="true"
diff --git a/js/icons/src/Community.svelte b/js/icons/src/Community.svelte
index e4665098e2..8080c873c3 100644
--- a/js/icons/src/Community.svelte
+++ b/js/icons/src/Community.svelte
@@ -1,4 +1,9 @@
-<svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
+<svg
+	id="icon"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 32 32"
+	width="100%"
+	height="100%"
 	><path
 		d="M23,20a5,5,0,0,0-3.89,1.89L11.8,17.32a4.46,4.46,0,0,0,0-2.64l7.31-4.57A5,5,0,1,0,18,7a4.79,4.79,0,0,0,.2,1.32l-7.31,4.57a5,5,0,1,0,0,6.22l7.31,4.57A4.79,4.79,0,0,0,18,25a5,5,0,1,0,5-5ZM23,4a3,3,0,1,1-3,3A3,3,0,0,1,23,4ZM7,19a3,3,0,1,1,3-3A3,3,0,0,1,7,19Zm16,9a3,3,0,1,1,3-3A3,3,0,0,1,23,28Z"
 		fill="currentColor"
diff --git a/js/icons/src/Copy.svelte b/js/icons/src/Copy.svelte
index 7979ee71a1..0ccb248e98 100644
--- a/js/icons/src/Copy.svelte
+++ b/js/icons/src/Copy.svelte
@@ -3,6 +3,8 @@
 	viewBox="0 0 33 33"
 	color="currentColor"
 	aria-hidden="true"
+	width="100%"
+	height="100%"
 	><path
 		fill="currentColor"
 		d="M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"
diff --git a/js/icons/src/ImagePaste.svelte b/js/icons/src/ImagePaste.svelte
index df9debe8e7..0bb4538350 100644
--- a/js/icons/src/ImagePaste.svelte
+++ b/js/icons/src/ImagePaste.svelte
@@ -1,4 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	width="100%"
+	height="100%"
 	><path
 		fill="currentColor"
 		d="M13.75 2a2.25 2.25 0 0 1 2.236 2.002V4h1.764A2.25 2.25 0 0 1 20 6.25V11h-1.5V6.25a.75.75 0 0 0-.75-.75h-2.129c-.404.603-1.091 1-1.871 1h-3.5c-.78 0-1.467-.397-1.871-1H6.25a.75.75 0 0 0-.75.75v13.5c0 .414.336.75.75.75h4.78a4 4 0 0 0 .505 1.5H6.25A2.25 2.25 0 0 1 4 19.75V6.25A2.25 2.25 0 0 1 6.25 4h1.764a2.25 2.25 0 0 1 2.236-2zm2.245 2.096L16 4.25q0-.078-.005-.154M13.75 3.5h-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5M15 12a3 3 0 0 0-3 3v5c0 .556.151 1.077.415 1.524l3.494-3.494a2.25 2.25 0 0 1 3.182 0l3.494 3.494c.264-.447.415-.968.415-1.524v-5a3 3 0 0 0-3-3zm0 11a3 3 0 0 1-1.524-.415l3.494-3.494a.75.75 0 0 1 1.06 0l3.494 3.494A3 3 0 0 1 20 23zm5-7a1 1 0 1 1 0-2 1 1 0 0 1 0 2"
diff --git a/js/icons/src/Maximize.svelte b/js/icons/src/Maximize.svelte
index 394bd0df03..f1c8722385 100644
--- a/js/icons/src/Maximize.svelte
+++ b/js/icons/src/Maximize.svelte
@@ -7,6 +7,8 @@
 	stroke-linecap="round"
 	stroke-linejoin="round"
 	class="feather feather-maximize"
+	width="100%"
+	height="100%"
 >
 	<path
 		d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
diff --git a/js/icons/src/Minimize.svelte b/js/icons/src/Minimize.svelte
index 52ad266893..ddcdd1d2a1 100644
--- a/js/icons/src/Minimize.svelte
+++ b/js/icons/src/Minimize.svelte
@@ -7,6 +7,8 @@
 	stroke-linecap="round"
 	stroke-linejoin="round"
 	class="feather feather-minimize"
+	width="100%"
+	height="100%"
 	><path
 		d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"
 	></path></svg
diff --git a/js/icons/src/Paperclip.svelte b/js/icons/src/Paperclip.svelte
index 2d8ec8bcfc..248fb8aacb 100644
--- a/js/icons/src/Paperclip.svelte
+++ b/js/icons/src/Paperclip.svelte
@@ -1,5 +1,7 @@
 <svg
 	fill="currentColor"
+	width="100%"
+	height="100%"
 	viewBox="0 0 1920 1920"
 	xmlns="http://www.w3.org/2000/svg"
 	><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
diff --git a/js/icons/src/Remove.svelte b/js/icons/src/Remove.svelte
index afffa39eee..6c91b7d07e 100644
--- a/js/icons/src/Remove.svelte
+++ b/js/icons/src/Remove.svelte
@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	width="100%"
+	height="100%"
+>
 	<path
 		d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 	/>
diff --git a/js/icons/src/Retry.svelte b/js/icons/src/Retry.svelte
index 9d61bdd9c5..d1f324458a 100644
--- a/js/icons/src/Retry.svelte
+++ b/js/icons/src/Retry.svelte
@@ -1,4 +1,6 @@
 <svg
+	width="100%"
+	height="100%"
 	stroke-width="1.5"
 	viewBox="0 0 24 24"
 	fill="none"
diff --git a/js/icons/src/Trash.svelte b/js/icons/src/Trash.svelte
index a806231a48..f0ef19d12e 100644
--- a/js/icons/src/Trash.svelte
+++ b/js/icons/src/Trash.svelte
@@ -3,6 +3,8 @@
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 32 32"
 	fill="currentColor"
+	width="100%"
+	height="100%"
 >
 	<defs>
 		<style>