Возможность импортить классы иконок через sass

src/components/ui/icons.js

@@ -1,12 +0,0 @@
-import icons from 'icons.font.json';
-
-const baseClass = 'icon';
-
-export default Object.keys(icons)
-    .filter((icon) => icon !== baseClass)
-    .reduce((acc, icon) => {
-        acc[icon.replace(`${baseClass}-`, '')] = `${icons[baseClass]} ${icons[icon]}`;
-
-        return acc;
-    }, {})
-    ;

src/components/ui/icons.scss

@@ -0,0 +1,10 @@
+@import '~icons.font.json';
+
+.arrowLeft {
+    composes: arrow;
+
+    display: inline-block;
+    transform: rotate(90deg);
+
+    font-size: 24px;
+}

src/icons.css.hbs

@@ -0,0 +1,25 @@
+@font-face {
+	font-family: "{{fontName}}";
+	src: {{{src}}};
+}
+
+.{{baseClass}} {
+	line-height: 1;
+}
+
+.{{baseClass}}:before {
+	font-family: {{fontName}} !important;
+	font-style: normal;
+	font-weight: normal !important;
+	vertical-align: top;
+}
+
+{{#each codepoints}}
+.{{../classPrefix}}{{@key}} {
+    composes: {{../baseClass}};
+
+    &:before {
+        content: "\\{{this}}";
+    }
+}
+{{/each}}

src/icons.font.json

@@ -1,6 +1,9 @@
 {
     "files": ["icons/webfont/*"],
+    "fileName": "[fontname][ext]",
     "fontName": "ely-account-icons",
+    "cssTemplate": "icons.css.hbs",
+    "classPrefix": "",
     "fixedWidth": true,
     "normalize": true
 }