module-adminpanel

Introduced in v1.6.0
Available in TYPO3 9.5 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="#aebb69" rx="0" ry="0"/><path fill="#FFF" d="m44.031 40.784 3.441 4.915-2.457 1.721-3.441-4.915 2.457-1.721zm-2.376-.778c-.96.672-2.06.995-3.15.995a5.5 5.5 0 1 1 3.15-.995zm.292-3.898a3.479 3.479 0 0 0-.58-2.615A3.506 3.506 0 0 0 38.496 32a3.48 3.48 0 0 0-2.003.633 3.505 3.505 0 0 0-.86 4.875 3.508 3.508 0 0 0 2.872 1.493 3.48 3.48 0 0 0 2.003-.633 3.477 3.477 0 0 0 1.439-2.26zM48 16v14h-2v-6H18v22h15v2H16V16h32zm-8 2H18v4h22v-4zm6 0h-4v4h4v-4z"/></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"><rect width="64" height="64" fill="#aebb69" rx="0" ry="0"/><path fill="#FFF" d="m44.031 40.784 3.441 4.915-2.457 1.721-3.441-4.915 2.457-1.721zm-2.376-.778c-.96.672-2.06.995-3.15.995a5.5 5.5 0 1 1 3.15-.995zm.292-3.898a3.479 3.479 0 0 0-.58-2.615A3.506 3.506 0 0 0 38.496 32a3.48 3.48 0 0 0-2.003.633 3.505 3.505 0 0 0-.86 4.875 3.508 3.508 0 0 0 2.872 1.493 3.48 3.48 0 0 0 2.003-.633 3.477 3.477 0 0 0 1.439-2.26zM48 16v14h-2v-6H18v22h15v2H16V16h32zm-8 2H18v4h22v-4zm6 0h-4v4h4v-4z"/></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-adminpanel" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-adminpanel" 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%3crect width='64' height='64' fill='%23aebb69' rx='0' ry='0'/%3e%3cpath fill='%23FFF' d='m44.031 40.784 3.441 4.915-2.457 1.721-3.441-4.915 2.457-1.721zm-2.376-.778c-.96.672-2.06.995-3.15.995a5.5 5.5 0 1 1 3.15-.995zm.292-3.898a3.479 3.479 0 0 0-.58-2.615A3.506 3.506 0 0 0 38.496 32a3.48 3.48 0 0 0-2.003.633 3.505 3.505 0 0 0-.86 4.875 3.508 3.508 0 0 0 2.872 1.493 3.48 3.48 0 0 0 2.003-.633 3.477 3.477 0 0 0 1.439-2.26zM48 16v14h-2v-6H18v22h15v2H16V16h32zm-8 2H18v4h22v-4zm6 0h-4v4h4v-4z'/%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-adminpanel;
}

Download

Download