agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 06:07:50 +00:00
Code Issues Releases Activity

chore: improve svg trim and prettify functions

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2023-12-28 10:24:59 +02:00
parent 7fb8bd2c57
commit 0960538526
4 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/utils/src/svg/pretty.ts
View File

@ -14,6 +14,9 @@ export function prettifySVG(
let result = ''; let result = '';
let level = 0; let level = 0;
// Add space for self closing tags
content = content.replace(/(\s)*\/>/g, ' />');
while (content.length > 0) { while (content.length > 0) {
const openIndex = content.indexOf('<'); const openIndex = content.indexOf('<');
let closeIndex = content.indexOf('>'); let closeIndex = content.indexOf('>');

2
packages/utils/src/svg/trim.ts
View File

@ -13,6 +13,8 @@ export function trimSVG(str: string): string {
// Trim attribute values // Trim attribute values
.replace(/\s+"/g, '"') .replace(/\s+"/g, '"')
.replace(/="\s+/g, '="') .replace(/="\s+/g, '="')
// Self closing tags
.replace(/(\s)+\/>/g, '/>')
// Trim it // Trim it
.trim() .trim()
); );

2
packages/utils/tests/encode-url-test.ts
View File

@ -33,7 +33,7 @@ describe('Testing generating url()', () => {
</svg>`; </svg>`;
const url = svgToURL(trimSVG(html)); const url = svgToURL(trimSVG(html));
expect(url).toBe( 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\")"
); );
}); });
}); });

4
packages/utils/tests/prettify-svg-test.ts
View File

@ -16,7 +16,7 @@ describe('Prettify SVG', () => {
'<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>' '<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>'
) )
).toBe( ).toBe(
'<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50"/>\n</svg>\n' '<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50" />\n</svg>\n'
); );
// With xml tag // With xml tag
@ -25,7 +25,7 @@ describe('Prettify SVG', () => {
'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n<circle cx="60" cy="60" r="50"/>\n</svg>\n\t' '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n<circle cx="60" cy="60" r="50"/>\n</svg>\n\t'
) )
).toBe( ).toBe(
'<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50"/>\n</svg>\n' '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">\n\t<circle cx="60" cy="60" r="50" />\n</svg>\n'
); );
}); });