From 3559e71e70f60dbf8494dac28d3fc49919774a0d Mon Sep 17 00:00:00 2001
From: fabianschoepgens <fabianschoepgens@googlemail.com>
Date: Mon, 2 Aug 2021 15:29:00 +0200
Subject: [PATCH] I added CSS vars to use as content

---
 src/rulesets.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/rulesets.js b/src/rulesets.js
index dd53901..069bc03 100644
--- a/src/rulesets.js
+++ b/src/rulesets.js
@@ -248,11 +248,22 @@ const createWebFontRuleSets = (iconFont, rulesets, glyphs, options) => {
   rulesets.root.insertAfter(rulesets.fontFaceRule, iconRule);
 
 
-  let baseRule = iconRule;
+ let baseRule = iconRule
+		, vars = postcss.rule({
+		selector: ':root',
+	});
 
   // append glyphs
   glyphs.forEach((glyph) => {
 
+		let glyphVal = glyph.codepoint.toString(16).toUpperCase()
+
+		// add css vars
+		vars = vars.append({
+			prop: `--${iconFont.fontName}-${glyph.name}`,
+			value: `'\\${glyphVal}'`
+		});
+
     [
       {
         prefix: useClassNamePrefix,
@@ -273,7 +284,7 @@ const createWebFontRuleSets = (iconFont, rulesets, glyphs, options) => {
       });
       fontRule.append({
         prop: 'content',
-        value: `'\\${glyph.codepoint.toString(16).toUpperCase()}'`
+        value: `'\\${glyphVal}'`
       });
 
       // insert ruleset
@@ -286,6 +297,9 @@ const createWebFontRuleSets = (iconFont, rulesets, glyphs, options) => {
 
   });
 
+	// Insert Vars
+	rulesets.root.insertAfter(baseRule, vars);
+
 };