@mumukji/icons

머먹지(Mumukji) 서비스의 브랜드 아이덴티티를 담은 공식 아이콘 패키지입니다. 일관된 디자인 시스템을 위해 모든 아이콘은 24x24(일반) 또는 48x48(음식) ViewBox를 기준으로 설계되었습니다.

Features

• React Ready: 즉시 사용 가능한 React 컴포넌트 제공
• TypeScript: 모든 컴포넌트에 대한 타입 정의 포함
• Optimized: SVGO를 통해 최적화된 SVG 파일
• Dual Format: React 컴포넌트 및 원본 SVG 파일 지원

설치

# npm 사용 시
npm install @mumukji/icons

# pnpm 사용 시
pnpm add @mumukji/icons

사용

React 컴포넌트

• 기본적으로 currentColor를 따르므로, 부모 요소의 글자 색상을 변경하거나 color props를 통해 색상을 조절할 수 있습니다.
• IconFood로 시작하는 아이콘들은 브랜드 고유의 컬러를 포함하고 있습니다. 이 아이콘들은 color 속성에 영향을 받지 않고 원본 그래픽을 유지합니다.

import { IconArrowRight } from '@mumukji/icons';
// 개별 경로 import도 지원합니다.
import { IconArrowRight } from '@mumukji/icons/IconArrowRight';

export default function Example() {
  return (
    <>
      <IconArrowRight size={24} />
      <IconArrowRight size={48} color='red' />
    </>
  );
}

Icon Props

| Prop | Type | Default | Description | | ----------- | -------- | -------------- | --------------------------------- | | size | number | 24 / 48 | 아이콘의 가로/세로 크기 | | color | string | currentColor | 아이콘의 색상 (일반 아이콘 한정) | | className | string | - | 추가적인 스타일링을 위한 클래스명 |

SVG 직접 사용

import arrowRight from '@mumukji/icons/IconArrowRight';

아이콘 목록

일반 아이콘

| Preview | Component | SVG | | :---: | :---: | :---: | | | IconAddCircleFilled | add-circle-filled.svg | | | IconAddCircleOutlined | add-circle-outlined.svg | | | IconAdd | add.svg | | | IconArrowDown | arrow-down.svg | | | IconArrowLeft | arrow-left.svg | | | IconArrowRight | arrow-right.svg | | | IconArrowUp | arrow-up.svg | | | IconCheck | check.svg | | | IconCloseCircleFilled | close-circle-filled.svg | | | IconCloseCircleOutlined | close-circle-outlined.svg | | | IconClose | close.svg | | | IconCopy | copy.svg | | | IconEditGroup | edit-group.svg | | | IconEditList | edit-list.svg | | | IconEdit | edit.svg | | | IconHome | home.svg | | | IconRice | rice.svg | | | IconSetting | setting.svg | | | IconShare | share.svg | | | IconStarFilled | star-filled.svg | | | IconStarOutlined | star-outlined.svg | | | IconTrash | trash.svg |

음식 아이콘

| Preview | Component | SVG | | :---: | :---: | :---: | | | IconFoodAsian | food-asian.svg | | | IconFoodBunsik | food-bunsik.svg | | | IconFoodChicken | food-chicken.svg | | | IconFoodChinese | food-chinese.svg | | | IconFoodDiet | food-diet.svg | | | IconFoodFastfood | food-fastfood.svg | | | IconFoodJapanese | food-japanese.svg | | | IconFoodKorean | food-korean.svg | | | IconFoodWestern | food-western.svg |

License

MIT