Resvg pipe

packages/assetpack/package.json

@@ -54,6 +54,7 @@
     "@napi-rs/woff-build": "^0.2.0",
     "@node-rs/crc32": "^1.10.3",
     "@pixi/runner": "^7.4.2",
+    "@resvg/resvg-js": "^2.6.2",
     "@types/cli-progress": "3.11.5",
     "@types/clone": "^2.1.4",
     "@types/fluent-ffmpeg": "^2.1.24",

packages/assetpack/src/resvg/index.ts

@@ -0,0 +1,33 @@
+import { AssetPipe, checkExt, createNewAssetAt, Logger, PluginOptions } from "../core/index.js";
+import { Resvg, ResvgRenderOptions } from "@resvg/resvg-js";
+
+export interface ResvgOptions extends PluginOptions {
+    resvg?: Partial<ResvgRenderOptions>
+}
+
+export function resvg(_options: ResvgOptions = {}): AssetPipe<ResvgOptions, 'nrs'>
+{
+    return {
+        name: "resvg",
+        tags: {
+            nrs: 'nrs'
+        },
+        defaultOptions: {
+            resvg: {
+                fitTo: {
+                    mode: "original"
+                }
+            }
+        },
+        test(asset, options)
+        {
+            return !asset.metaData[this.tags!.nrs] && checkExt(asset.path);
+        },
+        async transform(asset, options)
+        {
+            const transformedAsset = createNewAssetAt(asset, asset.filename.replace(/\.svg$/, ".png"));
+            transformedAsset.buffer = new Resvg(asset.buffer, options.resvg).render().asPng();
+            return [transformedAsset];
+        },
+    }
+}

packages/assetpack/test/resvg/Resvg.test.ts

@@ -0,0 +1,46 @@
+import { assetPath, createFolder, getInputDir, getOutputDir } from '../utils/index.js';
+import { describe, expect, it } from 'vitest';
+import { resvg } from '../../src/resvg/index.js';
+import { AssetPack } from '../../src/core/index.js';
+import { existsSync } from 'fs-extra';
+
+const pkg = 'resvg';
+
+describe('Resvg', () => {
+    it("should create png formatted files", async () => {
+        const testName = 'svg-convert';
+        const inputDir = getInputDir(pkg, testName);
+        const outputDir = getOutputDir(pkg, testName);
+
+        createFolder(
+            pkg,
+            {
+                name: testName,
+                files: [
+                    {
+                        name: "pixijs-logo-full-dark.svg",
+                        content: assetPath("vectors/pixijs-logo-full-dark.svg")
+                    },
+                    {
+                        name: "pixijs-logo-transparent-light.svg",
+                        content: assetPath("vectors/pixijs-logo-transparent-light.svg")
+                    }
+                ],
+                folders: []
+            });
+
+        const assetpack = new AssetPack({
+            entry: inputDir,
+            output: outputDir,
+            cache: false,
+            pipes: [
+                resvg()
+            ]
+        })
+
+        await assetpack.run();
+
+        expect(existsSync(`${outputDir}/pixijs-logo-full-dark.png`)).toBe(true);
+        expect(existsSync(`${outputDir}/pixijs-logo-transparent-light.png`)).toBe(true);
+    });
+});