actions-device-orientation-change

Introduced in v1.5.0
Available in TYPO3 9.5 10.4 11.5

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M15.4 5.5 10.5.6c-.2-.2-.5-.2-.7 0L.6 9.8c-.2.2-.2.5 0 .7l4.9 4.9c.2.2.5.2.7 0l9.2-9.2c.2-.2.2-.5 0-.7zM4.6 12.8c-.1.1-.2.1-.3 0l-1.1-1.1c-.1-.1-.1-.3-.1-.4l.4-.3c.1-.1.3-.1.4 0L5 12.1c.1.1.1.2-.1.4l-.3.3zm2.7.1L3.1 8.7l6.4-6.4 4.2 4.2-6.4 6.4zM6.3 1.6 6.2.9c-.6.1-1.2.3-1.8.6l.4.7c.5-.3 1-.5 1.5-.6zM12.1 13.2l.5.6c.5-.4.9-.8 1.3-1.3l-.6-.5c-.4.5-.8.9-1.2 1.2zM13.8 11.3l.7.4c.3-.5.5-1.1.7-1.7l-.7-.2c-.3.5-.5 1-.7 1.5zM4 2.7l-.4-.6c-.5.4-1 .8-1.4 1.3l.6.5c.4-.5.8-.9 1.2-1.2zM9.7 14.4l.2.7c.6-.2 1.2-.4 1.7-.7l-.4-.7c-.4.3-.9.6-1.5.7zM2.3 4.6l-.7-.3c-.3.5-.5 1.1-.7 1.7l.7.2c.2-.6.4-1.1.7-1.6z"/></g></svg>

Inline

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M15.4 5.5 10.5.6c-.2-.2-.5-.2-.7 0L.6 9.8c-.2.2-.2.5 0 .7l4.9 4.9c.2.2.5.2.7 0l9.2-9.2c.2-.2.2-.5 0-.7zM4.6 12.8c-.1.1-.2.1-.3 0l-1.1-1.1c-.1-.1-.1-.3-.1-.4l.4-.3c.1-.1.3-.1.4 0L5 12.1c.1.1.1.2-.1.4l-.3.3zm2.7.1L3.1 8.7l6.4-6.4 4.2 4.2-6.4 6.4zM6.3 1.6 6.2.9c-.6.1-1.2.3-1.8.6l.4.7c.5-.3 1-.5 1.5-.6zM12.1 13.2l.5.6c.5-.4.9-.8 1.3-1.3l-.6-.5c-.4.5-.8.9-1.2 1.2zM13.8 11.3l.7.4c.3-.5.5-1.1.7-1.7l-.7-.2c-.3.5-.5 1-.7 1.5zM4 2.7l-.4-.6c-.5.4-1 .8-1.4 1.3l.6.5c.4-.5.8-.9 1.2-1.2zM9.7 14.4l.2.7c.6-.2 1.2-.4 1.7-.7l-.4-.7c-.4.3-.9.6-1.5.7zM2.3 4.6l-.7-.3c-.3.5-.5 1.1-.7 1.7l.7.2c.2-.6.4-1.1.7-1.6z"/></g></svg>
    </span>
</span>

Sprite

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

TYPO3 ViewHelper

<core:icon identifier="actions-device-orientation-change" size="small" />

CSS Background Image

.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='M15.4 5.5 10.5.6c-.2-.2-.5-.2-.7 0L.6 9.8c-.2.2-.2.5 0 .7l4.9 4.9c.2.2.5.2.7 0l9.2-9.2c.2-.2.2-.5 0-.7zM4.6 12.8c-.1.1-.2.1-.3 0l-1.1-1.1c-.1-.1-.1-.3-.1-.4l.4-.3c.1-.1.3-.1.4 0L5 12.1c.1.1.1.2-.1.4l-.3.3zm2.7.1L3.1 8.7l6.4-6.4 4.2 4.2-6.4 6.4zM6.3 1.6 6.2.9c-.6.1-1.2.3-1.8.6l.4.7c.5-.3 1-.5 1.5-.6zM12.1 13.2l.5.6c.5-.4.9-.8 1.3-1.3l-.6-.5c-.4.5-.8.9-1.2 1.2zM13.8 11.3l.7.4c.3-.5.5-1.1.7-1.7l-.7-.2c-.3.5-.5 1-.7 1.5zM4 2.7l-.4-.6c-.5.4-1 .8-1.4 1.3l.6.5c.4-.5.8-.9 1.2-1.2zM9.7 14.4l.2.7c.6-.2 1.2-.4 1.7-.7l-.4-.7c-.4.3-.9.6-1.5.7zM2.3 4.6l-.7-.3c-.3.5-.5 1.1-.7 1.7l.7.2c.2-.6.4-1.1.7-1.6z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-actions-device-orientation-change;
}

Download

Download