Generalize and add weather

esbuild.config.mjs

@@ -17,7 +17,7 @@ const context = await esbuild.context({
 	},
 	entryPoints: ["main.ts"],
 	bundle: true,
-	loader: {'.svg': 'text'},
+	loader: {'.svg': 'text', '.less': 'text'},
 	external: [
 		"obsidian",
 		"electron",

less.d.ts

@@ -0,0 +1,6 @@
+// less.d.ts
+
+declare module '*.less' {
+    const value: string;
+    export default value;
+  }

main.ts

@@ -10,12 +10,43 @@ import {
 
 import rpgAwesomeSvgStr from "./node_modules/rpg-awesome/fonts/rpgawesome-webfont.svg";
 import govIconsSvgStr from "./node_modules/govicons/fonts/govicons-webfont.svg";
+import weatherIconsSvgStr from "./node_modules/weather-icons/font/weathericons-regular-webfont.svg";
+
+// Need to load in and use a regex like
+// ^@([a-z-0-9]+)\s*:\s*"\\([0-9a-f]*)";/gm
+// to get the less variables.
 
 interface iconSets {
 	name: string;
 	description: string;
 	prefix: string;
 	contents: string;
+	parseName: (element: Element) => string;
+}
+
+// https://www.npmjs.com/package/foundation-icon-fonts
+// https://github.com/zurb/foundation-icon-fonts
+// https://zurb.com/playground/foundation-icon-fonts-3
+
+// https://www.npmjs.com/package/map-icons
+// http://map-icons.com/o
+
+import weatherIconsVariables from "./node_modules/weather-icons/weather-icons/variables.less";
+const weatherIconsVariableRexexp = /^@([a-z-0-9]+)\s*:\s*"\\([0-9a-f]*)";/gm;
+const unicodeCharToIconName = Object.fromEntries(
+	Array.from(
+		weatherIconsVariables.matchAll(weatherIconsVariableRexexp),
+		(m) => [String.fromCharCode(parseInt(m[2], 16)), m[1]]
+	)
+);
+
+function dereferenceWeatherIcons(element: Element): string {
+	const iconUnicode = element.getAttribute("unicode") || "unknown";
+	return unicodeCharToIconName[iconUnicode];
+}
+
+function glyphElement(element: Element): string {
+	return element.getAttribute("glyph-name") || "";
 }
 
 const availableIcons: iconSets[] = [
@@ -25,12 +56,22 @@ const availableIcons: iconSets[] = [
 			"The RPG Awesome Icon Set from https://nagoshiashumari.github.io/Rpg-Awesome/",
 		prefix: "ra",
 		contents: rpgAwesomeSvgStr,
+		parseName: glyphElement,
 	},
 	{
 		name: "GovIcons",
 		description: "Government Icons from https://govicons.io/",
 		prefix: "gi",
 		contents: govIconsSvgStr,
+		parseName: glyphElement,
+	},
+	{
+		name: "Weather Icons",
+		description:
+			"Weather-related Icons from https://erikflowers.github.io/weather-icons/",
+		prefix: "wi",
+		contents: weatherIconsSvgStr,
+		parseName: dereferenceWeatherIcons,
 	},
 ];
 
@@ -49,34 +90,59 @@ export default class AdditionalIconsPlugin extends Plugin {
 
 	async onload() {
 		await this.loadSettings();
-		console.log(DEFAULT_SETTINGS);
 
 		// This adds a settings tab so the user can configure various aspects of the plugin
 		this.addSettingTab(new AdditionalIconsSettingTab(this.app, this));
 
 		availableIcons.forEach(async (iconSet) => {
 			if (this.settings.useIconsets[iconSet.name]) {
-				await this.addIconsToObsidian(iconSet.contents, iconSet.prefix);
+				await this.addIconsToObsidian(
+					iconSet.contents,
+					iconSet.prefix,
+					iconSet.parseName
+				);
 			}
 		});
 	}
 
 	async addIconsToObsidian(
 		svgFontString: string,
-		prefix: string
+		prefix: string,
+		parseName: (element: Element) => string
 	): Promise<void> {
 		const parser = new DOMParser();
 		const svgDom = parser.parseFromString(svgFontString, "image/svg+xml");
+		const fontFace = svgDom.querySelector("font-face");
+		const fontHorizAdvance = +(
+			svgDom.querySelector("font")?.getAttribute("horiz-adv-x") || 1024
+		);
+		const fontAscent = +(fontFace?.getAttribute("ascent") || 960);
+		const fontDescent = +(fontFace?.getAttribute("descent") || -64);
 		// Ultimately, the transform should be determined from the glyph
 		// attributes like ascent and descent attributes.  For icons generated
 		// with icomoon this should be sufficient for now.
 		svgDom.querySelectorAll("glyph").forEach((el) => {
+			const horizAdvance = +(
+				el.getAttribute("horiz-adv-x") || fontHorizAdvance
+			);
+			const xAspect = 100.0 / horizAdvance;
+			const yAspect = 100 / (fontAscent - fontDescent);
+			const aspectRatio = xAspect > yAspect ? yAspect : xAspect;
+			const matrix = [
+				aspectRatio,
+				-aspectRatio,
+				(fontAscent * 100) / (fontAscent - fontDescent),
+			];
 			addIcon(
-				`${prefix}-${el.getAttribute("glyph-name")}`,
-				`<path transform="matrix(0.09765625 0 0 -0.09765625 0, 99.2)" d="${el.getAttribute(
-					"d"
-				)}"/>`
+				`${prefix}-${parseName(el)}`,
+				`<path transform="matrix(${matrix[0]} 0 0 ${matrix[1]} 0 ${
+					matrix[2]
+				})" d="${el.getAttribute("d")}"/>`
 			);
+			// console.log(
+			// 	"Adding",
+			// 	`${prefix}-${parseName(el)} with transform ${matrix}`
+			// );
 		});
 	}
 

package.json

@@ -23,6 +23,7 @@
 	},
 	"dependencies": {
 		"govicons": "^1.6.0",
-		"rpg-awesome": "^0.2.0"
+		"rpg-awesome": "^0.2.0",
+		"weather-icons": "^1.3.2"
 	}
 }