Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Aug 15, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b58d7a
스토리업데이트
evan-moon Aug 15, 2021
45a8393
Merge branch 'main' of https://github.com/Lubycon/lubycon-ui-kit into…
evan-moon Aug 15, 2021
b5b9d35
chore: pull_request_template 수정
evan-moon Aug 15, 2021
6144f8a
feat(Icon): 기본 아이콘 타입을 filled로 변경
evan-moon Aug 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
> 이 PR이 BREAKING_CHANGE를 포함하고 있다면 반드시 명시해주세요!
<!-- 이 PR이 BREAKING_CHANGE를 포함하고 있다면 반드시 명시해주세요! -->
<!-- PR 타이틀을 "feat(Tooltip): ~~를 변경한 PR" 처럼 Conventional Commit 포맷으로 맞춰주세요! -->

## 변경사항
어떤 사항이 변경되었는지 자세히 적어주세요!

## 디자인 시안 링크
디자인 시안 링크를 첨부해주세요!
<!--
ex.
### Tooltip
- 엘리먼트 포지션을 루트 기반으로 계산하도록 수정
### Skeleton
- 그라데이션 애니메이션 렌더 시 Repaint 없도록 수정
-->

## 집중적으로 리뷰 받고 싶은 부분이 있나요?

11 changes: 2 additions & 9 deletions src/components/Icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ type Props = CombineElementProps<
const Icon = ({
name,
size = 16,
type: propsType = 'outline',
type: propsType = 'filled',
color = colors.gray100,
className,
...rest
Expand Down Expand Up @@ -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}
>
Expand Down
12 changes: 2 additions & 10 deletions src/sass/components/_Icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
.lubycon-icon {
display: inline-block;
&--outline {
path {
fill: transparent;
}
}
&--filled {
path {
stroke: transparent;
}
}
Comment on lines -3 to -12
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요 녀석들이 아이콘을 깨지게 만드는 주 원인이었기 때문에 transparent를 없애고 fill 속성이 color 속성의 값을 따라가도록 변경하였습니다.

fill: currentColor;

&__icon-body {
&--hide-origin-icon {
display: none;
Expand Down
30 changes: 24 additions & 6 deletions src/stories/Components/Icons/index.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down