[Ikoner] Bedre SVG-export (#2300)

* 🎨 script for svg-parsing

* 🐛 Fikset buffer av readFileScript

* 🧪 Parse-svg test

* 📝 changeset

* 🔥 forenklet svg i tester

* 🔥 Fjernet svg-parser fra yarn.lock

* 🐛 Tryggere svg-parsing

* 🎨 Kjører nå ikke main-script i tester

* Update @navikt/aksel-icons/config/parse-svg.js

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

---------

Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>

.changeset/odd-lamps-dress.md

@@ -0,0 +1,5 @@
+---
+"@navikt/aksel-icons": minor
+---
+
+Ikoner: SVG export setter nå `height="1em"`, `width="1em"` og `fill="currentColor"`.

@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs

@@ -0,0 +1,34 @@
+import { parseIcon } from "../config/parse-svg";
+
+describe(`SVG should be correctly parsed`, () => {
+  const simpleSvg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="#23262A"/>
+  </svg>
+  `;
+
+  const simpleSvgResult = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="currentColor"/>
+  </svg>
+  `;
+
+  const advancedSvg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="#23262A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="#23262A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="#23262A"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="#23262A"/>
+  </svg>
+  `;
+
+  const advancedSvgResult = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="currentColor"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="18.1559 9.81056 17.4392Z" fill="currentColor"/>
+  </svg>
+  `;
+
+  it("a", () => {
+    expect(parseIcon(simpleSvg)).toEqual(simpleSvgResult);
+    expect(parseIcon(advancedSvg)).toEqual(advancedSvgResult);
+  });
+});

@navikt/aksel-icons/config/parse-svg.js

@@ -0,0 +1,42 @@
+const fastglob = require("fast-glob");
+const path = require("path");
+const {
+  existsSync,
+  readFileSync,
+  mkdirSync,
+  rmSync,
+  writeFileSync,
+} = require("fs");
+
+function main() {
+  const basePath = path.resolve(__dirname, "../icons");
+  const iconFolder = path.resolve(__dirname, "../dist/svg");
+
+  const svgList = fastglob.sync("*.svg", { cwd: basePath });
+
+  if (existsSync(iconFolder)) {
+    rmSync(iconFolder, { recursive: true, force: true });
+  }
+  mkdirSync(iconFolder);
+
+  svgList.forEach((svg) => {
+    const icon = readFileSync(`${basePath}/${svg}`).toString();
+    writeFileSync(`${iconFolder}/${svg}`, parseIcon(icon));
+  });
+}
+
+/**
+ *
+ * @param {string} SVG-string
+ * @returns {string} Parsed SVG-string
+ */
+function parseIcon(svgString) {
+  let icon = svgString;
+  icon = icon.replace(`width="24"`, `width="1em"`);
+  icon = icon.replace(`height="24"`, `height="1em"`);
+  icon = icon.replaceAll(`#23262A`, `currentColor`);
+
+  return icon;
+}
+
+module.exports = { parseIcon, main };

@navikt/aksel-icons/package.json

@@ -52,11 +52,10 @@
   ],
   "scripts": {
     "create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons",
-    "copy-util": "copyfiles util/* src",
-    "copy-svg": "copyfiles -f 'icons/*.svg' dist/svg/",
-    "copy": "yarn copy-util && yarn copy-svg",
+    "parse-svg": "node -e 'require(\"./config/parse-svg.js\").main()'",
+    "copy": "copyfiles util/* src",
     "update-metadata": "node config/metadata.js",
-    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata",
+    "build": "yarn copy && yarn create-icons && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && node config/cleanTypes.js && yarn update-metadata && yarn parse-svg",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
     "fetch-new:icons": "node config/figma/index.mjs",
     "zip:icons": "node config/zip.js"