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>
gradio-app · Oct 21, 2024 · 38701a9 · 38701a9
1 parent 47b5565
commit 38701a9
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 3 deletions.
diff --git a/.changeset/proud-tires-cross.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -3,6 +3,8 @@
 	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 32 32"
 	fill="currentColor"
+	width="100%"
+	height="100%"
 >
 	<defs>
 		<style>