Parse and render svg icons correctly

Author: adidahiya

packages/core/src/components/icon/_icon.scss

@@ -31,6 +31,9 @@ $icon-classes: (
   > svg {
     // prevent extra vertical whitespace
     display: block;
+    // paths parsed by generate-icon-paths.js are mirrored vertically, so we need
+    // to flip them upright here
+    transform: scaleY(-1);
 
     // inherit text color unless explicit fill is set
     &:not([fill]) {

packages/core/src/components/icon/iconUtils.ts

@@ -32,7 +32,7 @@ function kebabCaseToCamelCase<S extends string>(
 ): KebabCaseToCamelCase<S> {
     return (
         snakeCaseString
-        .split("_")
+        .split("-")
         .map((word, i) =>
             i === 0 ?
                 word.toLowerCase() :