From 29f30e381971273b31c3386478521e263bfd3081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivica=20Batini=C4=87?= Date: Fri, 31 May 2024 00:01:42 +0200 Subject: [PATCH 1/3] fix: optimize --- examples/nextjs/ikona.config.ts | 10 +- ...prite.896ef8a679fd764c89669d6db4e76082.svg | 1 + ...prite.e9114a6947f107a8f41f7da9781389cc.svg | 300 ------------------ packages/cli/__tests__/fixtures/config.ts | 2 +- .../icons/generate-icon-file.test.ts | 48 ++- packages/cli/src/icons/generate-icon-files.ts | 5 +- packages/cli/src/utils/optimize.ts | 20 ++ 7 files changed, 67 insertions(+), 319 deletions(-) create mode 100644 examples/nextjs/public/icons/sprite.896ef8a679fd764c89669d6db4e76082.svg delete mode 100644 examples/nextjs/public/icons/sprite.e9114a6947f107a8f41f7da9781389cc.svg create mode 100644 packages/cli/src/utils/optimize.ts diff --git a/examples/nextjs/ikona.config.ts b/examples/nextjs/ikona.config.ts index 5bb6f6f..6dc5a41 100644 --- a/examples/nextjs/ikona.config.ts +++ b/examples/nextjs/ikona.config.ts @@ -1,14 +1,14 @@ -import { defineConfig } from '@ikona/cli'; +import { defineConfig } from "@ikona/cli"; export default defineConfig({ verbose: false, icons: { - optimize: false, - inputDir: 'src/assets/icons', - spriteOutputDir: 'public/icons', + optimize: true, + inputDir: "src/assets/icons", + spriteOutputDir: "public/icons", hash: true, }, illustrations: { - inputDir: 'public/illustrations', + inputDir: "public/illustrations", }, }); diff --git a/examples/nextjs/public/icons/sprite.896ef8a679fd764c89669d6db4e76082.svg b/examples/nextjs/public/icons/sprite.896ef8a679fd764c89669d6db4e76082.svg new file mode 100644 index 0000000..7dd6df0 --- /dev/null +++ b/examples/nextjs/public/icons/sprite.896ef8a679fd764c89669d6db4e76082.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/nextjs/public/icons/sprite.e9114a6947f107a8f41f7da9781389cc.svg b/examples/nextjs/public/icons/sprite.e9114a6947f107a8f41f7da9781389cc.svg deleted file mode 100644 index 0ffdbdc..0000000 --- a/examples/nextjs/public/icons/sprite.e9114a6947f107a8f41f7da9781389cc.svg +++ /dev/null @@ -1,300 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/cli/__tests__/fixtures/config.ts b/packages/cli/__tests__/fixtures/config.ts index da7b504..a5204b5 100644 --- a/packages/cli/__tests__/fixtures/config.ts +++ b/packages/cli/__tests__/fixtures/config.ts @@ -5,7 +5,7 @@ export const configFixture: Config = { icons: { inputDir: "icons", spriteOutputDir: "output", - optimize: false, // TODO fix optimize + optimize: true, hash: true, }, illustrations: { diff --git a/packages/cli/__tests__/icons/generate-icon-file.test.ts b/packages/cli/__tests__/icons/generate-icon-file.test.ts index 172a88e..8602ade 100644 --- a/packages/cli/__tests__/icons/generate-icon-file.test.ts +++ b/packages/cli/__tests__/icons/generate-icon-file.test.ts @@ -7,23 +7,30 @@ import { heartIcon } from "../fixtures/icons"; import { configFixture } from "../fixtures/config"; describe("generateIconFiles", () => { - const context = createIconsContext(configFixture); - const files = ["icon1.svg", "icon2.svg"]; + const root = { + output: { + types: {}, + }, + "icons/icon1.svg": heartIcon, + "icons/icon2.svg": heartIcon, + }; afterEach(() => { mockFs.restore(); }); it("should generate icon files and write changes to the file system", async () => { - mockFs({ - output: { - types: {}, + const context = createIconsContext({ + ...configFixture, + icons: { + ...configFixture.icons, + optimize: false, }, - "icons/icon1.svg": heartIcon, - "icons/icon2.svg": heartIcon, }); + mockFs(root); + const { hash } = await generateIconFiles({ files, context }); const spritePath = hash @@ -63,8 +70,29 @@ describe("generateIconFiles", () => { const hashContent = fs.readFileSync(context.hashPath, "utf-8"); expect(hashContent).toMatchInlineSnapshot(` - "export const hash = 'e110e913b4764cd18e8e4639dbc2a026'; - " - `); + "export const hash = '`); + }); + + it("should generate and optimize sprite", async () => { + const context = createIconsContext({ + ...configFixture, + icons: { + ...configFixture.icons, + optimize: true, + }, + }); + + mockFs(root); + + const { hash } = await generateIconFiles({ files, context }); + + const spritePath = hash + ? addHashToSpritePath(context.spriteFilepath, hash) + : context.spriteFilepath; + + const spriteContent = fs.readFileSync(spritePath, "utf-8"); + expect(spriteContent).toMatchInlineSnapshot( + `""` + ); }); }); diff --git a/packages/cli/src/icons/generate-icon-files.ts b/packages/cli/src/icons/generate-icon-files.ts index 7479998..97ac417 100644 --- a/packages/cli/src/icons/generate-icon-files.ts +++ b/packages/cli/src/icons/generate-icon-files.ts @@ -2,7 +2,6 @@ import crypto from "crypto"; import fsExtra from "fs-extra"; import * as path from "node:path"; import { writeIfChanged } from "../utils/validations"; -import { loadConfig, optimize } from "svgo"; import { calculateFileSizeInKB } from "../utils/file"; import { svgSpriteTemplate } from "./templates/svg-sprite"; import { iconName } from "./icon-name"; @@ -12,6 +11,7 @@ import { iconsTemplate } from "./templates/icons"; import { hashTemplate } from "./templates/hash"; import { createIconsContext } from "./context"; import { addHashToSpritePath } from "../utils/hash"; +import { optimize } from "../utils/optimize"; interface GenerateIconFilesOptions { files: Array; @@ -62,8 +62,7 @@ export async function generateIconFiles({ let output = svgSpriteTemplate(iconsData); if (shouldOptimize) { - const config = (await loadConfig()) || undefined; - output = optimize(output, config).data; + output = optimize(output); } let hash; diff --git a/packages/cli/src/utils/optimize.ts b/packages/cli/src/utils/optimize.ts new file mode 100644 index 0000000..528224b --- /dev/null +++ b/packages/cli/src/utils/optimize.ts @@ -0,0 +1,20 @@ +import { optimize as svgOptimize, type Config } from "svgo"; + +export const defaultSVGOConfig: Config = { + plugins: [ + { + name: "preset-default", + params: { + overrides: { + removeHiddenElems: false, + removeUselessDefs: false, + cleanupIds: false, + }, + }, + }, + ], +}; + +export function optimize(output: string, options: Config = defaultSVGOConfig) { + return svgOptimize(output, options).data; +} From b44af77d0c80f58141f3aa82acfd4135c8f85997 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivica=20Batini=C4=87?= Date: Fri, 31 May 2024 00:02:36 +0200 Subject: [PATCH 2/3] chore: changeset --- .changeset/unlucky-birds-relate.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/unlucky-birds-relate.md diff --git a/.changeset/unlucky-birds-relate.md b/.changeset/unlucky-birds-relate.md new file mode 100644 index 0000000..ccc3f1e --- /dev/null +++ b/.changeset/unlucky-birds-relate.md @@ -0,0 +1,5 @@ +--- +"@ikona/cli": patch +--- + +Fix optimize option From 8215b5c3aa113c6b4ba8cccf8cd166bb8c0d05b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivica=20Batini=C4=87?= Date: Fri, 31 May 2024 00:12:43 +0200 Subject: [PATCH 3/3] chore: fix tests --- packages/cli/__tests__/icons/generate-icon-file.test.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/cli/__tests__/icons/generate-icon-file.test.ts b/packages/cli/__tests__/icons/generate-icon-file.test.ts index 8602ade..ab751f2 100644 --- a/packages/cli/__tests__/icons/generate-icon-file.test.ts +++ b/packages/cli/__tests__/icons/generate-icon-file.test.ts @@ -70,7 +70,9 @@ describe("generateIconFiles", () => { const hashContent = fs.readFileSync(context.hashPath, "utf-8"); expect(hashContent).toMatchInlineSnapshot(` - "export const hash = '`); + "export const hash = '${hash}'; + " + `); }); it("should generate and optimize sprite", async () => {