install-clear-files

Introduced in v1.8.0
Available in TYPO3 9.5 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g><path fill="#FFC857" d="M6 5.5h20v21H6z"/><g><ellipse cx="16" cy="26.5" fill="#FFC857" rx="10" ry="3.5"/></g><g><ellipse cx="16" cy="5.5" fill="#FFC857" rx="10" ry="3.5"/></g><g opacity=".25"><ellipse cx="16" cy="5.5" fill="#FFF" rx="10" ry="3.5"/></g><g opacity=".25"><ellipse cx="16" cy="5.3" fill="#212121" rx="7" ry="1.8"/></g></g><g fill="#FFF"><path d="m19 17.1 1.2-2.1-.9.5-1.4-2.4c-.1-.2-.3-.2-.4-.2h-2.6c-.4 0-.7.2-.9.5l-1.2 2.1 1.7 1L16 14l1.5 2.6-.9.5H19zM15.8 22l1.2 2v-1h2.7c.2 0 .3-.1.4-.3l1.4-2.5c.1-.2.1-.3 0-.5l-1.4-2.4-1.7 1L20 21h-3v-1.1L15.8 22zM13.2 16.9h-2.4l.9.5-1.4 2.4c-.1.2-.1.3 0 .5l1.4 2.5c.1.2.3.3.4.3h2.8v-2L12 21l1.5-2.6.9.5-1.2-2z"/></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 32 32"><g><path fill="#FFC857" d="M6 5.5h20v21H6z"/><g><ellipse cx="16" cy="26.5" fill="#FFC857" rx="10" ry="3.5"/></g><g><ellipse cx="16" cy="5.5" fill="#FFC857" rx="10" ry="3.5"/></g><g opacity=".25"><ellipse cx="16" cy="5.5" fill="#FFF" rx="10" ry="3.5"/></g><g opacity=".25"><ellipse cx="16" cy="5.3" fill="#212121" rx="7" ry="1.8"/></g></g><g fill="#FFF"><path d="m19 17.1 1.2-2.1-.9.5-1.4-2.4c-.1-.2-.3-.2-.4-.2h-2.6c-.4 0-.7.2-.9.5l-1.2 2.1 1.7 1L16 14l1.5 2.6-.9.5H19zM15.8 22l1.2 2v-1h2.7c.2 0 .3-.1.4-.3l1.4-2.5c.1-.2.1-.3 0-.5l-1.4-2.4-1.7 1L20 21h-3v-1.1L15.8 22zM13.2 16.9h-2.4l.9.5-1.4 2.4c-.1.2-.1.3 0 .5l1.4 2.5c.1.2.3.3.4.3h2.8v-2L12 21l1.5-2.6.9.5-1.2-2z"/></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/install.svg#install-clear-files" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="install-clear-files" 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 32 32'%3e%3cg%3e%3cpath fill='%23FFC857' d='M6 5.5h20v21H6z'/%3e%3cg%3e%3cellipse cx='16' cy='26.5' fill='%23FFC857' rx='10' ry='3.5'/%3e%3c/g%3e%3cg%3e%3cellipse cx='16' cy='5.5' fill='%23FFC857' rx='10' ry='3.5'/%3e%3c/g%3e%3cg opacity='.25'%3e%3cellipse cx='16' cy='5.5' fill='%23FFF' rx='10' ry='3.5'/%3e%3c/g%3e%3cg opacity='.25'%3e%3cellipse cx='16' cy='5.3' fill='%23212121' rx='7' ry='1.8'/%3e%3c/g%3e%3c/g%3e%3cg fill='%23FFF'%3e%3cpath d='m19 17.1 1.2-2.1-.9.5-1.4-2.4c-.1-.2-.3-.2-.4-.2h-2.6c-.4 0-.7.2-.9.5l-1.2 2.1 1.7 1L16 14l1.5 2.6-.9.5H19zM15.8 22l1.2 2v-1h2.7c.2 0 .3-.1.4-.3l1.4-2.5c.1-.2.1-.3 0-.5l-1.4-2.4-1.7 1L20 21h-3v-1.1L15.8 22zM13.2 16.9h-2.4l.9.5-1.4 2.4c-.1.2-.1.3 0 .5l1.4 2.5c.1.2.3.3.4.3h2.8v-2L12 21l1.5-2.6.9.5-1.2-2z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-install-clear-files;
}

Download

Download