leading-icon-alignment

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Leading Icon Alignment

前置图标对齐

Ensures leading icons within lists are always properly aligned to the first line of text when the text wraps, rather than centering vertically across the full height of the wrapped text.

确保列表中的前置图标在文本换行时始终与文本第一行正确对齐，而非在换行文本的整个高度内垂直居中。

Rules

规则

MUST: Use
```
flex
```
on the list item container
MUST: Use height on the SVG that matches the line height of the adjacent text
```
height: 1lh
```
(or
```
h-lh
```
in Tailwind)
MUST: Use
```
flex-shrink: 0
```
(
```
shrink-0
```
in Tailwind) on the icon to prevent it from compressing at narrow widths
NEVER: Use
```
align-items: center
```
(
```
items-center
```
in Tailwind) on the flex container — it vertically centers the icon across all lines of wrapped text instead of aligning to the first line

必须：在列表项容器上使用
```
flex
```
布局
必须：为SVG设置与相邻文本行高匹配的高度
```
height: 1lh
```
（在Tailwind中为
```
h-lh
```
）
必须：为图标设置
```
flex-shrink: 0
```
（在Tailwind中为
```
shrink-0
```
），防止其在窄宽度下被压缩
禁止：在flex容器上使用
```
align-items: center
```
（在Tailwind中为
```
items-center
```
）——这会使图标在所有换行文本行中垂直居中，而非与第一行对齐

Implementation

实现示例

html

<ul>
  <li class="flex gap-2">
    <svg
      class="h-lh w-4 shrink-0"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </svg>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </li>
</ul>

html

<ul>
  <li class="flex gap-2">
    <svg
      class="h-lh w-4 shrink-0"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </svg>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </li>
</ul>

Key Points

关键点

The SVG height uses (
```
h-lh
```
) to match the text line height so the icon visually centers within the first line of text
```
shrink-0
```
prevents the icon from compressing when the container is narrow — without it the icon distorts before text wraps
Flex defaults to
```
align-items: stretch
```
, but because the SVG has a fixed height, it effectively sits at the top — aligned to the first line
```
gap-2
```
provides consistent spacing between icon and text without needing padding or margin on either element

SVG使用
```
h-lh
```
设置高度，以匹配文本行高，使图标在视觉上与文本第一行居中对齐
```
shrink-0
```
可防止容器变窄时图标被压缩——如果没有这个属性，图标会在文本换行前就发生变形
Flex布局默认使用
```
align-items: stretch
```
，但由于SVG有固定高度，它会自然位于顶部，与第一行文本对齐
```
gap-2
```
在图标和文本之间提供一致的间距，无需为任一元素设置内边距或外边距