From ca325611759eb377c33a29d3ee2fe9aeb5552347 Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Fri, 16 Aug 2024 18:01:56 +0800
Subject: [PATCH 1/2] feat: return shorter data url if possible

---
 src/utils/icons.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index c300945e..d57dd5bf 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -1,4 +1,5 @@
 import { buildIcon, loadIcon } from 'iconify-icon'
+import { encodeSvgForCss } from '@iconify/utils'
 import { getTransformedId } from '../store'
 import Base64 from './base64'
 import { HtmlToJSX } from './htmlToJsx'
@@ -211,6 +212,16 @@ export function ${name}(props) {
   return prettierCode(code, 'babel-ts')
 }
 
+export function SvgToDataURL(svg: string) {
+  const url = `data:image/svg+xml;base64,${Base64.encode(svg)}`
+  const percentURL = `data:image/svg+xml,${encodeSvgForCss(svg)}`
+
+  if (percentURL.length < url.length)
+    return percentURL
+
+  return url
+}
+
 export async function getIconSnippet(icon: string, type: string, snippet = true, color = 'currentColor'): Promise<string | undefined> {
   if (!icon)
     return
@@ -235,7 +246,7 @@ export async function getIconSnippet(icon: string, type: string, snippet = true,
     case 'svg-symbol':
       return await getSvgSymbol(icon, '32', color)
     case 'data_url':
-      return `data:image/svg+xml;base64,${Base64.encode(await getSvg(icon, undefined, color))}`
+      return SvgToDataURL(await getSvg(icon, undefined, color))
     case 'pure-jsx':
       return ClearSvg(await getSvg(icon, undefined, color))
     case 'jsx':

From de76860bb5b62cce296936eb67eedbc9c7998ebf Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Mon, 19 Aug 2024 10:59:31 +0200
Subject: [PATCH 2/2] chore: update

---
 src/utils/icons.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/utils/icons.ts b/src/utils/icons.ts
index d57dd5bf..aeb654e5 100644
--- a/src/utils/icons.ts
+++ b/src/utils/icons.ts
@@ -213,13 +213,10 @@ export function ${name}(props) {
 }
 
 export function SvgToDataURL(svg: string) {
-  const url = `data:image/svg+xml;base64,${Base64.encode(svg)}`
-  const percentURL = `data:image/svg+xml,${encodeSvgForCss(svg)}`
-
-  if (percentURL.length < url.length)
-    return percentURL
-
-  return url
+  const base64 = `data:image/svg+xml;base64,${Base64.encode(svg)}`
+  const plain = `data:image/svg+xml,${encodeSvgForCss(svg)}`
+  // Return the shorter of the two data URLs
+  return base64.length < plain.length ? base64 : plain
 }
 
 export async function getIconSnippet(icon: string, type: string, snippet = true, color = 'currentColor'): Promise<string | undefined> {