chore: update logic for svg sprite, we can simplify symbol, view and …

…use id naming
unocss · Aug 7, 2023 · 28b2878 · 28b2878
1 parent b753cf3
commit 28b2878
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 12 deletions.
diff --git a/examples/vite-vue3/public/sprite.svg b/examples/vite-vue3/public/sprite.svg
diff --git a/examples/vite-vue3/src/App.vue b/examples/vite-vue3/src/App.vue
@@ -49,7 +49,8 @@
 
 <style>
 .mdi-close {
-  --un-icon: url("/sprite.svg#shapes-close-view");
+  /*--un-icon: url("/sprite.svg#shapes-close-view");*/
+  --un-icon: url("/sprite.svg#close");
   -webkit-mask: var(--un-icon) no-repeat;
   mask: var(--un-icon) no-repeat;
   -webkit-mask-size: 100% 100%;
@@ -62,7 +63,8 @@
   vertical-align: middle;
 }
 .mdi-close-bg {
-  background: url("/sprite.svg#shapes-close-view") no-repeat;
+  /*background: url("/sprite.svg#shapes-close-view") no-repeat;*/
+  background: url("/sprite.svg#close") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   display: inline-block;
@@ -71,7 +73,8 @@
   height: 1em;
 }
 .mdi-chevron-down {
-  --un-icon: url("/sprite.svg#shapes-chevron-down-view");
+  /*--un-icon: url("/sprite.svg#shapes-chevron-down-view");*/
+  --un-icon: url("/sprite.svg#chevron-down");
   -webkit-mask: var(--un-icon) no-repeat;
   mask: var(--un-icon) no-repeat;
   -webkit-mask-size: 100% 100%;
@@ -84,7 +87,8 @@
   vertical-align: middle;
 }
 .mdi-chevron-down-bg {
-  background: url("/sprite.svg#shapes-chevron-down-view") no-repeat;
+  /*background: url("/sprite.svg#shapes-chevron-down-view") no-repeat;*/
+  background: url("/sprite.svg#chevron-down") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   display: inline-block;
@@ -93,7 +97,8 @@
   height: 1em;
 }
 .mdi-chevron-up {
-  --un-icon: url("/sprite.svg#shapes-chevron-up-view");
+  /*--un-icon: url("/sprite.svg#shapes-chevron-up-view");*/
+  --un-icon: url("/sprite.svg#chevron-up");
   -webkit-mask: var(--un-icon) no-repeat;
   mask: var(--un-icon) no-repeat;
   -webkit-mask-size: 100% 100%;
@@ -106,7 +111,8 @@
   vertical-align: middle;
 }
 .mdi-chevron-up-bg {
-  background: url("/sprite.svg#shapes-chevron-up-view") no-repeat;
+  /*background: url("/sprite.svg#shapes-chevron-up-view") no-repeat;*/
+  background: url("/sprite.svg#chevron-up") no-repeat;
   background-size: 100% 100%;
   background-color: transparent;
   display: inline-block;

diff --git a/packages/preset-icons/src/core.ts b/packages/preset-icons/src/core.ts
@@ -14,10 +14,12 @@ const COLLECTION_NAME_PARTS_MAX = 3
 
 export { IconsOptions }
 
+/* TODO BEGIN-CLEANUP: types from @iconify/utils: remove them once published */
 interface GeneratedSpriteData {
   name: string
   asset: Uint8Array
 }
+/* TODO END-CLEANUP: types from @iconify/utils: remove them once published */
 
 interface PresetIcons extends Preset {
   generateCSSSVGSprites: () => AsyncIterableIterator<GeneratedSpriteData>
@@ -150,7 +152,7 @@ function createDynamicMatcher(
 
     let url: string
     if (sprites)
-      url = `url("unocss-${collection}-sprite.svg#shapes-${name}-view")`
+      url = `url("unocss-${collection}-sprite.svg#${name}")`
     else
       url = `url("data:image/svg+xml;utf8,${encodeSvgForCss(svg)}")`
 
@@ -182,6 +184,7 @@ function createDynamicMatcher(
   })
 }
 
+/* TODO BEGIN-CLEANUP: types from @iconify/utils: remove them once published */
 function createCSSSVGSpriteLoader(sprites?: CSSSVGSprites) {
   return async (collection: string) => {
     const collections = sprites?.sprites[collection]
@@ -290,3 +293,4 @@ async function loadSvgFromSprite(
     }
   }
 }
+/* TODO END-CLEANUP: types from @iconify/utils: remove them once published */
diff --git a/packages/preset-icons/src/create-sprite.ts b/packages/preset-icons/src/create-sprite.ts
@@ -126,9 +126,9 @@ function generateSpriteEntry(
 ) {
   const y = context.minY ?? 0
   const entry = `
-  <symbol id="shapes-${icon.name}" viewBox="${data.rawViewBox}">${data.content}</symbol>
-  <view id="shapes-${icon.name}-view" viewBox="${data.x} ${y} ${data.width} ${data.height}"/>
-  <use href="#shapes-${icon.name}" x="${data.x}" y="${y}" id="${icon.name}"/>`
+  <symbol id="s-${icon.name}" viewBox="${data.rawViewBox}">${data.content}</symbol>
+  <view id="${icon.name}" viewBox="${data.x} ${y} ${data.width} ${data.height}"/>
+  <use href="#s-${icon.name}" x="${data.x}" y="${y}"/>`
   context.minY = y + data.height + 1
   return entry
 }