Appearance

垂直对齐 ​

本教程是 Iconify for React 教程 的一部分。

当图标在文本中渲染时，默认情况下它会像其他图像一样与基线对齐。

表情符号和图标字体的渲染位置会略低于基线，就像普通文本一样。

如果要在文本中渲染图标，你可能希望为每个图标添加 vertical-align，使其渲染位置略低于基线，从而更好地融入文本，效果类似于表情符号和图标字体：

SVG in text:

SVG in text with vertical-align: -0.125em:

inline 属性 ​

要为图标添加 vertical-align，图标组件提供以下几种选项：

  • 将 Icon 组件替换为 InlineIcon。
  • 添加 inline 属性。
  • 添加值为 -0.125em 的 vertical-align 样式。

Inline attribute demo:

jsximport React from 'react';
import { Icon, InlineIcon } from '@iconify/react';

export function inlineDemo() {
   return (
       <div>
           <p>
               Inline attribute demo:
               <Icon inline={true} icon="line-md:image-twotone" />
               <InlineIcon icon="mdi:account-box-outline" />
           </p>
       </div>
   );
}

重要提示：此属性不会更改图标的 display 模式。它仅添加 vertical-align 样式。