feat: add default options

Author: zhpenkov

packages/font-icons/scss/_variables.scss

@@ -1,5 +1,7 @@
 @use "./_font.scss" as *;
 
+$ki-icon-default-size: md !default;
+
 $ki-font-family: "WebComponentsIcons" !default;
 $ki-icon-size: 16px !default;
 
@@ -17,6 +19,16 @@ $ki-font-url: if( $ki-embed-font == true, $ki-font-data-url, $ki-font-file-url )
 
 $ki-css-prefix: "k-i-" !default;
 
+$ki-icon-sizes: (
+    xs: $ki-icon-size-xs,
+    sm: $ki-icon-size-sm,
+    md: $ki-icon-size-md,
+    lg: $ki-icon-size-lg,
+    xl: $ki-icon-size-xl,
+    xxl: $ki-icon-size-xxl,
+    xxxl: $ki-icon-size-xxxl
+) !default;
+
 $ki-rotate-map: (
     0: 0deg,
     45: 45deg,

packages/font-icons/scss/index.scss

@@ -22,7 +22,6 @@
         width: 1em;
         height: 1em;
         outline: 0;
-        font-size: $ki-icon-size;
         font-family: $ki-font-family;
         font-style: normal;
         font-variant: normal;
@@ -45,38 +44,21 @@
         &:focus {
             text-decoration: none;
         }
+
+        // SVG Icon sizes
+        @each $size, $value in $ki-icon-sizes {
+            #{if($ki-icon-default-size == $size, "&,", null)}
+            &.k-icon-#{$size} {
+                font-size: $value;
+            }
+        }
     }
 
     // Empty icon
     .k-i-none::before {
         display: none !important; // stylelint-disable-line
     }
 
-
-    // Icon sizes
-    .k-icon-xs {
-        font-size: $ki-icon-size-xs;
-    }
-    .k-icon-sm {
-        font-size: $ki-icon-size-sm;
-    }
-    .k-icon-md {
-        font-size: $ki-icon-size-md;
-    }
-    .k-icon-lg {
-        font-size: $ki-icon-size-lg;
-    }
-    .k-icon-xl {
-        font-size: $ki-icon-size-xl;
-    }
-    .k-icon-xxl {
-        font-size: $ki-icon-size-xxl;
-    }
-    .k-icon-xxxl {
-        font-size: $ki-icon-size-xxxl;
-    }
-
-
     // Flip
     .k-flip-h {
         transform: scaleX( -1 );

packages/svg-icons/scss/_variables.scss

@@ -1,3 +1,5 @@
+$ki-icon-default-size: md !default;
+
 $ki-icon-size: 16px !default;
 
 $ki-icon-size-xs: calc( #{$ki-icon-size} * .75 ) !default;
@@ -8,6 +10,16 @@ $ki-icon-size-xl: calc( #{$ki-icon-size} * 1.5 ) !default;
 $ki-icon-size-xxl: calc( #{$ki-icon-size} * 2 ) !default;
 $ki-icon-size-xxxl: calc( #{$ki-icon-size} * 3 ) !default;
 
+$ki-icon-sizes: (
+    xs: $ki-icon-size-xs,
+    sm: $ki-icon-size-sm,
+    md: $ki-icon-size-md,
+    lg: $ki-icon-size-lg,
+    xl: $ki-icon-size-xl,
+    xxl: $ki-icon-size-xxl,
+    xxxl: $ki-icon-size-xxxl
+) !default;
+
 $ki-rotate-map: (
     0: 0deg,
     45: 45deg,

packages/svg-icons/scss/index.scss

@@ -4,8 +4,6 @@
 @mixin kendo-svg-icon-styles() {
 
     .k-svg-icon {
-        width: $ki-icon-size;
-        height: $ki-icon-size;
         outline: 0;
         line-height: 1;
         display: inline-flex;
@@ -19,41 +17,17 @@
             fill: currentColor;
             flex: 1 1 auto;
         }
-    }
 
-    // SVG Icon sizes
-    .k-svg-icon {
-        &.k-icon-xs {
-            width: $ki-icon-size-xs;
-            height: $ki-icon-size-xs;
-        }
-        &.k-icon-sm {
-            width: $ki-icon-size-sm;
-            height: $ki-icon-size-sm;
-        }
-        &.k-icon-md {
-            width: $ki-icon-size-md;
-            height: $ki-icon-size-md;
-        }
-        &.k-icon-lg {
-            width: $ki-icon-size-lg;
-            height: $ki-icon-size-lg;
-        }
-        &.k-icon-xl {
-            width: $ki-icon-size-xl;
-            height: $ki-icon-size-xl;
-        }
-        &.k-icon-xxl {
-            width: $ki-icon-size-xxl;
-            height: $ki-icon-size-xxl;
-        }
-        &.k-icon-xxxl {
-            width: $ki-icon-size-xxxl;
-            height: $ki-icon-size-xxxl;
+        // SVG Icon sizes
+        @each $size, $value in $ki-icon-sizes {
+            #{if($ki-icon-default-size == $size, "&,", null)}
+            &.k-icon-#{$size} {
+                width: $value;
+                height: $value;
+            }
         }
     }
 
-
     // Flip
     .k-flip-h,
     .k-flip-v,