Merge pull request #139 from IT-Cotato/experimental/COT-12_add_pixel_…

…icon_library

Experimental/cot 12 add pixel icon library

package.json

@@ -8,6 +8,7 @@
     "@craco/craco": "^7.1.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@hackernoon/pixel-icon-library": "^1.0.2",
     "@mui/icons-material": "^5.15.20",
     "@mui/lab": "^6.0.0-beta.9",
     "@mui/material": "^6.1.2",
@@ -109,7 +110,8 @@
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "generate-icon-types": "node scripts/generateIconTypes.js"
   },
   "browserslist": {
     "production": [

scripts/generateIconTypes.js

@@ -0,0 +1,23 @@
+const fs = require('fs');
+const path = require('path');
+
+// 경로 설정
+const iconDir = path.resolve(__dirname, '../node_modules/@hackernoon/pixel-icon-library/icons/SVG');
+const styles = ['regular', 'solid'];
+
+// 아이콘 이름 추출 및 타입 생성
+styles.forEach((style) => {
+  const iconsPath = path.join(iconDir, style);
+  const iconFiles = fs.readdirSync(iconsPath);
+
+  const iconNames = iconFiles
+    .filter((file) => file.endsWith('.svg'))
+    .map((file) => file.replace('.svg', ''));
+
+  const typeDef = `export type ${style.charAt(0).toUpperCase() + style.slice(1)}IconName = ${iconNames
+    .map((name) => `'${name}'`)
+    .join(' | ')};`;
+
+  const outputPath = path.resolve(__dirname, `../src/types/${style}IconNames.ts`);
+  fs.writeFileSync(outputPath, typeDef);
+});

src/components/CotatoIcon.tsx

@@ -0,0 +1,64 @@
+import React, { ObjectHTMLAttributes } from 'react';
+import { regularIcons, solidIcons } from '../utils/iconLoader';
+import { RegularIconName } from '../types/regularIconNames';
+import { SolidIconName } from '../types/solidIconNames';
+import { useTheme } from 'styled-components';
+
+//
+//
+//
+
+interface CotatoIconProps extends ObjectHTMLAttributes<HTMLObjectElement> {
+  icon: RegularIconName | SolidIconName;
+  size?: string;
+  color?: string;
+}
+
+//
+//
+//
+
+/**
+ * Common Icon Component for Cotato, from Pixel Icon Library
+ * ref: https://www.npmjs.com/package/@hackernoon/pixel-icon-library?activeTab=readme
+ */
+const CotatoIcon: React.FC<CotatoIconProps> = ({ icon, color, size, ...rest }) => {
+  const theme = useTheme();
+
+  const icons = icon in solidIcons ? solidIcons : regularIcons;
+  const Icon = icons[icon as keyof typeof icons];
+
+  const defaultStyle = {
+    backgroundColor: color || theme.colors.common.black,
+    width: '24px',
+    height: '24px',
+  };
+
+  if (!Icon) {
+    return <div>X</div>;
+  }
+
+  //
+  //
+  //
+
+  return (
+    <div
+      {...rest}
+      style={{
+        ...rest.style,
+        width: size || defaultStyle.width,
+        height: size || defaultStyle.height,
+        backgroundColor: color || theme.colors.common.black,
+        WebkitMaskImage: `url(${Icon})`,
+        WebkitMaskRepeat: 'no-repeat',
+        WebkitMaskPosition: 'center center',
+        maskImage: `url(${Icon})`,
+        maskRepeat: 'no-repeat',
+        maskPosition: 'center center',
+      }}
+    />
+  );
+};
+
+export default CotatoIcon;

src/types/regularIconNames.ts

@@ -0,0 +1,181 @@
+export type RegularIconName =
+  | 'ad'
+  | 'analytics'
+  | 'angle-down'
+  | 'angle-left'
+  | 'angle-right'
+  | 'angle-up'
+  | 'arrow-alt-circle-down'
+  | 'arrow-alt-circle-left'
+  | 'arrow-alt-circle-right'
+  | 'arrow-alt-circle-up'
+  | 'arrow-circle-down'
+  | 'arrow-circle-left'
+  | 'arrow-circle-right'
+  | 'arrow-circle-up'
+  | 'arrow-down'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'arrow-up'
+  | 'at'
+  | 'badge-check'
+  | 'bank'
+  | 'bars'
+  | 'bell-exclaimation'
+  | 'bell-mute'
+  | 'bell'
+  | 'bold'
+  | 'bolt'
+  | 'book-heart'
+  | 'bookmark'
+  | 'box-usd'
+  | 'brightness-high'
+  | 'brightness-low'
+  | 'bullet-list'
+  | 'bullhorn'
+  | 'calender'
+  | 'cc'
+  | 'chart-line'
+  | 'chart-network'
+  | 'check-box'
+  | 'check-circle'
+  | 'check-list'
+  | 'check'
+  | 'chevron-down'
+  | 'chevron-up'
+  | 'circle-notch'
+  | 'clipboard'
+  | 'clock'
+  | 'cloud-download-alt'
+  | 'cloud-upload'
+  | 'code'
+  | 'cog'
+  | 'comment-dots'
+  | 'comment-quote'
+  | 'comment'
+  | 'comments'
+  | 'copy'
+  | 'credit-card'
+  | 'crown'
+  | 'divider'
+  | 'download-alt'
+  | 'download'
+  | 'edit'
+  | 'ellipses-horizontal-circle'
+  | 'ellipses-horizontal'
+  | 'ellipses-vertical-circle'
+  | 'ellipses-vertical'
+  | 'envelope'
+  | 'exclaimation'
+  | 'exclamation-triangle'
+  | 'expand'
+  | 'external-link'
+  | 'eye-cross'
+  | 'eye'
+  | 'face-thinking'
+  | 'file-import'
+  | 'filter-alt-circle'
+  | 'filter'
+  | 'fire'
+  | 'flag-checkered'
+  | 'flag'
+  | 'folder-open'
+  | 'folder'
+  | 'globe-americas'
+  | 'globe'
+  | 'grid'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'headphones'
+  | 'heart'
+  | 'highlight'
+  | 'hockey-mask'
+  | 'home'
+  | 'image'
+  | 'info-circle'
+  | 'italics'
+  | 'lightbulb'
+  | 'link'
+  | 'location-pin'
+  | 'lock-alt'
+  | 'lock-open'
+  | 'lock'
+  | 'login'
+  | 'logout'
+  | 'message-dots'
+  | 'message'
+  | 'minus'
+  | 'moon'
+  | 'music'
+  | 'newspaper'
+  | 'numbered-list'
+  | 'octagon-check'
+  | 'octagon-times'
+  | 'page-break'
+  | 'paperclip'
+  | 'paragraph'
+  | 'pause'
+  | 'pen-nib'
+  | 'pen'
+  | 'pencil-ruler'
+  | 'pencil'
+  | 'people-carry'
+  | 'phone-ringing-high'
+  | 'phone-ringing-low'
+  | 'plane-departure'
+  | 'plane'
+  | 'play'
+  | 'playlist'
+  | 'plus'
+  | 'print'
+  | 'pro'
+  | 'question'
+  | 'quote-left'
+  | 'quote-right'
+  | 'receipt'
+  | 'refresh'
+  | 'retro-camera'
+  | 'robot'
+  | 'save'
+  | 'search'
+  | 'seedlings'
+  | 'share'
+  | 'shop'
+  | 'shopping-cart'
+  | 'shuffle'
+  | 'sort'
+  | 'sound-mute'
+  | 'sound-on'
+  | 'spinner-third'
+  | 'spinner'
+  | 'star-crescent'
+  | 'star'
+  | 'strike-through'
+  | 'sun'
+  | 'table'
+  | 'tag'
+  | 'themes'
+  | 'thumbsdown'
+  | 'thumbsup'
+  | 'thumbtack'
+  | 'times-circle'
+  | 'times'
+  | 'translate'
+  | 'trash-alt'
+  | 'trash'
+  | 'trending'
+  | 'trophy'
+  | 'underline'
+  | 'unlock-alt'
+  | 'unlock'
+  | 'upload-alt'
+  | 'upload'
+  | 'user-check'
+  | 'user-headset'
+  | 'user'
+  | 'users-crown'
+  | 'users'
+  | 'vote-yeah'
+  | 'wallet'
+  | 'window-close';