wip

2 files changed, 56 insertions, 0 deletions

diff --git a/webpack/module/rules/fa.ts b/webpack/module/rules/fa.ts
new file mode 100644
index 0000000000..57691f9899
--- /dev/null
+++ b/webpack/module/rules/fa.ts
@@ -0,0 +1,54 @@
+/**
+ * Replace fontawesome symbols
+ */
+
+const StringReplacePlugin = require('string-replace-webpack-plugin');
+
+const fontawesome = require('@fortawesome/fontawesome');
+const solid = require('@fortawesome/fontawesome-free-solid');
+
+// Adds all the icons from the Solid style into our library for easy lookup
+fontawesome.library.add(solid);
+
+export default () => ({
+	enforce: 'pre',
+	test: /\.(tag|js|ts)$/,
+	exclude: /node_modules/,
+	loader: StringReplacePlugin.replace({
+		replacements: [{
+			pattern: /%fa:(.+?)%/g, replacement: (_, key) => {
+				const args = key.split(' ');
+				let prefix = 'fas';
+				let klass = '';
+				let transform = '';
+				let name;
+
+				args.forEach(arg => {
+					if (arg == 'R' || arg == 'S') {
+						prefix =
+							arg == 'R' ? 'far' :
+							arg == 'S' ? 'fas' :
+							'';
+					} else if (arg[0] == '.') {
+						klass += arg.substr(1) + ' ';
+					} else if (arg[0] == '-') {
+						transform = arg.substr(1).split('|').join(' ');
+					} else {
+						name = arg;
+					}
+				});
+
+				const icon = fontawesome.icon({ prefix, iconName: name });
+
+				if (icon) {
+					icon.class = klass;
+					icon.transform = fontawesome.parse.transform(transform);
+					return `<i data-fa style="display:inline-block" class="${name}">${icon.html[0]}</i>`;
+				} else {
+					console.warn(`'${name}' not found in fa`);
+					return '';
+				}
+			}
+		}]
+	})
+});
diff --git a/webpack/module/rules/index.ts b/webpack/module/rules/index.ts
index 9c1262b3d6..79740ce48e 100644
--- a/webpack/module/rules/index.ts
+++ b/webpack/module/rules/index.ts
@@ -1,4 +1,5 @@
 import i18n from './i18n';
+import fa from './fa';
 import base64 from './base64';
 import themeColor from './theme-color';
 import tag from './tag';
@@ -7,6 +8,7 @@ import typescript from './typescript';
 
 export default (lang, locale) => [
 	i18n(lang, locale),
+	fa(),
 	base64(),
 	themeColor(),
 	tag(),