@liner-fe/internal-icon 1.0.0

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@liner-fe/internal-icon",
+  "version": "1.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "generate-svg": "node scripts/generate-svg-files.js",
+    "generate-tsx": "node scripts/generate-tsx-components.js",
+    "build": "pnpm generate-svg && pnpm generate-tsx",
+    "build:package": "pnpm build"
+  }
+}

package/scripts/generate-svg-files.js

@@ -0,0 +1,36 @@
+const fs = require('fs');
+const path = require('path');
+
+const figmaData = JSON.parse(fs.readFileSync('./figma.json', 'utf8'));
+
+function convertToCurrentColor(svgString) {
+  return svgString.replace(/#1E1E1F/g, 'currentColor');
+}
+
+function optimizeSvg(svgString) {
+  return svgString.replace(/\s+/g, ' ').replace(/>\s+</g, '><').trim();
+}
+
+const svgDir = './';
+if (!fs.existsSync(svgDir)) {
+  fs.mkdirSync(svgDir, { recursive: true });
+}
+
+Object.entries(figmaData).forEach(([iconName, variants]) => {
+  const iconDir = path.join(svgDir, iconName);
+  if (!fs.existsSync(iconDir)) {
+    fs.mkdirSync(iconDir, { recursive: true });
+  }
+
+  Object.entries(variants).forEach(([variant, svgString]) => {
+    if (svgString && svgString.trim() !== '') {
+      const convertedSvg = convertToCurrentColor(svgString);
+      const optimizedSvg = optimizeSvg(convertedSvg);
+
+      const fileName = `${variant}.svg`;
+      const filePath = path.join(iconDir, fileName);
+
+      fs.writeFileSync(filePath, optimizedSvg);
+    }
+  });
+});

package/scripts/generate-tsx-components.js

@@ -0,0 +1,179 @@
+const fs = require('fs');
+const path = require('path');
+
+// 상수 정의
+const FIGMA_DATA_PATH = './figma.json';
+const OUTPUT_DIR = './assets';
+const INDEX_FILE_PATH = './index.tsx';
+
+const COLOR = 'type';
+const FILL_TYPE = 'fillType';
+
+// SVG 색상 변환 함수
+function convertToCurrentColor(svgString) {
+  return svgString
+    .replace(/fill="#1E1E1F"/g, `style={{ fill: \`var(--$\{${COLOR}\})\` }}`)
+    .replace(/fill="white"/g, `style={{ fill: \`var(--$\{${FILL_TYPE}\})\` }}`);
+}
+
+// SVG 속성 정규화 함수
+function normalizeSvgAttributes(svgString) {
+  return svgString
+    .replace(/fill-rule/g, 'fillRule')
+    .replace(/clip-rule/g, 'clipRule')
+    .replace(/width="\d+"/, 'width={iconSizeMap[size]}')
+    .replace(/height="\d+"/, 'height={iconSizeMap[size]}')
+    .replace(/xmlns="http:\/\/www.w3.org\/2000\/svg"/, 'ref={ref} className={className} {...props}')
+    .replace(/style="[^"]*"/g, '')
+    .replace(/xmlns="http:\/\/www.w3.org\/1999\/xhtml"/g, '');
+}
+
+// 케밥 케이스 변환 함수
+const KEBAB_REGEX = /\p{Lu}/gu;
+const kebabCase = (str, keepLeadingDash = true) => {
+  const result = str.replace(KEBAB_REGEX, (match) => `-${match.toLowerCase()}`);
+
+  if (keepLeadingDash) {
+    return result;
+  }
+
+  if (result.startsWith('-')) {
+    return result.slice(1);
+  }
+
+  return result;
+};
+
+// 파스칼 케이스 변환 함수
+const generateIconName = (iconName) => {
+  return iconName
+    .split('-')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+};
+
+// 아이콘 Props 인터페이스 생성 함수
+const IconProps = (additionalProps = '') => `{
+  fill?: boolean;
+  thick?: boolean;
+  className?: string;
+  ${additionalProps}
+  ${COLOR}?: BasicColorType;
+  ${FILL_TYPE}?: BasicColorType;
+}`;
+
+// 디렉토리 생성 함수
+function ensureDirectoryExists(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+// SVG 변형 처리 함수
+function processSvgVariants(variants) {
+  const variantSvgs = {};
+
+  Object.entries(variants).forEach(([variant, svgString]) => {
+    if (svgString && svgString.trim() !== '') {
+      variantSvgs[variant] = normalizeSvgAttributes(convertToCurrentColor(svgString));
+    }
+  });
+
+  return variantSvgs;
+}
+
+// TSX 컴포넌트 코드 생성 함수
+function generateTsxComponent(componentName, variantSvgs, defaultSvg) {
+  return `import React, { forwardRef } from 'react';
+import { iconSizeMap } from '@liner-fe/design-token-primitive';
+import { IconProps } from '../../index';
+
+export const Icon${componentName} = forwardRef<SVGSVGElement, IconProps>(
+  ({ fill = false, thick = false, size = 'm', type = 'neutral-label-primary', className, fillType = 'inverse-label-primary', ...props }, ref) => {
+  if (fill && thick) {
+    return ${variantSvgs['fill-thick'] || defaultSvg};
+  } else if (fill) {
+    return ${variantSvgs.fill || defaultSvg};
+  } else if (thick) {
+    return ${variantSvgs.thick || defaultSvg};
+  } 
+  
+  return ${variantSvgs.default || defaultSvg};
+  }
+);
+`;
+}
+
+// 메인 실행 함수
+function generateIconComponents() {
+  const figmaData = JSON.parse(fs.readFileSync(FIGMA_DATA_PATH, 'utf8'));
+
+  // 출력 디렉토리 생성
+  ensureDirectoryExists(OUTPUT_DIR);
+
+  Object.entries(figmaData).forEach(([iconName, variants]) => {
+    const iconDir = path.join(OUTPUT_DIR, iconName);
+    ensureDirectoryExists(iconDir);
+
+    const variantSvgs = processSvgVariants(variants);
+
+    if (Object.keys(variantSvgs).length > 0) {
+      const componentName = generateIconName(iconName);
+      const defaultSvg = variantSvgs.default || variantSvgs.thick || Object.values(variantSvgs)[0];
+
+      const tsxCode = generateTsxComponent(componentName, variantSvgs, defaultSvg);
+      const filePath = path.join(iconDir, 'index.tsx');
+
+      fs.writeFileSync(filePath, tsxCode);
+    }
+  });
+}
+
+// 인덱스 파일 생성 함수
+function generateIndexFile() {
+  const figmaData = JSON.parse(fs.readFileSync(FIGMA_DATA_PATH, 'utf8'));
+
+  const imports = Object.keys(figmaData)
+    .map((iconName) => {
+      const componentName = generateIconName(iconName);
+      return `export { Icon${componentName} } from './assets/${iconName}';`;
+    })
+    .join('\n');
+
+  const iconKeys = Object.keys(figmaData).map((iconName) => {
+    return `"${kebabCase(generateIconName(iconName), false)}"`;
+  });
+
+  const indexContent = `import React, { SVGProps } from 'react';
+  import { BasicColorType, iconSizeMap } from '@liner-fe/design-token-primitive';
+${imports}
+
+export type IconName = ${iconKeys.join(' | ')};
+
+export type IconSizeKey = keyof typeof iconSizeMap;
+
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill' | 'name'> ${IconProps('size?: keyof typeof iconSizeMap;')}
+
+export type IconComponentType = React.ForwardRefExoticComponent<
+  Omit<IconProps, 'ref'> & React.RefAttributes<SVGSVGElement>
+>;
+`;
+
+  fs.writeFileSync(INDEX_FILE_PATH, indexContent, (err) => {
+    if (err) {
+      console.error(err);
+    }
+
+    console.log('Index file generated successfully');
+  });
+}
+
+// 메인 실행
+function main() {
+  generateIconComponents();
+  generateIndexFile();
+}
+
+console.log('실행');
+
+main();