actions-replace

Introduced in v1.2.0
Available in TYPO3 8.6 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="M14 10v2h-2v-1.549a.25.25 0 0 0-.383-.212l-3.278 2.049a.25.25 0 0 0 0 .424l3.278 2.049a.25.25 0 0 0 .383-.212V13h3v-3h-1zM6 13h1L5.5 9h-1L3 13h1l.188-.5h1.625L6 13zm-1.437-1.5L5 10.333l.438 1.167h-.875zM13 5.775a.98.98 0 0 1-.137.518c-.09.152-.216.278-.376.379a1.877 1.877 0 0 1-.607.253c-.22.05-.5.075-.839.075H9V3h1.815c.377 0 .653.011.828.032.175.021.348.069.519.142a.885.885 0 0 1 .398.311.776.776 0 0 1 .129.444.794.794 0 0 1-.178.512 1.162 1.162 0 0 1-.505.345v.021c.305.052.548.16.726.322a.834.834 0 0 1 .268.646zm-1.545-1.644a.355.355 0 0 0-.264-.347 1.147 1.147 0 0 0-.328-.047c-.13-.003-.863-.004-.863-.004v.847s.741-.003.875-.008a.97.97 0 0 0 .316-.054c.109-.041.18-.095.214-.16a.484.484 0 0 0 .05-.227zm.292 1.628a.45.45 0 0 0-.085-.294c-.058-.069-.156-.12-.293-.154a1.805 1.805 0 0 0-.389-.038c-.165-.002-.98-.003-.98-.003v.997s.868-.001 1.014-.003c.146-.002.28-.025.404-.07.124-.045.211-.104.257-.178a.457.457 0 0 0 .072-.257zM7.661 3.288 4.383 1.239A.25.25 0 0 0 4 1.451V3H1v3h1V4h2v1.549a.25.25 0 0 0 .383.212l3.278-2.049a.25.25 0 0 0 0-.424z"/><path d="M14.5 1h-7a.5.5 0 0 0-.5.5v.196l1 .625V2h6v6H9v-.5a.5.5 0 0 0-.5-.5H8V4.679l-1 .625V7H1.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-.196l-1-.625V14H2V8h6v3.321l1-.625V9h5.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5z"/></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="M14 10v2h-2v-1.549a.25.25 0 0 0-.383-.212l-3.278 2.049a.25.25 0 0 0 0 .424l3.278 2.049a.25.25 0 0 0 .383-.212V13h3v-3h-1zM6 13h1L5.5 9h-1L3 13h1l.188-.5h1.625L6 13zm-1.437-1.5L5 10.333l.438 1.167h-.875zM13 5.775a.98.98 0 0 1-.137.518c-.09.152-.216.278-.376.379a1.877 1.877 0 0 1-.607.253c-.22.05-.5.075-.839.075H9V3h1.815c.377 0 .653.011.828.032.175.021.348.069.519.142a.885.885 0 0 1 .398.311.776.776 0 0 1 .129.444.794.794 0 0 1-.178.512 1.162 1.162 0 0 1-.505.345v.021c.305.052.548.16.726.322a.834.834 0 0 1 .268.646zm-1.545-1.644a.355.355 0 0 0-.264-.347 1.147 1.147 0 0 0-.328-.047c-.13-.003-.863-.004-.863-.004v.847s.741-.003.875-.008a.97.97 0 0 0 .316-.054c.109-.041.18-.095.214-.16a.484.484 0 0 0 .05-.227zm.292 1.628a.45.45 0 0 0-.085-.294c-.058-.069-.156-.12-.293-.154a1.805 1.805 0 0 0-.389-.038c-.165-.002-.98-.003-.98-.003v.997s.868-.001 1.014-.003c.146-.002.28-.025.404-.07.124-.045.211-.104.257-.178a.457.457 0 0 0 .072-.257zM7.661 3.288 4.383 1.239A.25.25 0 0 0 4 1.451V3H1v3h1V4h2v1.549a.25.25 0 0 0 .383.212l3.278-2.049a.25.25 0 0 0 0-.424z"/><path d="M14.5 1h-7a.5.5 0 0 0-.5.5v.196l1 .625V2h6v6H9v-.5a.5.5 0 0 0-.5-.5H8V4.679l-1 .625V7H1.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-.196l-1-.625V14H2V8h6v3.321l1-.625V9h5.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5z"/></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-replace" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-replace" 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='M14 10v2h-2v-1.549a.25.25 0 0 0-.383-.212l-3.278 2.049a.25.25 0 0 0 0 .424l3.278 2.049a.25.25 0 0 0 .383-.212V13h3v-3h-1zM6 13h1L5.5 9h-1L3 13h1l.188-.5h1.625L6 13zm-1.437-1.5L5 10.333l.438 1.167h-.875zM13 5.775a.98.98 0 0 1-.137.518c-.09.152-.216.278-.376.379a1.877 1.877 0 0 1-.607.253c-.22.05-.5.075-.839.075H9V3h1.815c.377 0 .653.011.828.032.175.021.348.069.519.142a.885.885 0 0 1 .398.311.776.776 0 0 1 .129.444.794.794 0 0 1-.178.512 1.162 1.162 0 0 1-.505.345v.021c.305.052.548.16.726.322a.834.834 0 0 1 .268.646zm-1.545-1.644a.355.355 0 0 0-.264-.347 1.147 1.147 0 0 0-.328-.047c-.13-.003-.863-.004-.863-.004v.847s.741-.003.875-.008a.97.97 0 0 0 .316-.054c.109-.041.18-.095.214-.16a.484.484 0 0 0 .05-.227zm.292 1.628a.45.45 0 0 0-.085-.294c-.058-.069-.156-.12-.293-.154a1.805 1.805 0 0 0-.389-.038c-.165-.002-.98-.003-.98-.003v.997s.868-.001 1.014-.003c.146-.002.28-.025.404-.07.124-.045.211-.104.257-.178a.457.457 0 0 0 .072-.257zM7.661 3.288 4.383 1.239A.25.25 0 0 0 4 1.451V3H1v3h1V4h2v1.549a.25.25 0 0 0 .383.212l3.278-2.049a.25.25 0 0 0 0-.424z'/%3e%3cpath d='M14.5 1h-7a.5.5 0 0 0-.5.5v.196l1 .625V2h6v6H9v-.5a.5.5 0 0 0-.5-.5H8V4.679l-1 .625V7H1.5a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5v-.196l-1-.625V14H2V8h6v3.321l1-.625V9h5.5a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5z'/%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-replace;
}

Alias

  • actions-edit-replace

Download

Download