From d426a9471b09fd16355fc70b0c05e5bd69cdef00 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Tue, 26 Sep 2023 16:52:30 +0200
Subject: [PATCH] [Ikoner] Bedre SVG-export (#2300)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* :art: script for svg-parsing
* :bug: Fikset buffer av readFileScript
* :test_tube: Parse-svg test
* :memo: changeset
* :fire: forenklet svg i tester
* :fire: Fjernet svg-parser fra yarn.lock
* :bug: Tryggere svg-parsing
* :art: 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 | 5 +++
.../__tests__/validate-svg-parsing.mjs | 34 +++++++++++++++
@navikt/aksel-icons/config/parse-svg.js | 42 +++++++++++++++++++
@navikt/aksel-icons/package.json | 7 ++--
4 files changed, 84 insertions(+), 4 deletions(-)
create mode 100644 .changeset/odd-lamps-dress.md
create mode 100644 @navikt/aksel-icons/__tests__/validate-svg-parsing.mjs
create mode 100644 @navikt/aksel-icons/config/parse-svg.js
diff --git a/.changeset/odd-lamps-dress.md b/.changeset/odd-lamps-dress.md
new file mode 100644
index 0000000000..5cf9513283
--- /dev/null
+++ b/.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"`.
diff --git a/@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs b/@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs
new file mode 100644
index 0000000000..7b2619380c
--- /dev/null
+++ b/@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 = `
+ `;
+
+ const simpleSvgResult = `
+ `;
+
+ const advancedSvg = `
+ `;
+
+ const advancedSvgResult = `
+ `;
+
+ it("a", () => {
+ expect(parseIcon(simpleSvg)).toEqual(simpleSvgResult);
+ expect(parseIcon(advancedSvg)).toEqual(advancedSvgResult);
+ });
+});
diff --git a/@navikt/aksel-icons/config/parse-svg.js b/@navikt/aksel-icons/config/parse-svg.js
new file mode 100644
index 0000000000..402ba48e5d
--- /dev/null
+++ b/@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 };
diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json
index cad545f978..d253029d78 100644
--- a/@navikt/aksel-icons/package.json
+++ b/@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"