mimetypes-x-content-login - Mimetypes - @typo3/icons SVG icons for the TYPO3 CMS backend

Buttons

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="2 -3 16 16"><path fill="#FFF" d="m8.4 9.7.1-.1h.1c.6-.2 1.1-.4 1.6-.6.1-.1.2-.1.4-.2v-.4c-.5-.7-.9-1.5-.9-2.2V4.8C9.9 3.3 11.2 2 12.8 2h.5C14.9 2 16 3.2 16 4.8v1.4c0 .7-.2 1.5-.7 2.1v.4c.1 0 .2.1.3.1.4.2.8.4 1.3.5V-2H3v14h4.1c.3-1.6 1.1-2.2 1.3-2.3z"/><path fill="#999" d="M7.4 11H4V-1h12V9.1c.3.1.6.3 1 .4V-2H3v14h4.1c.1-.4.2-.7.3-1z"/><path fill="#B9B9B9" d="M5 0h8v1H5zM12.7 2H5v1h5.6c.5-.6 1.3-1 2.1-1zM9.9 6.2V4.8c0-.3 0-.5.1-.8H5v4h5.5c-.4-.6-.6-1.2-.6-1.8z"/><path fill="#59F" d="m8.4 9.7.1-.1h.1c.1 0 .2-.1.3-.1V9H5v1h3.1c.1-.2.3-.3.3-.3z"/><g><path fill="#79A548" d="M17.1 10.6c-1.1-.3-1.8-.7-2.5-1 0 .1.1.2 0 .3-.8.8-2.3.7-3 0-.1-.1-.1-.2 0-.3-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h10c-.3-2-1.1-2.4-1.1-2.4z"/><path d="M8.7 12.4c.1-.8.4-1.2.5-1.2.7-.2 1.2-.5 1.7-.7.1 0 .1-.1.2-.1.5.4 1.2.7 1.9.7s1.4-.3 1.9-.7c.1 0 .1 0 .2.1.5.2 1.1.5 1.7.7.1.1.4.4.5 1.2l.1.6h.6c-.1-2-.9-2.4-.9-2.4-1.1-.3-1.8-.7-2.5-1 0 .1.1.2 0 .3-.4.4-.9.6-1.5.6s-1.2-.2-1.5-.6c-.1-.1-.1-.2 0-.3-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h.6l-.1-.6z" opacity=".15"/><path fill="#FFC857" d="M13 8.6c-.4 0-.9-.3-1.2-.6 0 1.5-.5 1.6-.3 1.9.7.8 2.3.8 3 0 .2-.2-.2-.4-.2-1.9-.4.4-.9.6-1.3.6z"/><path d="M11.3 9.6c.1 0 .1-.1.2-.1-.1.1-.1.2 0 .3.1.2.2.2.3.3l.2-.1.1-.3c.1-.2.2-.6.3-1.3-.2-.1-.4-.3-.6-.4 0 .9-.2 1.3-.3 1.6h-.2zM13.9 9.7l.1.3.2.1c.1-.1.2-.1.3-.2.1-.1.1-.2 0-.3-.1-.2-.2-.6-.3-1.6-.2.2-.4.3-.6.4.1.7.2 1.1.3 1.3z" opacity=".15"/><path fill="#FFC857" d="M13 8.6c-1.1 0-2.1-1.4-2.1-2.4V4.8c0-1 .9-1.8 1.9-1.8h.5c1.1 0 1.9.8 1.9 1.8v1.4c-.1 1-1.1 2.4-2.2 2.4z"/><path d="M13.3 3.6c.7 0 1.3.5 1.3 1.2v1.4c0 .7-.8 1.8-1.5 1.8s-1.6-1.1-1.6-1.8V4.8c0-.6.6-1.2 1.3-1.2h.5m0-.6h-.5c-1 0-1.9.8-1.9 1.8v1.4c0 1 1.1 2.4 2.1 2.4s2.1-1.4 2.1-2.4V4.8c0-1-.8-1.8-1.8-1.8z" opacity=".15"/></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="2 -3 16 16"><path fill="#FFF" d="m8.4 9.7.1-.1h.1c.6-.2 1.1-.4 1.6-.6.1-.1.2-.1.4-.2v-.4c-.5-.7-.9-1.5-.9-2.2V4.8C9.9 3.3 11.2 2 12.8 2h.5C14.9 2 16 3.2 16 4.8v1.4c0 .7-.2 1.5-.7 2.1v.4c.1 0 .2.1.3.1.4.2.8.4 1.3.5V-2H3v14h4.1c.3-1.6 1.1-2.2 1.3-2.3z"/><path fill="#999" d="M7.4 11H4V-1h12V9.1c.3.1.6.3 1 .4V-2H3v14h4.1c.1-.4.2-.7.3-1z"/><path fill="#B9B9B9" d="M5 0h8v1H5zM12.7 2H5v1h5.6c.5-.6 1.3-1 2.1-1zM9.9 6.2V4.8c0-.3 0-.5.1-.8H5v4h5.5c-.4-.6-.6-1.2-.6-1.8z"/><path fill="#59F" d="m8.4 9.7.1-.1h.1c.1 0 .2-.1.3-.1V9H5v1h3.1c.1-.2.3-.3.3-.3z"/><g><path fill="#79A548" d="M17.1 10.6c-1.1-.3-1.8-.7-2.5-1 0 .1.1.2 0 .3-.8.8-2.3.7-3 0-.1-.1-.1-.2 0-.3-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h10c-.3-2-1.1-2.4-1.1-2.4z"/><path d="M8.7 12.4c.1-.8.4-1.2.5-1.2.7-.2 1.2-.5 1.7-.7.1 0 .1-.1.2-.1.5.4 1.2.7 1.9.7s1.4-.3 1.9-.7c.1 0 .1 0 .2.1.5.2 1.1.5 1.7.7.1.1.4.4.5 1.2l.1.6h.6c-.1-2-.9-2.4-.9-2.4-1.1-.3-1.8-.7-2.5-1 0 .1.1.2 0 .3-.4.4-.9.6-1.5.6s-1.2-.2-1.5-.6c-.1-.1-.1-.2 0-.3-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h.6l-.1-.6z" opacity=".15"/><path fill="#FFC857" d="M13 8.6c-.4 0-.9-.3-1.2-.6 0 1.5-.5 1.6-.3 1.9.7.8 2.3.8 3 0 .2-.2-.2-.4-.2-1.9-.4.4-.9.6-1.3.6z"/><path d="M11.3 9.6c.1 0 .1-.1.2-.1-.1.1-.1.2 0 .3.1.2.2.2.3.3l.2-.1.1-.3c.1-.2.2-.6.3-1.3-.2-.1-.4-.3-.6-.4 0 .9-.2 1.3-.3 1.6h-.2zM13.9 9.7l.1.3.2.1c.1-.1.2-.1.3-.2.1-.1.1-.2 0-.3-.1-.2-.2-.6-.3-1.6-.2.2-.4.3-.6.4.1.7.2 1.1.3 1.3z" opacity=".15"/><path fill="#FFC857" d="M13 8.6c-1.1 0-2.1-1.4-2.1-2.4V4.8c0-1 .9-1.8 1.9-1.8h.5c1.1 0 1.9.8 1.9 1.8v1.4c-.1 1-1.1 2.4-2.2 2.4z"/><path d="M13.3 3.6c.7 0 1.3.5 1.3 1.2v1.4c0 .7-.8 1.8-1.5 1.8s-1.6-1.1-1.6-1.8V4.8c0-.6.6-1.2 1.3-1.2h.5m0-.6h-.5c-1 0-1.9.8-1.9 1.8v1.4c0 1 1.1 2.4 2.1 2.4s2.1-1.4 2.1-2.4V4.8c0-1-.8-1.8-1.8-1.8z" opacity=".15"/></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/mimetypes.svg#mimetypes-x-content-login" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="mimetypes-x-content-login" 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='2 -3 16 16'%3e%3cpath fill='%23FFF' d='m8.4 9.7.1-.1h.1c.6-.2 1.1-.4 1.6-.6.1-.1.2-.1.4-.2v-.4c-.5-.7-.9-1.5-.9-2.2V4.8C9.9 3.3 11.2 2 12.8 2h.5C14.9 2 16 3.2 16 4.8v1.4c0 .7-.2 1.5-.7 2.1v.4c.1 0 .2.1.3.1.4.2.8.4 1.3.5V-2H3v14h4.1c.3-1.6 1.1-2.2 1.3-2.3z'/%3e%3cpath fill='%23999' d='M7.4 11H4V-1h12V9.1c.3.1.6.3 1 .4V-2H3v14h4.1c.1-.4.2-.7.3-1z'/%3e%3cpath fill='%23B9B9B9' d='M5 0h8v1H5zM12.7 2H5v1h5.6c.5-.6 1.3-1 2.1-1zM9.9 6.2V4.8c0-.3 0-.5.1-.8H5v4h5.5c-.4-.6-.6-1.2-.6-1.8z'/%3e%3cpath fill='%2359F' d='m8.4 9.7.1-.1h.1c.1 0 .2-.1.3-.1V9H5v1h3.1c.1-.2.3-.3.3-.3z'/%3e%3cg%3e%3cpath fill='%2379A548' d='M17.1 10.6c-1.1-.3-1.8-.7-2.5-1 0 .1.1.2 0 .3-.8.8-2.3.7-3 0-.1-.1-.1-.2 0-.3-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h10c-.3-2-1.1-2.4-1.1-2.4z'/%3e%3cpath d='M8.7 12.4c.1-.8.4-1.2.5-1.2.7-.2 1.2-.5 1.7-.7.1 0 .1-.1.2-.1.5.4 1.2.7 1.9.7s1.4-.3 1.9-.7c.1 0 .1 0 .2.1.5.2 1.1.5 1.7.7.1.1.4.4.5 1.2l.1.6h.6c-.1-2-.9-2.4-.9-2.4-1.1-.3-1.8-.7-2.5-1 0 .1.1.2 0 .3-.4.4-.9.6-1.5.6s-1.2-.2-1.5-.6c-.1-.1-.1-.2 0-.3-.7.3-1.5.7-2.5 1 0 0-.9.5-.9 2.4h.6l-.1-.6z' opacity='.15'/%3e%3cpath fill='%23FFC857' d='M13 8.6c-.4 0-.9-.3-1.2-.6 0 1.5-.5 1.6-.3 1.9.7.8 2.3.8 3 0 .2-.2-.2-.4-.2-1.9-.4.4-.9.6-1.3.6z'/%3e%3cpath d='M11.3 9.6c.1 0 .1-.1.2-.1-.1.1-.1.2 0 .3.1.2.2.2.3.3l.2-.1.1-.3c.1-.2.2-.6.3-1.3-.2-.1-.4-.3-.6-.4 0 .9-.2 1.3-.3 1.6h-.2zM13.9 9.7l.1.3.2.1c.1-.1.2-.1.3-.2.1-.1.1-.2 0-.3-.1-.2-.2-.6-.3-1.6-.2.2-.4.3-.6.4.1.7.2 1.1.3 1.3z' opacity='.15'/%3e%3cpath fill='%23FFC857' d='M13 8.6c-1.1 0-2.1-1.4-2.1-2.4V4.8c0-1 .9-1.8 1.9-1.8h.5c1.1 0 1.9.8 1.9 1.8v1.4c-.1 1-1.1 2.4-2.2 2.4z'/%3e%3cpath d='M13.3 3.6c.7 0 1.3.5 1.3 1.2v1.4c0 .7-.8 1.8-1.5 1.8s-1.6-1.1-1.6-1.8V4.8c0-.6.6-1.2 1.3-1.2h.5m0-.6h-.5c-1 0-1.9.8-1.9 1.8v1.4c0 1 1.1 2.4 2.1 2.4s2.1-1.4 2.1-2.4V4.8c0-1-.8-1.8-1.8-1.8z' opacity='.15'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-mimetypes-x-content-login;
}

Download