install-clear-autoload

Introduced in v1.8.0
Available in TYPO3 9.5 10.4 11.5 12.4 13.x

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path fill="#777BB3" d="M24.8 5H7.2c-.1 0-.2.1-.3.1L4 10.9V26.7c0 .2.1.3.3.3h23.5c.1 0 .3-.1.3-.3V11l-2.9-5.8c-.2-.1-.3-.2-.4-.2z"/><g fill="#FFF" opacity=".15"><path d="M24.8 5H7.2c-.1 0-.2.1-.3.1l-1 2.2h20.3l-1.1-2.1c-.1-.1-.2-.2-.3-.2zM26.9 8.8H5.1L4 11h24zM4.8 23 6 25v-1h2.7c.2 0 .3-.1.4-.3l1.4-2.5c.1-.2.1-.3 0-.5l-1.4-2.4-1.7 1L9 22H6v-1l-1.2 2zM4 16.7 5 15l1.5 2.6-.9.5H8L9.2 16l-.9.5-1.4-2.4c-.1 0-.3-.1-.5-.1H4v2.7z"/></g><g fill="#FFF"><path d="M10.3 16.7h2.4c.7 0 1.2.2 1.5.6s.4.9.3 1.6c0 .3-.1.6-.3.9-.1.3-.3.6-.6.8-.3.3-.6.5-.9.6-.3.1-.7.1-1 .1h-1.1l-.4 1.7H9l1.3-6.3m1 1-.5 2.6h.2c.6 0 1 0 1.4-.2.4-.1.6-.6.8-1.3.1-.6 0-1-.3-1.1s-.7-.1-1.2-.1h-.2c-.1.1-.1.1-.2.1M15.9 15h1.2l-.3 1.7h1.1c.6 0 1.1.1 1.3.4.3.2.4.7.3 1.3l-.6 2.9h-1.2l.6-2.8c.1-.3 0-.5-.1-.6s-.3-.2-.6-.2h-1l-.7 3.6h-1.2l1.2-6.3M20.8 16.7h2.4c.7 0 1.2.2 1.5.6s.4.9.3 1.6c0 .3-.1.6-.3.9-.1.3-.3.6-.6.8-.3.3-.6.5-.9.6s-.7.1-1 .1h-1.1l-.4 1.7h-1.2l1.3-6.3m1 1-.5 2.6h.2c.6 0 1 0 1.4-.2.4-.1.6-.6.8-1.3.1-.6 0-1-.3-1.1s-.7-.1-1.2-.1H22c-.1.1-.1.1-.2.1"/></g></svg>

Inline

<span class="icon icon-size-small icon-state-default">
    <span class="icon-markup">
        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 32 32"><path fill="#777BB3" d="M24.8 5H7.2c-.1 0-.2.1-.3.1L4 10.9V26.7c0 .2.1.3.3.3h23.5c.1 0 .3-.1.3-.3V11l-2.9-5.8c-.2-.1-.3-.2-.4-.2z"/><g fill="#FFF" opacity=".15"><path d="M24.8 5H7.2c-.1 0-.2.1-.3.1l-1 2.2h20.3l-1.1-2.1c-.1-.1-.2-.2-.3-.2zM26.9 8.8H5.1L4 11h24zM4.8 23 6 25v-1h2.7c.2 0 .3-.1.4-.3l1.4-2.5c.1-.2.1-.3 0-.5l-1.4-2.4-1.7 1L9 22H6v-1l-1.2 2zM4 16.7 5 15l1.5 2.6-.9.5H8L9.2 16l-.9.5-1.4-2.4c-.1 0-.3-.1-.5-.1H4v2.7z"/></g><g fill="#FFF"><path d="M10.3 16.7h2.4c.7 0 1.2.2 1.5.6s.4.9.3 1.6c0 .3-.1.6-.3.9-.1.3-.3.6-.6.8-.3.3-.6.5-.9.6-.3.1-.7.1-1 .1h-1.1l-.4 1.7H9l1.3-6.3m1 1-.5 2.6h.2c.6 0 1 0 1.4-.2.4-.1.6-.6.8-1.3.1-.6 0-1-.3-1.1s-.7-.1-1.2-.1h-.2c-.1.1-.1.1-.2.1M15.9 15h1.2l-.3 1.7h1.1c.6 0 1.1.1 1.3.4.3.2.4.7.3 1.3l-.6 2.9h-1.2l.6-2.8c.1-.3 0-.5-.1-.6s-.3-.2-.6-.2h-1l-.7 3.6h-1.2l1.2-6.3M20.8 16.7h2.4c.7 0 1.2.2 1.5.6s.4.9.3 1.6c0 .3-.1.6-.3.9-.1.3-.3.6-.6.8-.3.3-.6.5-.9.6s-.7.1-1 .1h-1.1l-.4 1.7h-1.2l1.3-6.3m1 1-.5 2.6h.2c.6 0 1 0 1.4-.2.4-.1.6-.6.8-1.3.1-.6 0-1-.3-1.1s-.7-.1-1.2-.1H22c-.1.1-.1.1-.2.1"/></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-autoload" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="install-clear-autoload" 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' xml:space='preserve' viewBox='0 0 32 32'%3e%3cpath fill='%23777BB3' d='M24.8 5H7.2c-.1 0-.2.1-.3.1L4 10.9V26.7c0 .2.1.3.3.3h23.5c.1 0 .3-.1.3-.3V11l-2.9-5.8c-.2-.1-.3-.2-.4-.2z'/%3e%3cg fill='%23FFF' opacity='.15'%3e%3cpath d='M24.8 5H7.2c-.1 0-.2.1-.3.1l-1 2.2h20.3l-1.1-2.1c-.1-.1-.2-.2-.3-.2zM26.9 8.8H5.1L4 11h24zM4.8 23 6 25v-1h2.7c.2 0 .3-.1.4-.3l1.4-2.5c.1-.2.1-.3 0-.5l-1.4-2.4-1.7 1L9 22H6v-1l-1.2 2zM4 16.7 5 15l1.5 2.6-.9.5H8L9.2 16l-.9.5-1.4-2.4c-.1 0-.3-.1-.5-.1H4v2.7z'/%3e%3c/g%3e%3cg fill='%23FFF'%3e%3cpath d='M10.3 16.7h2.4c.7 0 1.2.2 1.5.6s.4.9.3 1.6c0 .3-.1.6-.3.9-.1.3-.3.6-.6.8-.3.3-.6.5-.9.6-.3.1-.7.1-1 .1h-1.1l-.4 1.7H9l1.3-6.3m1 1-.5 2.6h.2c.6 0 1 0 1.4-.2.4-.1.6-.6.8-1.3.1-.6 0-1-.3-1.1s-.7-.1-1.2-.1h-.2c-.1.1-.1.1-.2.1M15.9 15h1.2l-.3 1.7h1.1c.6 0 1.1.1 1.3.4.3.2.4.7.3 1.3l-.6 2.9h-1.2l.6-2.8c.1-.3 0-.5-.1-.6s-.3-.2-.6-.2h-1l-.7 3.6h-1.2l1.2-6.3M20.8 16.7h2.4c.7 0 1.2.2 1.5.6s.4.9.3 1.6c0 .3-.1.6-.3.9-.1.3-.3.6-.6.8-.3.3-.6.5-.9.6s-.7.1-1 .1h-1.1l-.4 1.7h-1.2l1.3-6.3m1 1-.5 2.6h.2c.6 0 1 0 1.4-.2.4-.1.6-.6.8-1.3.1-.6 0-1-.3-1.1s-.7-.1-1.2-.1H22c-.1.1-.1.1-.2.1'/%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-autoload;
}

Download

Download