Merge pull request #44 from isBatak/fix/optimize

Fix/optimize

.changeset/unlucky-birds-relate.md

@@ -0,0 +1,5 @@
+---
+"@ikona/cli": patch
+---
+
+Fix optimize option

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",
   },
 });

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: {

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,31 @@ describe("generateIconFiles", () => {
 
     const hashContent = fs.readFileSync(context.hashPath, "utf-8");
     expect(hashContent).toMatchInlineSnapshot(`
-      "export const hash = 'e110e913b4764cd18e8e4639dbc2a026';
+      "export const hash = '${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(
+      `"<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><symbol id="icon1" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></symbol><symbol id="icon2" viewBox="0 0 24 24"><path d="m12 21.35-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"/></symbol></defs></svg>"`
+    );
+  });
 });

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<string>;
@@ -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;

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;
+}