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\t\n\n' + '\n\t\n\n' ); // With xml tag @@ -25,7 +25,7 @@ describe('Prettify SVG', () => { '\n\n\n\n\t' ) ).toBe( - '\n\n\t\n\n' + '\n\n\t\n\n' ); });