Skip to content

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

필수 확인 사항

@vercel
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