Skip to content

Fix unexpected header hover effect on react18Icon #1203

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.

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

Merged
merged 1 commit into from
May 22, 2025

Conversation

VVSOGI
Copy link
Contributor

@VVSOGI VVSOGI commented May 22, 2025

안녕하세요. React 18 아이콘에서 예상치 못한 호버 이펙트가 발생해서 수정 코드 제안드립니다.

unexpected-hover

해당 문제는 svg width, height이 아주 크게 잡혀있어서 발생했습니다.

const react18Icon = (
  <svg
    stroke="currentColor"
    fill="none"
    strokeWidth="2"
    viewBox="0 0 24 24"
    strokeLinecap="round"
    strokeLinejoin="round"
    height="200px" <- 문제 발생 지점
    width="200px" <- 문제 발생 지점
    xmlns="http://www.w3.org/2000/svg">
    <path d="M8 8h1v8"></path>
    <path d="M15 12h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1zh-1a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1"></path>
  </svg>
);



아마도 이렇게 작성된 것은 다른 svg와 같은 크기인 28로 잡았을 때 react18Icon이 너무 작아서 크게 설정한 것 같습니다.
따라서 svg 속성인 width, height을 직접 변경하지 않고 해당 버튼에 overflow-hidden을 추가해서 문제 해결하는 것이 어떤지 여쭤봅니다!

svg-28-28 svg-200-200



수정 후 결과입니다.

success

필수 확인 사항

Copy link

vercel bot commented May 22, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
ko-legacy-reactjs-org ⬜️ Ignored (Inspect) Visit Preview May 22, 2025 9:37am

Copy link
Collaborator

@lumirlumir lumirlumir left a comment

Choose a reason for hiding this comment

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

나이스 캐치! 감사합니다

@lumirlumir lumirlumir merged commit 216bf5e into reactjs:main May 22, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants