diff --git a/packages/utils/src/svg/pretty.ts b/packages/utils/src/svg/pretty.ts
index 311b036..2e79efd 100644
--- a/packages/utils/src/svg/pretty.ts
+++ b/packages/utils/src/svg/pretty.ts
@@ -14,6 +14,9 @@ export function prettifySVG(
let result = '';
let level = 0;
+ // Add space for self closing tags
+ content = content.replace(/(\s)*\/>/g, ' />');
+
while (content.length > 0) {
const openIndex = content.indexOf('<');
let closeIndex = content.indexOf('>');
diff --git a/packages/utils/src/svg/trim.ts b/packages/utils/src/svg/trim.ts
index 87fcedf..3734df3 100644
--- a/packages/utils/src/svg/trim.ts
+++ b/packages/utils/src/svg/trim.ts
@@ -13,6 +13,8 @@ export function trimSVG(str: string): string {
// Trim attribute values
.replace(/\s+"/g, '"')
.replace(/="\s+/g, '="')
+ // Self closing tags
+ .replace(/(\s)+\/>/g, '/>')
// Trim it
.trim()
);
diff --git a/packages/utils/tests/encode-url-test.ts b/packages/utils/tests/encode-url-test.ts
index 85e791f..260aac1 100644
--- a/packages/utils/tests/encode-url-test.ts
+++ b/packages/utils/tests/encode-url-test.ts
@@ -33,7 +33,7 @@ describe('Testing generating url()', () => {
`;
const url = svgToURL(trimSVG(html));
expect(url).toBe(
- "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='10' fill='currentColor'%3E%3Canimate id='animation1' attributeName='height' values='10;5' dur='0.5s' fill='freeze' /%3E%3Canimate id='animation2' attributeName='width' values='20;5' dur='0.2s' begin='animation1.end+1s' fill='freeze' /%3E%3C/rect%3E%3Crect x='2' y='12' width='20' height='5' fill='currentColor'%3E%3Canimate attributeName='height' values='5;10;5' begin='animation1.end+0.2s;animation2.end-0.2s' dur='0.3s' /%3E%3C/rect%3E%3C/svg%3E\")"
+ "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='10' fill='currentColor'%3E%3Canimate id='animation1' attributeName='height' values='10;5' dur='0.5s' fill='freeze'/%3E%3Canimate id='animation2' attributeName='width' values='20;5' dur='0.2s' begin='animation1.end+1s' fill='freeze'/%3E%3C/rect%3E%3Crect x='2' y='12' width='20' height='5' fill='currentColor'%3E%3Canimate attributeName='height' values='5;10;5' begin='animation1.end+0.2s;animation2.end-0.2s' dur='0.3s'/%3E%3C/rect%3E%3C/svg%3E\")"
);
});
});
diff --git a/packages/utils/tests/prettify-svg-test.ts b/packages/utils/tests/prettify-svg-test.ts
index 2ab6a36..3503229 100644
--- a/packages/utils/tests/prettify-svg-test.ts
+++ b/packages/utils/tests/prettify-svg-test.ts
@@ -16,7 +16,7 @@ describe('Prettify SVG', () => {
''
)
).toBe(
- '\n'
+ '\n'
);
// With xml tag
@@ -25,7 +25,7 @@ describe('Prettify SVG', () => {
'\n\n\t'
)
).toBe(
- '\n\n'
+ '\n\n'
);
});