fix(Icon): 아이콘이 깨지는 이슈 수정 (#119)

Lubycon · Aug 15, 2021 · 369808d · 369808d
1 parent da5586e
commit 369808d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 29 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,10 +1,15 @@
-> 이 PR이 BREAKING_CHANGE를 포함하고 있다면 반드시 명시해주세요!
+<!-- 이 PR이 BREAKING_CHANGE를 포함하고 있다면 반드시 명시해주세요! -->
+<!-- PR 타이틀을 "feat(Tooltip): ~~를 변경한 PR" 처럼 Conventional Commit 포맷으로 맞춰주세요! -->
 
 ## 변경사항
 어떤 사항이 변경되었는지 자세히 적어주세요!
 
-## 디자인 시안 링크
-디자인 시안 링크를 첨부해주세요!
+<!-- 
+ex.
+### Tooltip
+- 엘리먼트 포지션을 루트 기반으로 계산하도록 수정
+### Skeleton
+- 그라데이션 애니메이션 렌더 시 Repaint 없도록 수정
+-->
 
 ## 집중적으로 리뷰 받고 싶은 부분이 있나요?
-
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -25,7 +25,7 @@ type Props = CombineElementProps<
 const Icon = ({
   name,
   size = 16,
-  type: propsType = 'outline',
+  type: propsType = 'filled',
   color = colors.gray100,
   className,
   ...rest
@@ -63,14 +63,7 @@ const Icon = ({
 
   return (
     <span
-      className={classnames(
-        'lubycon-icon',
-        {
-          'lubycon-icon--outline': type === 'outline',
-          'lubycon-icon--filled': type === 'filled',
-        },
-        className
-      )}
+      className={classnames('lubycon-icon', className)}
       style={{ width: size, height: size }}
       {...rest}
     >

diff --git a/src/sass/components/_Icon.scss b/src/sass/components/_Icon.scss
@@ -1,15 +1,7 @@
 .lubycon-icon {
   display: inline-block;
-  &--outline {
-    path {
-      fill: transparent;
-    }
-  }
-  &--filled {
-    path {
-      stroke: transparent;
-    }
-  }
+  fill: currentColor;
+
   &__icon-body {
     &--hide-origin-icon {
       display: none;

diff --git a/src/stories/Components/Icons/index.stories.mdx b/src/stories/Components/Icons/index.stories.mdx
@@ -4,6 +4,7 @@ import Icon, { IconType } from '../../../components/Icon';
 import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
 import { colors, ColorProperty } from '../../../constants/colors';
 import { Fragment } from 'react';
+import { commonIcons, logoIcons } from './data';
 
 <Meta title="Components/Icon" components={Icon} />
 
@@ -22,12 +23,26 @@ Lubycon UI Kit은 ionicons를 기반으로 하는 `Icon` 컴포넌트를 제공
 이렇게 Fallback PNG 아이콘이 렌더된 경우에는 아이콘의 색상을 변경할 수 없기 때문에 `Black(#000000)` 색상으로 렌더됩니다.
 
 <Canvas>
-  <Story name="Preview">
-    <Icon name="add-circle" size={50} />
-    <Icon name="airplane" size={50} />
-    <Icon name="battery-charging" type="filled" size={50} />
-    <Icon name="logo-octocat" size={50} />
-    <Icon name="logo-npm" size={50} />
+  <Story name="All Icons">
+    <Row>
+      {commonIcons.map((icon) => (
+        <Column xs={1} key={icon}>
+          <Icon name={icon} size={50} />
+        </Column>
+      ))}
+    </Row>
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story name="All Logos">
+    <Row>
+      {logoIcons.map((icon) => (
+        <Column xs={1} key={icon}>
+          <Icon name={icon} size={50} />
+        </Column>
+      ))}
+    </Row>
   </Story>
 </Canvas>
 
@@ -55,6 +70,9 @@ ionicons는 `filled`, `outline`, `sharp` 총 3가지의 아이콘 타입을 제
     <Icon name="accessibility" color="#ff0000" size={50} />
     <Icon name="accessibility" color="#48cfad" size={50} />
     <Icon name="accessibility" color={colors.blue50} size={50} />
+    <Icon name="car-sport" color={colors.blue50} type="outline" size={50} />
+    <Icon name="car-sport" color={colors.yellow50} type="filled" size={50} />
+    <Icon name="car-sport" color={colors.red50} type="sharp" size={50} />
   </Story>
 </Canvas>