IconコンポーネントをSSRしたとき、レイアウトシフトしないようにする by mimokmt · Pull Request #840 · pixiv/charcoal

mimokmt · 2026-02-06T02:53:13Z

やったこと

<pixiv-icon> で、大きさをpx単位で指定できる unsafe-non-guideline-fixed-size プロパティを追加しました
@charcoal-ui/react の Iconコンポーネントで、大きさをpx単位で指定できる unsafeNonGuidelineFixedSize プロパティを追加しました
@charcoal-ui/react の Iconコンポーネントで、--size の計算を行い、CSS変数をセットするようにしました
- SSR環境で、Custom Elementの高さ計算が行われずにレイアウトシフトが発生していたのを防ぐ目的での実装です
- Iconコンポーネントから <pixiv-icon> へは unsafe-non-guideline-fixed-size を使って値を渡し、 <pixiv-icon>内部で同じ数値計算が行われないよう、処理を変更しています
@charcoal-ui/react の Iconコンポーネントで、<pixiv-icon>に対してCSSを設定し、Iconコンポーネントで計算した高さになるようにしました
以下PRでの変更を取り込んでいます
- Icon コンポーネントに unsafeNonGuidelineFixedSize を追加 & SSR 直後も領域が確保されるように修正 #847

動作確認環境

Storybook

チェックリスト

不要なチェック項目は消して構いません

破壊的変更がある場合には、対象のパッケージのメジャーバージョンが上がっていることを確認した
追加したコンポーネントが index.ts から再 export されている
README やドキュメントに影響があることを確認した

github-actions · 2026-02-06T02:54:34Z

Size Change: +1.64 kB (+0.43%)

Total Size: 385 kB

Filename	Size	Change
`./packages/icons/dist/index.cjs`	10.3 kB	+463 B (+4.69%)	🔍
`./packages/icons/dist/index.d.ts`	14.4 kB	+329 B (+2.34%)
`./packages/icons/dist/index.js`	9.15 kB	+434 B (+4.98%)	🔍
`./packages/react/dist/components/Icon/index.d.ts`	567 B	+69 B (+13.86%)	⚠️
`./packages/react/dist/index.cjs`	29.7 kB	+174 B (+0.59%)
`./packages/react/dist/index.js`	26.4 kB	+167 B (+0.64%)

ℹ️ View Unchanged

Filename	Size
`./packages/foundation/dist/index.cjs`	749 B
`./packages/foundation/dist/index.d.ts`	3.56 kB
`./packages/foundation/dist/index.js`	703 B
`./packages/icons-cli/dist/index.js`	20.6 kB
`./packages/react-sandbox/dist/_lib/compat.d.ts`	427 B
`./packages/react-sandbox/dist/_lib/ComponentAbstraction.d.ts`	967 B
`./packages/react-sandbox/dist/components/Carousel/index.d.ts`	1.38 kB
`./packages/react-sandbox/dist/components/CarouselButton/index.d.ts`	515 B
`./packages/react-sandbox/dist/components/Filter/index.d.ts`	1.05 kB
`./packages/react-sandbox/dist/components/HintText/index.d.ts`	386 B
`./packages/react-sandbox/dist/components/icons/Base.d.ts`	762 B
`./packages/react-sandbox/dist/components/icons/DotsIcon.d.ts`	226 B
`./packages/react-sandbox/dist/components/icons/InfoIcon.d.ts`	115 B
`./packages/react-sandbox/dist/components/icons/NextIcon.d.ts`	309 B
`./packages/react-sandbox/dist/components/icons/WedgeIcon.d.ts`	345 B
`./packages/react-sandbox/dist/components/Layout/index.d.ts`	2.18 kB
`./packages/react-sandbox/dist/components/LeftMenu/index.d.ts`	438 B
`./packages/react-sandbox/dist/components/MenuListItem/index.d.ts`	1.91 kB
`./packages/react-sandbox/dist/components/Pager/index.d.ts`	557 B
`./packages/react-sandbox/dist/components/SwitchCheckbox/index.d.ts`	340 B
`./packages/react-sandbox/dist/components/TextEllipsis/helper.d.ts`	230 B
`./packages/react-sandbox/dist/components/TextEllipsis/index.d.ts`	381 B
`./packages/react-sandbox/dist/components/WithIcon/index.d.ts`	1.07 kB
`./packages/react-sandbox/dist/foundation/constants.d.ts`	208 B
`./packages/react-sandbox/dist/foundation/hooks.d.ts`	1.04 kB
`./packages/react-sandbox/dist/foundation/support.d.ts`	131 B
`./packages/react-sandbox/dist/foundation/utils.d.ts`	613 B
`./packages/react-sandbox/dist/hooks/index.d.ts`	148 B
`./packages/react-sandbox/dist/index.cjs`	33.5 kB
`./packages/react-sandbox/dist/index.d.ts`	1.38 kB
`./packages/react-sandbox/dist/index.js`	31 kB
`./packages/react-sandbox/dist/misc/storybook-helper.d.ts`	343 B
`./packages/react-sandbox/dist/styled.d.ts`	12.3 kB
`./packages/react/dist/_lib/compat.d.ts`	1.19 kB
`./packages/react/dist/_lib/createDivComponent.d.ts`	614 B
`./packages/react/dist/_lib/index.d.ts`	1.02 kB
`./packages/react/dist/_lib/useClassNames.d.ts`	192 B
`./packages/react/dist/_lib/useForwardedRef.d.ts`	169 B
`./packages/react/dist/components/Button/index.d.ts`	766 B
`./packages/react/dist/components/Button/styledButtonTypeTest.d.d.ts`	63 B
`./packages/react/dist/components/Checkbox/CheckboxInput/index.d.ts`	628 B
`./packages/react/dist/components/Checkbox/CheckboxWithLabel.d.ts`	271 B
`./packages/react/dist/components/Checkbox/index.d.ts`	592 B
`./packages/react/dist/components/Clickable/index.d.ts`	681 B
`./packages/react/dist/components/DropdownSelector/Divider/index.d.ts`	133 B
`./packages/react/dist/components/DropdownSelector/DropdownMenuItem/index.d.ts`	409 B
`./packages/react/dist/components/DropdownSelector/DropdownPopover.d.ts`	514 B
`./packages/react/dist/components/DropdownSelector/index.d.ts`	813 B
`./packages/react/dist/components/DropdownSelector/ListItem/index.d.ts`	485 B
`./packages/react/dist/components/DropdownSelector/MenuItem/index.d.ts`	639 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.d.ts`	373 B
`./packages/react/dist/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.d.ts`	480 B
`./packages/react/dist/components/DropdownSelector/MenuItemGroup/index.d.ts`	442 B
`./packages/react/dist/components/DropdownSelector/MenuList/index.d.ts`	568 B
`./packages/react/dist/components/DropdownSelector/MenuList/internals/getValuesRecursive.d.ts`	412 B
`./packages/react/dist/components/DropdownSelector/MenuList/MenuListContext.d.ts`	412 B
`./packages/react/dist/components/DropdownSelector/Popover/index.d.ts`	1.03 kB
`./packages/react/dist/components/DropdownSelector/Popover/usePreventScroll.d.ts`	159 B
`./packages/react/dist/components/DropdownSelector/utils/findPreviewRecursive.d.ts`	411 B
`./packages/react/dist/components/FieldLabel/index.d.ts`	492 B
`./packages/react/dist/components/HintText/index.d.ts`	382 B
`./packages/react/dist/components/IconButton/index.d.ts`	639 B
`./packages/react/dist/components/LoadingSpinner/index.d.ts`	678 B
`./packages/react/dist/components/Modal/Dialog/index.d.ts`	373 B
`./packages/react/dist/components/Modal/index.d.ts`	2.13 kB
`./packages/react/dist/components/Modal/ModalBackgroundContext.d.ts`	231 B
`./packages/react/dist/components/Modal/ModalPlumbing.d.ts`	1.75 kB
`./packages/react/dist/components/Modal/useCustomModalOverlay.d.ts`	797 B
`./packages/react/dist/components/MultiSelect/context.d.ts`	394 B
`./packages/react/dist/components/MultiSelect/index.d.ts`	1.25 kB
`./packages/react/dist/components/Radio/index.d.ts`	482 B
`./packages/react/dist/components/Radio/RadioGroup/index.d.ts`	733 B
`./packages/react/dist/components/Radio/RadioGroupContext.d.ts`	339 B
`./packages/react/dist/components/Radio/RadioInput/index.d.ts`	584 B
`./packages/react/dist/components/SegmentedControl/index.d.ts`	836 B
`./packages/react/dist/components/SegmentedControl/RadioGroupContext.d.ts`	362 B
`./packages/react/dist/components/Switch/index.d.ts`	452 B
`./packages/react/dist/components/Switch/SwitchInput/index.d.ts`	482 B
`./packages/react/dist/components/Switch/SwitchWithLabel.d.ts`	272 B
`./packages/react/dist/components/TagItem/index.d.ts`	716 B
`./packages/react/dist/components/TextArea/index.d.ts`	1.12 kB
`./packages/react/dist/components/TextEllipsis/helper.d.ts`	350 B
`./packages/react/dist/components/TextEllipsis/index.d.ts`	924 B
`./packages/react/dist/components/TextField/AssistiveText/index.d.ts`	592 B
`./packages/react/dist/components/TextField/index.d.ts`	1.25 kB
`./packages/react/dist/components/TextField/useFocusWithClick.d.ts`	256 B
`./packages/react/dist/core/CharcoalProvider.d.ts`	270 B
`./packages/react/dist/core/OverlayProvider.d.ts`	101 B
`./packages/react/dist/core/SetThemeScript.d.ts`	890 B
`./packages/react/dist/core/SSRProvider.d.ts`	335 B
`./packages/react/dist/core/themeHelper.d.ts`	2.05 kB
`./packages/react/dist/index.d.ts`	2.47 kB
`./packages/styled/dist/addThemeUtils.story.d.ts`	330 B
`./packages/styled/dist/builders/border.d.ts`	685 B
`./packages/styled/dist/builders/borderRadius.d.ts`	440 B
`./packages/styled/dist/builders/colors.d.ts`	1.28 kB
`./packages/styled/dist/builders/elementEffect.d.ts`	533 B
`./packages/styled/dist/builders/o.d.ts`	5.91 kB
`./packages/styled/dist/builders/outline.d.ts`	638 B
`./packages/styled/dist/builders/size.d.ts`	1.19 kB
`./packages/styled/dist/builders/spacing.d.ts`	1.12 kB
`./packages/styled/dist/builders/transition.d.ts`	287 B
`./packages/styled/dist/builders/typography.d.ts`	624 B
`./packages/styled/dist/defineThemeVariables.test.d.ts`	66 B
`./packages/styled/dist/factories/lib.d.ts`	3.96 kB
`./packages/styled/dist/index.cjs`	11.8 kB
`./packages/styled/dist/index.d.ts`	6.9 kB
`./packages/styled/dist/index.js`	10.3 kB
`./packages/styled/dist/index.test.d.ts`	204 B
`./packages/styled/dist/internals/index.d.ts`	1.6 kB
`./packages/styled/dist/storyHelper.d.ts`	386 B
`./packages/styled/dist/styles/assertiveRingCss.d.ts`	141 B
`./packages/styled/dist/styles/disabledCss.d.ts`	131 B
`./packages/styled/dist/styles/focusVisibleFocusRingCss.d.ts`	318 B
`./packages/styled/dist/TokenInjector.d.ts`	533 B
`./packages/styled/dist/util.d.ts`	4.24 kB
`./packages/styled/dist/utils/addThemeUtils.d.ts`	383 B
`./packages/styled/dist/utils/CharcoalStyledTheme.d.ts`	1.43 kB
`./packages/styled/dist/utils/gap.d.ts`	473 B
`./packages/styled/dist/utils/helpers/pxIfNum.d.ts`	99 B
`./packages/styled/dist/utils/helpers/SpacingType.d.ts`	137 B
`./packages/styled/dist/utils/margin.d.ts`	905 B
`./packages/styled/dist/utils/padding.d.ts`	935 B
`./packages/styled/dist/utils/typographyCss.d.ts`	306 B
`./packages/tailwind-config/dist/index.d.ts`	6.34 kB
`./packages/tailwind-config/dist/index.js`	17.5 kB
`./packages/tailwind-diff/dist/commands/check.d.ts`	296 B
`./packages/tailwind-diff/dist/commands/check.js`	4.35 kB
`./packages/tailwind-diff/dist/commands/dump.d.ts`	185 B
`./packages/tailwind-diff/dist/commands/dump.js`	1.24 kB
`./packages/tailwind-diff/dist/defer.d.ts`	164 B
`./packages/tailwind-diff/dist/defer.js`	762 B
`./packages/tailwind-diff/dist/index.d.ts`	46 B
`./packages/tailwind-diff/dist/index.js`	1.84 kB
`./packages/tailwind-diff/dist/packageManager.d.ts`	323 B
`./packages/tailwind-diff/dist/packageManager.js`	1.81 kB
`./packages/tailwind-diff/dist/style.d.ts`	436 B
`./packages/tailwind-diff/dist/style.js`	2.6 kB
`./packages/tailwind-diff/dist/withPackages.d.ts`	464 B
`./packages/tailwind-diff/dist/withPackages.js`	3.34 kB
`./packages/theme/dist/index.cjs`	3.19 kB
`./packages/theme/dist/index.d.ts`	3.72 kB
`./packages/theme/dist/index.js`	3.17 kB
`./packages/theme/dist/unstable-css/_variables_dark.css.d.ts`	26 B
`./packages/theme/dist/unstable-css/_variables_light.css.d.ts`	26 B
`./packages/theme/dist/unstable-token-object/index.cjs`	4.22 kB
`./packages/theme/dist/unstable-token-object/index.d.ts`	1.65 kB
`./packages/theme/dist/unstable-token-object/index.js`	3.05 kB
`./packages/token-cli/dist/index.js`	6.63 kB
`./packages/utils/dist/index.cjs`	3.15 kB
`./packages/utils/dist/index.d.ts`	4.48 kB
`./packages/utils/dist/index.js`	2.38 kB

_{compressed-size-action}

github-actions · 2026-02-06T02:55:50Z

Visit the preview URL for this PR (updated for commit 38d7215):

https://pixiv-charcoal-web--pr840-mimo-icon-height-fix-61pb7hsb.web.app

_{(expires Thu, 26 Feb 2026 08:29:18 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0}

ahuglajbclajep · 2026-02-19T08:34:29Z

packages/react/src/components/Icon/index.tsx

-      class={className}
+      unsafe-non-guideline-fixed-size={actualSize}
+      class={`charcoal-icon-component ${className || ''}`.trim()}
+      style={{ '--size': `${actualSize}px` }}


ここだけ、--charcoal-icon-ssr-size とか --charcoal-* みたいな prefix をつける方針じゃなくても大丈夫なのかな？というのが気になりますが、それ以外は #847 (comment) の意図通りになっていてよさそうです！！ 😄
（Icon/index.tsx が <pixiv-icon> が内部的に --size を使うことを知っていて良さそうなのかが気になる）

mimokmt self-assigned this Feb 6, 2026

mimokmt deployed to preview-channel February 6, 2026 02:53 — with GitHub Actions View deployment

mimokmt force-pushed the mimo/icon-height-fix branch from aa7bdca to c3e7a12 Compare February 18, 2026 04:17

mimokmt temporarily deployed to preview-channel February 18, 2026 04:17 — with GitHub Actions Inactive

mimokmt force-pushed the mimo/icon-height-fix branch from c3e7a12 to 87be3bc Compare February 18, 2026 07:14

mimokmt temporarily deployed to preview-channel February 18, 2026 07:14 — with GitHub Actions Inactive

mimokmt temporarily deployed to preview-channel February 18, 2026 08:42 — with GitHub Actions Inactive

mimokmt added the minor label Feb 18, 2026

ahuglajbclajep mentioned this pull request Feb 18, 2026

Icon コンポーネントに unsafeNonGuidelineFixedSize を追加 & SSR 直後も領域が確保されるように修正 #847

Closed

3 tasks

mimokmt temporarily deployed to preview-channel February 19, 2026 08:09 — with GitHub Actions Inactive

mimokmt changed the title ~~wip: add fixedsize prop~~ IconコンポーネントをSSRしたとき、レイアウトシフトしないようにする Feb 19, 2026

mimokmt force-pushed the mimo/icon-height-fix branch from cbf6297 to 2611081 Compare February 19, 2026 08:11

mimokmt temporarily deployed to preview-channel February 19, 2026 08:11 — with GitHub Actions Inactive

ahuglajbclajep and others added 9 commits February 19, 2026 17:12

feat(react): add unsafeNonGuidelineFixedSize props

3b89999

feat(react): add stories

d43d1e5

feat(react): fix broken code

dc47828

feat(icons): add fixedsize prop

307cd00

feat(icons): add stories

491e9eb

feat(icons): add fixedSize props

9174314

chore: wip

cf2c927

feat(icons): add calc icon size utils

080ef02

feat(react): set --size variable in icon component

09a34ad

mimokmt force-pushed the mimo/icon-height-fix branch from 2611081 to 09a34ad Compare February 19, 2026 08:14

mimokmt temporarily deployed to preview-channel February 19, 2026 08:14 — with GitHub Actions Inactive

mimokmt temporarily deployed to preview-channel February 19, 2026 08:16 — with GitHub Actions Inactive

mimokmt force-pushed the mimo/icon-height-fix branch from f80d094 to 5ee1c94 Compare February 19, 2026 08:21

mimokmt temporarily deployed to preview-channel February 19, 2026 08:22 — with GitHub Actions Inactive

chore: rename classnames

38d7215

mimokmt force-pushed the mimo/icon-height-fix branch from 5ee1c94 to 38d7215 Compare February 19, 2026 08:26

mimokmt deployed to preview-channel February 19, 2026 08:26 — with GitHub Actions View deployment

ahuglajbclajep reviewed Feb 19, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IconコンポーネントをSSRしたとき、レイアウトシフトしないようにする#840

IconコンポーネントをSSRしたとき、レイアウトシフトしないようにする#840
mimokmt wants to merge 10 commits intomainfrom
mimo/icon-height-fix

mimokmt commented Feb 6, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 6, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 6, 2026 •

edited

Loading

Uh oh!

ahuglajbclajep Feb 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mimokmt commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

やったこと

動作確認環境

チェックリスト

Uh oh!

github-actions bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ahuglajbclajep Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mimokmt commented Feb 6, 2026 •

edited

Loading

github-actions bot commented Feb 6, 2026 •

edited

Loading

github-actions bot commented Feb 6, 2026 •

edited

Loading