feat: automatic svg prologue cleanup (#1111)

unocss · Jun 18, 2022 · bd3a6c4 · bd3a6c4
1 parent d6b841e
commit bd3a6c4
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/packages/preset-icons/package.json b/packages/preset-icons/package.json
@@ -41,7 +41,7 @@
     "stub": "unbuild --stub"
   },
   "dependencies": {
-    "@iconify/utils": "^1.0.32",
+    "@iconify/utils": "^1.0.33",
     "@unocss/core": "workspace:*",
     "ohmyfetch": "^0.4.18"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/__snapshots__/preset-icons.test.ts.snap b/test/__snapshots__/preset-icons.test.ts.snap
@@ -17,3 +17,8 @@ exports[`preset-icons > icon unit fixtures 1`] = `
 .i-carbon-sun{--un-icon:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='2rem' height='2rem' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z'/%3E%3C/svg%3E\\");mask:var(--un-icon) no-repeat;mask-size:100% 100%;-webkit-mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;background-color:currentColor;width:2rem;height:2rem;}
 .i-carbon-sun\\\\?bg{background:url(\\"data:image/svg+xml;utf8,%3Csvg preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32' width='2rem' height='2rem' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z'/%3E%3C/svg%3E\\") no-repeat;background-size:100% 100%;background-color:transparent;width:2rem;height:2rem;}"
 `;
+
+exports[`preset-icons > svg prologue cleared 1`] = `
+"/* layer: icons */
+.i-custom\\\\:circle-with-xml-preface{background:url(\\"data:image/svg+xml;utf8,%3Csvg width='1em' height='1em' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='60' cy='60' r='50'/%3E%3C/svg%3E\\") no-repeat;background-size:100% 100%;background-color:transparent;width:1em;height:1em;}"
+`;
diff --git a/test/preset-icons.test.ts b/test/preset-icons.test.ts
@@ -22,6 +22,15 @@ describe('preset-icons', () => {
       presetIcons({
         unit: 'rem',
         scale: 2,
+        collections: {
+          custom: {
+            'circle-with-xml-preface': `
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="60" r="50"/></svg>
+`,
+          },
+        },
         customizations: {
           iconCustomizer(collection, icon, props) {
             if (!(collection === 'carbon' && icon === 'sun')) {
@@ -46,4 +55,10 @@ describe('preset-icons', () => {
     expect(layers).toEqual(['icons', 'default'])
     expect(css).toMatchSnapshot()
   })
+  test('svg prologue cleared', async () => {
+    const { css, layers } = await unoWithUnit.generate('<button class="i-custom:circle-with-xml-preface" />', { preflights: false })
+    expect(layers).toEqual(['icons', 'default'])
+    expect(css).toContain('data:image/svg+xml;utf8,%3Csvg')
+    expect(css).toMatchSnapshot()
+  })
 })