module-install-maintenance

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="#D03F38" d="M0 0h64v64H0z"/><path fill="#FFF" d="M22.054 47.761c-.462.462-1.124.743-1.806.743s-1.345-.281-1.827-.743l-2.128-2.17a2.521 2.521 0 0 1-.763-1.808c0-.683.281-1.346.763-1.828l13.669-13.682a10.36 10.36 0 0 0 5.781 5.786L22.054 47.761zm-.522-6.549c-.702 0-1.285.583-1.285 1.286 0 .703.582 1.286 1.285 1.286s1.285-.583 1.285-1.286c0-.704-.582-1.286-1.285-1.286zm26.475-13.763c-1.265 3.576-4.697 6.047-8.491 6.047-4.958 0-8.992-4.038-8.992-9.001s4.034-9.001 8.992-9.001c1.465 0 3.372.442 4.596 1.266.201.141.321.321.321.563 0 .221-.141.442-.321.563l-5.881 3.395v4.5l3.874 2.15c.662-.382 5.319-3.315 5.721-3.315.401 0 .642.301.642.703.001.664-.24 1.488-.461 2.13z"/></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="#D03F38" d="M0 0h64v64H0z"/><path fill="#FFF" d="M22.054 47.761c-.462.462-1.124.743-1.806.743s-1.345-.281-1.827-.743l-2.128-2.17a2.521 2.521 0 0 1-.763-1.808c0-.683.281-1.346.763-1.828l13.669-13.682a10.36 10.36 0 0 0 5.781 5.786L22.054 47.761zm-.522-6.549c-.702 0-1.285.583-1.285 1.286 0 .703.582 1.286 1.285 1.286s1.285-.583 1.285-1.286c0-.704-.582-1.286-1.285-1.286zm26.475-13.763c-1.265 3.576-4.697 6.047-8.491 6.047-4.958 0-8.992-4.038-8.992-9.001s4.034-9.001 8.992-9.001c1.465 0 3.372.442 4.596 1.266.201.141.321.321.321.563 0 .221-.141.442-.321.563l-5.881 3.395v4.5l3.874 2.15c.662-.382 5.319-3.315 5.721-3.315.401 0 .642.301.642.703.001.664-.24 1.488-.461 2.13z"/></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-maintenance" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-install-maintenance" 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='%23D03F38' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='M22.054 47.761c-.462.462-1.124.743-1.806.743s-1.345-.281-1.827-.743l-2.128-2.17a2.521 2.521 0 0 1-.763-1.808c0-.683.281-1.346.763-1.828l13.669-13.682a10.36 10.36 0 0 0 5.781 5.786L22.054 47.761zm-.522-6.549c-.702 0-1.285.583-1.285 1.286 0 .703.582 1.286 1.285 1.286s1.285-.583 1.285-1.286c0-.704-.582-1.286-1.285-1.286zm26.475-13.763c-1.265 3.576-4.697 6.047-8.491 6.047-4.958 0-8.992-4.038-8.992-9.001s4.034-9.001 8.992-9.001c1.465 0 3.372.442 4.596 1.266.201.141.321.321.321.563 0 .221-.141.442-.321.563l-5.881 3.395v4.5l3.874 2.15c.662-.382 5.319-3.315 5.721-3.315.401 0 .642.301.642.703.001.664-.24 1.488-.461 2.13z'/%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-maintenance;
}

Download

Download