actions-swap

BiDi
Introduced in v1.0.0
Available in TYPO3 7.6 8.6 9.5 10.4 11.5 12.4 13.x

Buttons

Button Label Button Label

Button Label Button Label

BiDi Comparison (LTR vs RTL)

LTR (Left-to-Right)

Next

RTL (Right-to-Left)

التالي

Usage

BiDi Support: This icon uses logical naming (start/end instead of left/right) and is designed for bidirectional support. See the usage examples below for implementation details.

Icon Identifier

actions-swap

Markup

⚠ BiDi NOT supported - Raw SVG cannot be flipped. Use inline or sprite methods for BiDi support.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M6 10V8.04a.5.5 0 0 0-.812-.39l-3.7 2.959a.5.5 0 0 0 0 .78l3.7 2.96a.5.5 0 0 0 .812-.39V12h6v-2H6Zm3.983-7.922a.5.5 0 0 1 .812-.39l3.7 2.959a.5.5 0 0 1 0 .78l-3.7 2.96a.5.5 0 0 1-.812-.39v-1.96h-6v-2h6v-1.96Z"/></g></svg>

Inline

✓ BiDi supported - Icon will flip in RTL mode when using the icon-bidi class

<span class="icon icon-size-small icon-state-default icon-bidi">
    <span class="icon-markup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M6 10V8.04a.5.5 0 0 0-.812-.39l-3.7 2.959a.5.5 0 0 0 0 .78l3.7 2.96a.5.5 0 0 0 .812-.39V12h6v-2H6Zm3.983-7.922a.5.5 0 0 1 .812-.39l3.7 2.959a.5.5 0 0 1 0 .78l-3.7 2.96a.5.5 0 0 1-.812-.39v-1.96h-6v-2h6v-1.96Z"/></g></svg>
    </span>
</span>

Sprite

✓ BiDi supported - Icon will flip in RTL mode when using the icon-bidi class

<span class="icon icon-size-small icon-state-default icon-bidi">
    <span class="icon-markup">
        <svg role="img"><use xlink:href="dist/sprites/actions.svg#actions-swap" /></svg>
    </span>
</span>

TYPO3 ViewHelper

✓ BiDi supported

<core:icon identifier="actions-swap" size="small" />

TYPO3 Web Component

✓ BiDi supported

<typo3-backend-icon identifier="actions-swap" size="small"></typo3-backend-icon>

CSS Background Image

⚠ BiDi NOT supported - Background images cannot be flipped with CSS. Use inline or sprite methods for BiDi support.

.myclass {
    background-size: 1em 1em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M6 10V8.04a.5.5 0 0 0-.812-.39l-3.7 2.959a.5.5 0 0 0 0 .78l3.7 2.96a.5.5 0 0 0 .812-.39V12h6v-2H6Zm3.983-7.922a.5.5 0 0 1 .812-.39l3.7 2.959a.5.5 0 0 1 0 .78l-3.7 2.96a.5.5 0 0 1-.812-.39v-1.96h-6v-2h6v-1.96Z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

⚠ BiDi NOT supported - Background images cannot be flipped with CSS. Use inline or sprite methods for BiDi support.

@import "@typo3/icons/dist/icons.scss";
@import "@typo3/icons/dist/scss/icons-variables-actions.scss";

.myclass {
    background-size: 1em 1em;
    background-image: $icon-actions-swap;
}

Alias

  • actions-version-swap-version
  • actions-version-swap-workspace

Download

Download