@liner-fe/internal-icon 1.0.43 → 1.0.45

package/.ultra.cache.json

@@ -1 +1 @@
-{"files":{"lib":"1777425688807.4224","node_modules":"1777425674169.456","CHANGELOG.md":"505d7344ee19579877285ad7321c6ec7ab14d575","README.md":"e0a89d4fcf5bddf1f816bfb20a928ddb301b8d2c","figma.json":"59f77fec62cc40cbfa38d3cc1851e37cad331146","package.json":"f3aede9b430373e6e06a6ba6875d67dbc1b72a6b","src/generate-svg-files.ts":"207c9eeabf5593f57cd8e01c569b086ce98356fc","src/generate-tsx-components.ts":"52991558d51f4d6261d637f36f0ff457c78a9670","src/index.ts":"9e03c9c45c92fc534262982bce233b91892c05f1","tsconfig.json":"298030567ca332304807fcdbb95d1218c9c0814f","tsup.config.ts":"4dc8bfd36076fff8fa1d84a48a072d40e6581810"},"deps":{}}
+{"files":{"lib":"1777428555904.532","node_modules":"1777428541121.5059","CHANGELOG.md":"4b3a1e3902fa384773aeb7fe040f5d6315838d0d","README.md":"e0a89d4fcf5bddf1f816bfb20a928ddb301b8d2c","figma.json":"59f77fec62cc40cbfa38d3cc1851e37cad331146","package.json":"17a2459a39492e8ee716b484eada4ca0b4f80d6e","src/generate-svg-files.ts":"6e4949b774de5b509eaab4a1a8efa600ee9a17fc","src/generate-tsx-components.ts":"29612d03b5e8b69e7919b03627853d2e0f287ea4","src/index.ts":"9e03c9c45c92fc534262982bce233b91892c05f1","tsconfig.json":"298030567ca332304807fcdbb95d1218c9c0814f","tsup.config.ts":"8460f94f8ebd1d42fb4cc968298195ae5dd67cde"},"deps":{}}

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @internal/icon
 
+## 1.0.45
+
+### Patch Changes
+
+- dc55569: generate-tsx-components 에도 SVGO 적용. 아이콘 TSX 번들 크기 감소: @liner-fe/icon -26.4% (902 → 664 KB unpacked), @liner-fe/icon-rn -30.0% (448 → 314 KB unpacked).
+
+## 1.0.44
+
+### Patch Changes
+
+- 00f3c64: SVGO를 도입해 아이콘 SVG 생성 파이프라인 최적화. icon-rn의 SVG 결과물 총합이 약 33.7% 감소.
+
 ## 1.0.43
 
 ### Patch Changes

package/lib/index.js

@@ -11,6 +11,7 @@ var __dirname = /* @__PURE__ */ getDirname();
 // src/generate-svg-files.ts
 import fs from "fs";
 import path2 from "path";
+import { optimize } from "svgo";
 var generateSvgFiles = /* @__PURE__ */ __name(() => {
   const figmaData = JSON.parse(fs.readFileSync(path2.resolve(__dirname, "../figma.json"), "utf8"));
   function convertToCurrentColor(svgString) {
@@ -18,7 +19,7 @@ var generateSvgFiles = /* @__PURE__ */ __name(() => {
   }
   __name(convertToCurrentColor, "convertToCurrentColor");
   function optimizeSvg(svgString) {
-    return svgString.replace(/\s+/g, " ").replace(/>\s+</g, "><").trim();
+    return optimize(svgString, { multipass: true }).data;
   }
   __name(optimizeSvg, "optimizeSvg");
   const svgDir = "./";
@@ -51,7 +52,24 @@ var generateSvgFiles = /* @__PURE__ */ __name(() => {
 // src/generate-tsx-components.ts
 import fs2 from "fs";
 import path3 from "path";
+import { optimize as optimize2 } from "svgo";
 var generateTsxComponents = /* @__PURE__ */ __name(() => {
+  function optimizeSvg(svgString) {
+    return optimize2(svgString, {
+      multipass: true,
+      plugins: [
+        {
+          name: "preset-default",
+          params: {
+            overrides: {
+              convertColors: false
+            }
+          }
+        }
+      ]
+    }).data;
+  }
+  __name(optimizeSvg, "optimizeSvg");
   const FIGMA_DATA_PATH = path3.resolve(__dirname, "../figma.json");
   const OUTPUT_DIR = "./assets";
   const INDEX_FILE_PATH = "./index.tsx";
@@ -103,7 +121,9 @@ var generateTsxComponents = /* @__PURE__ */ __name(() => {
     };
     Object.entries(variants).forEach(([variant, svgString]) => {
       if (svgString && svgString.trim() !== "") {
-        variantSvgs[variant] = normalizeSvgAttributes(convertToCurrentColor(svgString));
+        variantSvgs[variant] = normalizeSvgAttributes(
+          convertToCurrentColor(optimizeSvg(svgString))
+        );
       }
     });
     return variantSvgs;
@@ -152,7 +172,7 @@ export const Icon${componentName} = forwardRef<SVGSVGElement, IconProps>(
         const tsxCode = generateColorTsxComponent(
           componentName,
           // @ts-ignore
-          normalizeSvgAttributes(variants.default)
+          normalizeSvgAttributes(optimizeSvg(variants.default))
         );
         const filePath = path3.join(iconDir, "index.tsx");
         fs2.writeFileSync(filePath, tsxCode);

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@liner-fe/internal-icon",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "svgo": "4.0.1"
+  },
   "devDependencies": {
     "@types/node": "^25.1.0",
     "tsup": "^8.5.0",

package/src/generate-svg-files.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { optimize } from 'svgo';
 
 export const generateSvgFiles = () => {
   const figmaData = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../figma.json'), 'utf8'));
@@ -9,7 +10,7 @@ export const generateSvgFiles = () => {
   }
 
   function optimizeSvg(svgString: string): string {
-    return svgString.replace(/\s+/g, ' ').replace(/>\s+</g, '><').trim();
+    return optimize(svgString, { multipass: true }).data;
   }
 
   const svgDir = './';

package/src/generate-tsx-components.ts

@@ -1,7 +1,24 @@
 import fs from 'fs';
 import path from 'path';
+import { optimize } from 'svgo';
 
 export const generateTsxComponents = () => {
+  function optimizeSvg(svgString: string): string {
+    return optimize(svgString, {
+      multipass: true,
+      plugins: [
+        {
+          name: 'preset-default',
+          params: {
+            overrides: {
+              convertColors: false,
+            },
+          },
+        },
+      ],
+    }).data;
+  }
+
   // 상수 정의
   const FIGMA_DATA_PATH = path.resolve(__dirname, '../figma.json');
   const OUTPUT_DIR = './assets';
@@ -86,7 +103,9 @@ export const generateTsxComponents = () => {
     Object.entries(variants).forEach(([variant, svgString]) => {
       if (svgString && svgString.trim() !== '') {
         // @ts-ignore
-        variantSvgs[variant] = normalizeSvgAttributes(convertToCurrentColor(svgString));
+        variantSvgs[variant] = normalizeSvgAttributes(
+          convertToCurrentColor(optimizeSvg(svgString)),
+        );
       }
     });
 
@@ -147,7 +166,7 @@ export const Icon${componentName} = forwardRef<SVGSVGElement, IconProps>(
         const tsxCode = generateColorTsxComponent(
           componentName,
           // @ts-ignore
-          normalizeSvgAttributes(variants.default),
+          normalizeSvgAttributes(optimizeSvg(variants.default)),
         );
 
         const filePath = path.join(iconDir, 'index.tsx');

package/tsup.config.ts

@@ -5,6 +5,7 @@ export default defineConfig({
   outDir: 'lib',
   format: 'esm',
   bundle: true,
+  external: ['svgo'],
   minify: false,
   keepNames: true,
   clean: true,