From 4d161caa449c8f098027618a4ab9a8caea7b22bc Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 12:40:51 +0200 Subject: [PATCH 1/9] :art: script for svg-parsing --- @navikt/aksel-icons/config/parse-svg.js | 43 +++++++++++++++++++++++++ yarn.lock | 1 + 2 files changed, 44 insertions(+) create mode 100644 @navikt/aksel-icons/config/parse-svg.js diff --git a/@navikt/aksel-icons/config/parse-svg.js b/@navikt/aksel-icons/config/parse-svg.js new file mode 100644 index 00000000000..30cd7f09c66 --- /dev/null +++ b/@navikt/aksel-icons/config/parse-svg.js @@ -0,0 +1,43 @@ +const fastglob = require("fast-glob"); +const path = require("path"); +const { + existsSync, + readFileSync, + mkdirSync, + rmSync, + writeFileSync, +} = require("fs"); + +main(); + +const iconFolder = path.resolve(__dirname, "../dist/svg"); + +function main() { + const basePath = path.resolve(__dirname, "../icons"); + + const svgList = fastglob.sync("*.svg", { cwd: basePath }); + + if (existsSync(iconFolder)) { + rmSync(iconFolder, { recursive: true, force: true }); + } + mkdirSync(iconFolder); + + svgList.map((svg) => { + const icon = readFileSync(`${basePath}/${svg}`); + 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; +} diff --git a/yarn.lock b/yarn.lock index 208a22a0745..869e33bb921 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4222,6 +4222,7 @@ __metadata: lodash.startcase: 4.4.0 react: ^18.0.0 rehype-parse: 8.0.4 + svg-parser: ^2.0.4 typescript: ^5.1.6 unified: 10.1.2 languageName: unknown From 468d658aa4f0d7c6433f4ecba37683059068072c Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 12:42:49 +0200 Subject: [PATCH 2/9] :bug: Fikset buffer av readFileScript --- @navikt/aksel-icons/config/parse-svg.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/@navikt/aksel-icons/config/parse-svg.js b/@navikt/aksel-icons/config/parse-svg.js index 30cd7f09c66..653b9332831 100644 --- a/@navikt/aksel-icons/config/parse-svg.js +++ b/@navikt/aksel-icons/config/parse-svg.js @@ -10,10 +10,9 @@ const { main(); -const iconFolder = path.resolve(__dirname, "../dist/svg"); - function main() { const basePath = path.resolve(__dirname, "../icons"); + const iconFolder = path.resolve(__dirname, "../dist/svg"); const svgList = fastglob.sync("*.svg", { cwd: basePath }); @@ -23,7 +22,7 @@ function main() { mkdirSync(iconFolder); svgList.map((svg) => { - const icon = readFileSync(`${basePath}/${svg}`); + const icon = readFileSync(`${basePath}/${svg}`).toString(); writeFileSync(`${iconFolder}/${svg}`, parseIcon(icon)); }); } From 84a4c2633606124b6595d0d652547879b200d40b Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 12:50:52 +0200 Subject: [PATCH 3/9] :test_tube: Parse-svg test --- .../__tests__/validate-svg-parsing.mjs | 34 +++++++++++++++++++ @navikt/aksel-icons/config/parse-svg.js | 2 ++ @navikt/aksel-icons/package.json | 2 +- 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 @navikt/aksel-icons/__tests__/validate-svg-parsing.mjs 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 00000000000..1e53bce37cb --- /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 index 653b9332831..6afbadd2e5d 100644 --- a/@navikt/aksel-icons/config/parse-svg.js +++ b/@navikt/aksel-icons/config/parse-svg.js @@ -40,3 +40,5 @@ function parseIcon(svgString) { return icon; } + +module.exports = { parseIcon }; diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json index cad545f9784..deefee35847 100644 --- a/@navikt/aksel-icons/package.json +++ b/@navikt/aksel-icons/package.json @@ -53,7 +53,7 @@ "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-svg": "node config/parse-svg.js", "copy": "yarn copy-util && yarn copy-svg", "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", From 22fa2774fc9f0fd9e5ebda9458085ab525a928af Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 12:52:56 +0200 Subject: [PATCH 4/9] :memo: changeset --- .changeset/odd-lamps-dress.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/odd-lamps-dress.md diff --git a/.changeset/odd-lamps-dress.md b/.changeset/odd-lamps-dress.md new file mode 100644 index 00000000000..5cf95132839 --- /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"`. From 9b3f0fc7245e6744de1e49440a75b6ddcbd178c0 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 12:55:31 +0200 Subject: [PATCH 5/9] :fire: forenklet svg i tester --- .../__tests__/validate-svg-parsing.mjs | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs b/@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs index 1e53bce37cb..7b2619380c9 100644 --- a/@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs +++ b/@navikt/aksel-icons/__tests__/validate-svg-parsing.mjs @@ -2,28 +2,28 @@ import { parseIcon } from "../config/parse-svg"; describe(`SVG should be correctly parsed`, () => { const simpleSvg = ` - + `; const simpleSvgResult = ` - + `; const advancedSvg = ` - - - - + + + + `; const advancedSvgResult = ` - - - - + + + + `; From 3e94e9282952625ab6439eb89dca907d2fd44f26 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 12:56:44 +0200 Subject: [PATCH 6/9] :fire: Fjernet svg-parser fra yarn.lock --- yarn.lock | 1 - 1 file changed, 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 869e33bb921..208a22a0745 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4222,7 +4222,6 @@ __metadata: lodash.startcase: 4.4.0 react: ^18.0.0 rehype-parse: 8.0.4 - svg-parser: ^2.0.4 typescript: ^5.1.6 unified: 10.1.2 languageName: unknown From 33ef75818980fd838887036c3e825336d082f9e3 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 19 Sep 2023 13:23:29 +0200 Subject: [PATCH 7/9] :bug: Tryggere svg-parsing --- @navikt/aksel-icons/package.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json index deefee35847..c46537c40e3 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": "node config/parse-svg.js", - "copy": "yarn copy-util && yarn copy-svg", + "parse-svg": "node config/parse-svg.js", + "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" From d40daa921274e480c0a2bd5788c7c734f6426b71 Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 26 Sep 2023 13:29:27 +0200 Subject: [PATCH 8/9] =?UTF-8?q?:art:=20Kj=C3=B8rer=20n=C3=A5=20ikke=20main?= =?UTF-8?q?-script=20i=20tester?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- @navikt/aksel-icons/config/parse-svg.js | 4 +--- @navikt/aksel-icons/package.json | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/@navikt/aksel-icons/config/parse-svg.js b/@navikt/aksel-icons/config/parse-svg.js index 6afbadd2e5d..ef934c56470 100644 --- a/@navikt/aksel-icons/config/parse-svg.js +++ b/@navikt/aksel-icons/config/parse-svg.js @@ -8,8 +8,6 @@ const { writeFileSync, } = require("fs"); -main(); - function main() { const basePath = path.resolve(__dirname, "../icons"); const iconFolder = path.resolve(__dirname, "../dist/svg"); @@ -41,4 +39,4 @@ function parseIcon(svgString) { return icon; } -module.exports = { parseIcon }; +module.exports = { parseIcon, main }; diff --git a/@navikt/aksel-icons/package.json b/@navikt/aksel-icons/package.json index c46537c40e3..d253029d782 100644 --- a/@navikt/aksel-icons/package.json +++ b/@navikt/aksel-icons/package.json @@ -52,7 +52,7 @@ ], "scripts": { "create-icons": "svgr --silent --index-template config/index-template.js --out-dir src icons", - "parse-svg": "node config/parse-svg.js", + "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 && yarn parse-svg", From e2a9ce78a053a3d84309528d16460553840778d8 Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Tue, 26 Sep 2023 16:48:15 +0200 Subject: [PATCH 9/9] Update @navikt/aksel-icons/config/parse-svg.js Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- @navikt/aksel-icons/config/parse-svg.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/aksel-icons/config/parse-svg.js b/@navikt/aksel-icons/config/parse-svg.js index ef934c56470..402ba48e5d8 100644 --- a/@navikt/aksel-icons/config/parse-svg.js +++ b/@navikt/aksel-icons/config/parse-svg.js @@ -19,7 +19,7 @@ function main() { } mkdirSync(iconFolder); - svgList.map((svg) => { + svgList.forEach((svg) => { const icon = readFileSync(`${basePath}/${svg}`).toString(); writeFileSync(`${iconFolder}/${svg}`, parseIcon(icon)); });