变换
本教程是 Iconify for Vue 教程 的一部分。
图标可以进行旋转，以及水平和/或垂直翻转。所有变换均相对于图标中心进行。
变换分为两种类型：
- 水平翻转和垂直翻转。
- 旋转 90、180 和 270 度。
CSS 与 Iconify 变换
这些并非 CSS 变换，变换是在 SVG 内部进行的。
与 CSS 变换有什么区别？
- 如果在 CSS 中将图标旋转 90 度，图标的边界框保持不变。16x24 的图标仍然占据 16x24 的空间，但可能会与周围的元素重叠。
- 如果在 SVG 框架中将图标旋转 90 度，图标的尺寸会互换。16x24 的图标会变成 24x16 的图标，并且不会影响周围的元素。
示例：
Test icon
Test icon
<template>
<div>
<p>
Test icon
<Icon icon="fa-regular:handshake" :inline="true" rotate="90deg" /> with
text around it
</p>
<p>
Test icon
<Icon
icon="fa-regular:handshake"
:inline="true"
:style="{ transform: 'rotate(90deg)' }"
/>
with text around it
</p>
</div>
</template>
<script>
import { Icon } from '@iconify/vue';
export default {
components: {
Icon,
},
};
</script>
在上面的示例中，第一个图标使用 rotate 属性进行旋转，第二个图标使用 CSS 进行旋转。第一个图标保持了其 1em 的高度，而第二个图标变得比预期更高。
有时你确实需要 CSS 变换所提供的行为。此时，你仍然可以通过将其添加到样式中来使用 CSS 变换。
翻转
您可以水平和/或垂直翻转图标。
一种方法是添加带有逗号分隔值的 flip 属性。可能的值：
- "horizontal"：水平翻转图标。
- "vertical"：垂直翻转图标。
您也可以通过将 horizontalFlip 和/或 verticalFlip 属性设置为 true 来实现。
示例：
No flip:
Horizontal flip:
Vertical flip:
Both (or 180° rotation):
<template>
<div>
<p>No flip: <Icon icon="bi:check2-circle" :inline="true" /></p>
<p>
Horizontal flip:
<Icon icon="bi:check2-circle" :inline="true" flip="horizontal" />
</p>
<p>
Vertical flip:
<Icon icon="bi:check2-circle" :inline="true" flip="vertical" />
</p>
<p>
Both (or 180° rotation):
<Icon icon="bi:check2-circle" :inline="true" flip="horizontal,vertical" />
</p>
</div>
</template>
<script>
import { Icon } from '@iconify/vue';
export default {
components: {
Icon,
},
};
</script>
<template>
<div>
<p>
No flip:
<Icon icon="bi:check2-circle" :inline="true" />
</p>
<p>
Horizontal flip:
<Icon icon="bi:check2-circle" :inline="true" :horizontalFlip="true" />
</p>
<p>
Vertical flip:
<Icon icon="bi:check2-circle" :inline="true" :verticalFlip="true" />
</p>
<p>
Both (or 180° rotation):
<Icon
icon="bi:check2-circle"
:inline="true"
:horizontalFlip="true"
:verticalFlip="true"
/>
</p>
</div>
</template>
<script>
import { Icon } from '@iconify/vue';
export default {
components: {
Icon,
},
};
</script>
旋转
您可以将图标旋转 90、180 和 270 度。
为此，请添加 rotate 属性。可选值如下：
- "90deg"、"1"：旋转 90 度。
- "180deg"、"2"：旋转 180 度。
- "270deg"、"3"：旋转 270 度。
示例：
No rotation:
90° rotation:
180° rotation:
270° rotation:
<template>
<div>
<p>No rotation: <Icon icon="bi:check2-circle" :inline="true" /></p>
<p>
90° rotation:
<Icon icon="bi:check2-circle" :inline="true" rotate="90deg" />
</p>
<p>
180° rotation:
<Icon icon="bi:check2-circle" :inline="true" rotate="180deg" />
</p>
<p>
270° rotation: <Icon icon="bi:check2-circle" :inline="true" :rotate="3" />
</p>
</div>
</template>
<script>
import { Icon } from '@iconify/vue';
export default {
components: {
Icon,
},
};
</script>
旋转与翻转
您可以在图标上同时使用旋转和翻转。图标会先翻转，然后再旋转。
属性名称
在其他组件中，翻转属性为 hFlip 和 vFlip。Vue 对以 v- 开头的属性有特殊处理，因此如果不使用复杂的语法，将无法使用 vFlip（同样适用于 vAlign 属性）属性。
因此，为了保持一致性，Vue 组件使用了更长的属性名称：使用 verticalFlip 代替 vFlip，使用 horizontalFlip 代替 hFlip。