Appearance

变换 ​

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

图标可以进行旋转，以及水平和/或垂直翻转。所有变换均相对于图标中心进行。

变换分为两种类型：

  • 水平翻转和垂直翻转。
  • 旋转 90、180 和 270 度。

CSS 与 Iconify 变换 ​

这些并非 CSS 变换，变换是在 SVG 内部进行的。

与 CSS 变换有什么区别？

  • 如果在 CSS 中将图标旋转 90 度，图标的边界框保持不变。16x24 的图标仍然占据 16x24 的空间，但可能会与周围的元素重叠。
  • 如果在 SVG 框架中将图标旋转 90 度，图标的尺寸会互换。16x24 的图标会变成 24x16 的图标，并且不会影响周围的元素。

示例：

Test icon with text around it

Test icon with text around it

使用 box-shadow 显示图标尺寸
hbs<p>
   Test icon
   <IconifyIcon @icon='fa-regular:handshake' @inline={{true}} @rotate='90deg' />
   with text around it
</p>
<p>
   Test icon
   <IconifyIcon
       @icon='fa-regular:handshake'
       @inline={{true}}
       style='transform: rotate(90deg);'
   />
   with text around it
</p>

在上面的示例中，第一个图标使用 rotate 属性进行旋转，第二个图标使用 CSS 进行旋转。第一个图标保持了其 1em 的高度，而第二个图标变得比预期更高。

有时你确实需要 CSS 变换所提供的行为。此时，你仍然可以通过将其添加到样式中来使用 CSS 变换。

翻转 ​

您可以水平和/或垂直翻转图标。

一种方法是添加带有逗号分隔值的 flip 属性。可能的值：

  • "horizontal"：水平翻转图标。
  • "vertical"：垂直翻转图标。

您也可以通过将 hFlip 和/或 vFlip 属性设置为 true 来实现。

示例：

No flip:

Horizontal flip:

Vertical flip:

Both (or 180° rotation):

hbs<p>No flip: <IconifyIcon @icon='bi:check2-circle' @inline={{true}} /></p>
<p>
   Horizontal flip:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @flip='horizontal' />
</p>
<p>
   Vertical flip:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @flip='vertical' />
</p>
<p>
   Both (or 180° rotation):
   <IconifyIcon
       @icon='bi:check2-circle'
       @inline={{true}}
       @flip='horizontal,vertical'
   />
</p>
使用 "flip" 属性
hbs<p>
   No flip:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} />
</p>
<p>
   Horizontal flip:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @hFlip={{true}} />
</p>
<p>
   Vertical flip:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @vFlip={{true}} />
</p>
<p>
   Both (or 180° rotation):
   <IconifyIcon
       @icon='bi:check2-circle'
       @inline={{true}}
       @hFlip={{true}}
       @vFlip={{true}}
   />
</p>
使用 "hFlip" 和 "vFlip" 属性

旋转 ​

您可以将图标旋转 90、180 和 270 度。

为此，请添加 rotate 属性。可选值如下：

  • "90deg"、"1"：旋转 90 度。
  • "180deg"、"2"：旋转 180 度。
  • "270deg"、"3"：旋转 270 度。

示例：

No rotation:

90° rotation:

180° rotation:

270° rotation:

hbs<p>No rotation: <IconifyIcon @icon='bi:check2-circle' @inline={{true}} /></p>
<p>
   90° rotation:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @rotate='90deg' />
</p>
<p>
   180° rotation:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @rotate='180deg' />
</p>
<p>
   270° rotation:
   <IconifyIcon @icon='bi:check2-circle' @inline={{true}} @rotate={{3}} />
</p>

旋转与翻转 ​

您可以在图标上同时使用旋转和翻转。图标会先翻转，然后再旋转。