module-install-upgrade

Introduced in v1.1.1
Available in TYPO3 8.6 9.5 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="#6C9DCC" d="M0 0h64v64H0z"/><path fill="#FFF" d="M32 43.25c-5.652 0-10.25-4.598-10.25-10.25 0-.34.039-.669.073-1h4.748a.5.5 0 0 0 .354-.854l-6.571-6.571a.5.5 0 0 0-.707 0l-6.571 6.571a.5.5 0 0 0 .353.854h4.372c-.024.332-.051.662-.051 1 0 7.857 6.393 14.25 14.25 14.25 3.104 0 5.971-1.009 8.314-2.701l-2.876-2.876A10.179 10.179 0 0 1 32 43.25zM50.571 32h-4.372C45.682 24.609 39.52 18.75 32 18.75c-2.587 0-5.008.704-7.101 1.914l2.965 2.965A10.183 10.183 0 0 1 32 22.75c5.315 0 9.695 4.066 10.199 9.25h-4.77a.5.5 0 0 0-.354.854l6.571 6.571a.5.5 0 0 0 .707 0l6.571-6.571a.5.5 0 0 0-.353-.854z"/></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 64 64"><path fill="#6C9DCC" d="M0 0h64v64H0z"/><path fill="#FFF" d="M32 43.25c-5.652 0-10.25-4.598-10.25-10.25 0-.34.039-.669.073-1h4.748a.5.5 0 0 0 .354-.854l-6.571-6.571a.5.5 0 0 0-.707 0l-6.571 6.571a.5.5 0 0 0 .353.854h4.372c-.024.332-.051.662-.051 1 0 7.857 6.393 14.25 14.25 14.25 3.104 0 5.971-1.009 8.314-2.701l-2.876-2.876A10.179 10.179 0 0 1 32 43.25zM50.571 32h-4.372C45.682 24.609 39.52 18.75 32 18.75c-2.587 0-5.008.704-7.101 1.914l2.965 2.965A10.183 10.183 0 0 1 32 22.75c5.315 0 9.695 4.066 10.199 9.25h-4.77a.5.5 0 0 0-.354.854l6.571 6.571a.5.5 0 0 0 .707 0l6.571-6.571a.5.5 0 0 0-.353-.854z"/></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/module.svg#module-install-upgrade" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-install-upgrade" 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 64 64'%3e%3cpath fill='%236C9DCC' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='M32 43.25c-5.652 0-10.25-4.598-10.25-10.25 0-.34.039-.669.073-1h4.748a.5.5 0 0 0 .354-.854l-6.571-6.571a.5.5 0 0 0-.707 0l-6.571 6.571a.5.5 0 0 0 .353.854h4.372c-.024.332-.051.662-.051 1 0 7.857 6.393 14.25 14.25 14.25 3.104 0 5.971-1.009 8.314-2.701l-2.876-2.876A10.179 10.179 0 0 1 32 43.25zM50.571 32h-4.372C45.682 24.609 39.52 18.75 32 18.75c-2.587 0-5.008.704-7.101 1.914l2.965 2.965A10.183 10.183 0 0 1 32 22.75c5.315 0 9.695 4.066 10.199 9.25h-4.77a.5.5 0 0 0-.354.854l6.571 6.571a.5.5 0 0 0 .707 0l6.571-6.571a.5.5 0 0 0-.353-.854z'/%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-module-install-upgrade;
}

Download

Download