@liner-fe/internal-icon 1.0.44 → 1.0.46

package/.ultra.cache.json

@@ -1 +1 @@
-{"files":{"lib":"1777427175120.917","node_modules":"1777427162557.5881","CHANGELOG.md":"cae98c429f412cac5a6f0e573055b050eef4e717","README.md":"e0a89d4fcf5bddf1f816bfb20a928ddb301b8d2c","figma.json":"59f77fec62cc40cbfa38d3cc1851e37cad331146","package.json":"1accd1d77b6eeaf895bdbab11a37efd92a707cb8","src/generate-svg-files.ts":"6e4949b774de5b509eaab4a1a8efa600ee9a17fc","src/generate-tsx-components.ts":"52991558d51f4d6261d637f36f0ff457c78a9670","src/index.ts":"9e03c9c45c92fc534262982bce233b91892c05f1","tsconfig.json":"298030567ca332304807fcdbb95d1218c9c0814f","tsup.config.ts":"8460f94f8ebd1d42fb4cc968298195ae5dd67cde"},"deps":{}}
+{"files":{"lib":"1778047140151.011","node_modules":"1778047125418.0737","CHANGELOG.md":"4cb59c0a03001fa11b7262a208191de8e48dc596","README.md":"e0a89d4fcf5bddf1f816bfb20a928ddb301b8d2c","figma.json":"59f77fec62cc40cbfa38d3cc1851e37cad331146","package.json":"693c54264a46a41b2fb8b06e3e44f8e5e72272e9","src/generate-svg-files.ts":"6e4949b774de5b509eaab4a1a8efa600ee9a17fc","src/generate-tsx-components.ts":"209fd8782cb7788e7fce3dbd79aee875ee7f317f","src/index.ts":"9e03c9c45c92fc534262982bce233b91892c05f1","tsconfig.json":"298030567ca332304807fcdbb95d1218c9c0814f","tsup.config.ts":"8460f94f8ebd1d42fb4cc968298195ae5dd67cde"},"deps":{}}

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @internal/icon
 
+## 1.0.46
+
+### Patch Changes
+
+- 112e68c: generate-tsx-components의 SVGO 설정에서 `cleanupIds`를 비활성화. 같은 페이지에 inline 렌더되는 아이콘들이 축약된 generic id(`a`, `b` 등)를 공유해 `url(#a)` 참조가 다른 아이콘의 정의를 가리키며 깨지던 문제 수정 (예: color-hwp가 color-table의 clipPath를 참조해 깨짐).
+
+## 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

package/lib/index.js

@@ -52,7 +52,25 @@ 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,
+              cleanupIds: false
+            }
+          }
+        }
+      ]
+    }).data;
+  }
+  __name(optimizeSvg, "optimizeSvg");
   const FIGMA_DATA_PATH = path3.resolve(__dirname, "../figma.json");
   const OUTPUT_DIR = "./assets";
   const INDEX_FILE_PATH = "./index.tsx";
@@ -104,7 +122,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;
@@ -153,7 +173,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,6 +1,6 @@
 {
   "name": "@liner-fe/internal-icon",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/generate-tsx-components.ts

@@ -1,7 +1,25 @@
 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,
+              cleanupIds: false,
+            },
+          },
+        },
+      ],
+    }).data;
+  }
+
   // 상수 정의
   const FIGMA_DATA_PATH = path.resolve(__dirname, '../figma.json');
   const OUTPUT_DIR = './assets';
@@ -86,7 +104,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 +167,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');