Repository: svg-sprite/svg-sprite (js)

Issue:
Preserve @font-face in <style>
@<!-- -->font-face CSS rules are not included in the generated sprite SVG. Can these be included as well so that we can use custom fonts in SVGs? Fonts have been included as data URL base64 strings.

Pull request:
Fixed #288: Preserving `@font-face` in style defs
Closes #288 

Patch:
diff --git a/lib/svg-sprite/shape.js b/lib/svg-sprite/shape.js
index 6e4c993..bdb35bc 100644
--- a/lib/svg-sprite/shape.js
+++ b/lib/svg-sprite/shape.js
@@ -778,7 +778,7 @@ SVGShape.prototype.resetNamespace = function() {
 };
 
 /**
- * Replace ID references
+ * Replace ID and class references
  *
  * @param {string} str                  String
  * @param {object} substIds             ID substitutions
@@ -798,7 +798,7 @@ SVGShape.prototype._replaceIdAndClassnameReferences = function(str, substIds, su
 };
 
 /**
- * Recursively replace ID references in CSS selectors
+ * Recursively replace ID and class references in CSS selectors
  *
  * @param {string} str                  Original CSS text
  * @param {Array} rules                 CSS rules
@@ -810,6 +810,11 @@ SVGShape.prototype._replaceIdAndClassnameReferencesInCssSelectors = function(str
     let css = '';
 
     rules.forEach(rule => {
+        if (rule.constructor.name === 'CSSFontFaceRule') {
+            css += `@font-face${str.substring(rule.__starts + 1, rule.__ends)}`; // preserving @font-face rule
+            return;
+        }
+
         let selText = rule.selectorText;
 
         // @-rule


Test patch:
diff --git a/test/svg-sprite/special/font-face.test.js b/test/svg-sprite/special/font-face.test.js
new file mode 100644
index 0000000..c52fc9c
--- /dev/null
+++ b/test/svg-sprite/special/font-face.test.js
@@ -0,0 +1,42 @@
+const path = require('path');
+const SVGSpriter = require('../../../lib/svg-sprite.js');
+const { paths } = require('../../helpers/constants.js');
+
+describe('testing font face preserving', () => {
+    it('preserve font-face in sprite', async() => {
+        expect.hasAssertions();
+
+        const TEST_FONT_FACE = '@font-face{font-family:Montserrat-SemiBold;src:url() format(\'woff\');font-weight:600;font-style:normal;font-display:swap}';
+        const spriter = new SVGSpriter({
+            dest: '.',
+            shape: {
+                transform: []
+            }
+        });
+        spriter.add(
+            path.resolve(path.join(paths.fixtures, 'svg/special/font-face.svg')),
+            'font-face.svg',
+            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.06 13.7">
+                <defs>
+                    <style>
+                        .cls-4{fill:#fff;border:1px}
+                        .d{fill:red}
+                        ${TEST_FONT_FACE}
+                    </style>
+                </defs>
+                <text font-family="Montserrat-SemiBold"
+                      font-weight="600">Google Play
+                </text>
+            </svg>`
+        );
+        const { result } = await spriter.compileAsync({
+            symbol: {
+                sprite: 'svg/font-face.svg'
+            }
+        });
+
+        expect(result.symbol.sprite.contents.toString().trim()).toContain(
+            TEST_FONT_FACE
+        );
+    });
+});