Skip to content

fix(icons, input): icon vertical alignment and Addon size prop leaking #52

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

Merged
wangdicoder merged 5 commits into from
Mar 13, 2026
Merged

fix(icons, input): icon vertical alignment and Addon size prop leaking #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9237919
fix(input): prevent Addon from passing size prop to non-input children
wangdicoder Mar 13, 2026
fe4d508
fix(icons): add vertical-align middle for proper inline alignment
wangdicoder Mar 13, 2026
db51924
chore: add changesets for icon and addon fixes
wangdicoder Mar 13, 2026
d653bc2
test(icons): update snapshots for vertical-align middle
wangdicoder Mar 13, 2026
cb7569c
test(rate): update snapshot for icon vertical-align middle
wangdicoder Mar 13, 2026
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
5 changes: 5 additions & 0 deletions .changeset/fix-addon-icon-size.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiny-design/react": patch
---

Fixed Input.Addon passing `size` prop to non-input children (e.g. icons), which caused icons to render oversized.
5 changes: 5 additions & 0 deletions .changeset/fix-icon-vertical-align.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tiny-design/icons": patch
---

Added `vertical-align: middle` as default style on all icon SVGs for proper inline text alignment.
2 changes: 1 addition & 1 deletion packages/icons/scripts/generate-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const ${pascalName} = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
5 changes: 5 additions & 0 deletions packages/icons/src/__tests__/__snapshots__/icons.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ exports[`Icon components IconClose matches snapshot 1`] = `
<svg
fill="currentColor"
height="1em"
style="vertical-align: middle;"
viewBox="0 0 1024 1024"
width="1em"
>
Expand All @@ -21,6 +22,7 @@ exports[`Icon components IconHeart matches snapshot 1`] = `
<svg
fill="currentColor"
height="1em"
style="vertical-align: middle;"
viewBox="0 0 1024 1024"
width="1em"
>
Expand All @@ -38,6 +40,7 @@ exports[`Icon components IconPlus matches snapshot 1`] = `
<svg
fill="currentColor"
height="1em"
style="vertical-align: middle;"
viewBox="0 0 1024 1024"
width="1em"
>
Expand All @@ -55,6 +58,7 @@ exports[`Icon components IconSearch matches snapshot 1`] = `
<svg
fill="currentColor"
height="1em"
style="vertical-align: middle;"
viewBox="0 0 1024 1024"
width="1em"
>
Expand All @@ -72,6 +76,7 @@ exports[`Icon components IconStar matches snapshot 1`] = `
<svg
fill="currentColor"
height="1em"
style="vertical-align: middle;"
viewBox="0 0 1024 1024"
width="1em"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-accessible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAccessible = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-add-file.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAddFile = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-add-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAddList = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-add-team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAddTeam = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-add-user.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAddUser = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-address-book.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAddressBook = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-android.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAndroid = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-apple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconApple = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-approval.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconApproval = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-archive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArchive = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-down-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowDownCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) =>
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-down-left-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowDownLeftCircle = forwardRef<SVGSVGElement, IconProps>((props, ref
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-down-left.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowDownLeft = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-down-right-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowDownRightCircle = forwardRef<SVGSVGElement, IconProps>((props, re
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-down-right.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowDownRight = forwardRef<SVGSVGElement, IconProps>((props, ref) =>
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-down.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowDown = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-left-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowLeftCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) =>
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-left.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowLeft = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-right-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowRightCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) =
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-right.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowRight = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-up-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowUpCircle = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-up-left-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowUpLeftCircle = forwardRef<SVGSVGElement, IconProps>((props, ref)
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-up-left.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowUpLeft = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-up-right-circle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowUpRightCircle = forwardRef<SVGSVGElement, IconProps>((props, ref)
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-up-right.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowUpRight = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-arrow-up.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconArrowUp = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-attention.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAttention = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-audio-file.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAudioFile = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-audio-fill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAudioFill = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-audio-mute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAudioMute = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-audio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconAudio = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-back.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconBack = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-bearish.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconBearish = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-behance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconBehance = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-bookmark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconBookmark = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-branch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconBranch = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
2 changes: 1 addition & 1 deletion packages/icons/src/icon-briefcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const IconBriefcase = forwardRef<SVGSVGElement, IconProps>((props, ref) => {
height={size}
fill={color}
className={className}
style={style}
style={{ verticalAlign: "middle", ...style }}
{...rest}
>
<g transform="translate(0, 896) scale(1, -1)">
Expand Down
Loading
Loading