templates(*): remove mask-size from style sprites

Closes #74
IgniteUI · Jul 31, 2023 · e93da3a · e93da3a
1 parent 3aa8c17
commit e93da3a
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Material Icons Extended</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
+
diff --git a/main.js b/main.js
@@ -0,0 +1,8 @@
+import './dist/styles/sprite.css';
+import './style.css';
+import { youtube } from './src/socialMedia';
+
+document.querySelector('#app').innerHTML = `
+    <i class="imx-icon imx-github"></i>
+    ${youtube.value}
+`;
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "version": "3.0.0",
   "type": "module",
   "scripts": {
+    "start": "npm run build && vite dev",
     "build": "npm run clean && npm run build:a11y && vite build && npm run build:migrations",
     "build:a11y": "node scripts/a11y.mjs",
     "build:migrations": "tsc --listEmittedFiles --project ./migrations/tsconfig.json",

diff --git a/style.css b/style.css
@@ -0,0 +1,15 @@
+:root {
+    --icon-size: 48px;
+    --icon-color: orange;
+}
+
+.imx-icon {
+    --size: var(--icon-size);
+    --color: var(--icon-color);
+}
+
+svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    fill: var(--icon-color);
+}
diff --git a/vite-plugins/svg-spritemap/dist/template.css b/vite-plugins/svg-spritemap/dist/template.css
@@ -7,9 +7,7 @@
   width: var(--size);
   height: var(--size);
   mask-image: var(--icon);
-  mask-size: auto var(--size);
   mask-repeat: no-repeat;
   -webkit-mask-image: var(--icon);
-  -webkit-mask-size: auto var(--size);
   -webkit-mask-repeat: no-repeat;
 }
diff --git a/vite-plugins/svg-spritemap/dist/template.less b/vite-plugins/svg-spritemap/dist/template.less
@@ -15,9 +15,7 @@
 
     mask-image: var(--icon);
     mask-repeat: no-repeat;
-    mask-size: auto var(--size);
     -webkit-mask-image: var(--icon);
     -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: auto var(--size);
   }
 }
diff --git a/vite-plugins/svg-spritemap/dist/template.scss b/vite-plugins/svg-spritemap/dist/template.scss
@@ -17,9 +17,7 @@
 
     mask-image: var(--icon);
     mask-repeat: no-repeat;
-    mask-size: auto var(--size);
     -webkit-mask-image: var(--icon);
     -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: auto var(--size);
   }
 }
diff --git a/vite-plugins/svg-spritemap/dist/template.styl b/vite-plugins/svg-spritemap/dist/template.styl
@@ -16,4 +16,3 @@ imx-icon($name)
     mask-repeat: no-repeat
     -webkit-mask-image: var(--icon)
     -webkit-mask-repeat: no-repeat
-    -webkit-mask-size: auto var(--size)
diff --git a/vite-plugins/svg-spritemap/src/styles/template.css b/vite-plugins/svg-spritemap/src/styles/template.css
@@ -7,9 +7,7 @@
   width: var(--size);
   height: var(--size);
   mask-image: var(--icon);
-  mask-size: auto var(--size);
   mask-repeat: no-repeat;
   -webkit-mask-image: var(--icon);
-  -webkit-mask-size: auto var(--size);
   -webkit-mask-repeat: no-repeat;
 }
diff --git a/vite-plugins/svg-spritemap/src/styles/template.less b/vite-plugins/svg-spritemap/src/styles/template.less
@@ -15,9 +15,7 @@
 
     mask-image: var(--icon);
     mask-repeat: no-repeat;
-    mask-size: auto var(--size);
     -webkit-mask-image: var(--icon);
     -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: auto var(--size);
   }
 }
diff --git a/vite-plugins/svg-spritemap/src/styles/template.scss b/vite-plugins/svg-spritemap/src/styles/template.scss
@@ -17,9 +17,7 @@
 
     mask-image: var(--icon);
     mask-repeat: no-repeat;
-    mask-size: auto var(--size);
     -webkit-mask-image: var(--icon);
     -webkit-mask-repeat: no-repeat;
-    -webkit-mask-size: auto var(--size);
   }
 }
diff --git a/vite-plugins/svg-spritemap/src/styles/template.styl b/vite-plugins/svg-spritemap/src/styles/template.styl
@@ -16,4 +16,3 @@ imx-icon($name)
     mask-repeat: no-repeat
     -webkit-mask-image: var(--icon)
     -webkit-mask-repeat: no-repeat
-    -webkit-mask-size: auto var(--size)