mimetypes-x-content-script

Introduced in v1.0.0
Available in TYPO3 7.6 8.6 9.5 10.4 11.5

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#FFF" d="M1 1h14v14H1V1z"/><path fill="#999" d="M1 1v14h14V1H1zm1 1h12v12H2V2z"/><path fill="#666" d="M13 5.883c0 .332-.037.627-.112.884a2.141 2.141 0 0 1-.31.662 2.437 2.437 0 0 1-.486.504c-.186.147-.355.282-.592.404v1.226H9.875V7.799c.177-.063.604-.127.746-.193.144-.066.295-.173.452-.321.147-.132.261-.285.343-.459.085-.174.127-.372.127-.592 0-.329-.081-.563-.243-.701-.159-.142-.385-.212-.676-.212-.179 0-.382.051-.609.153-.224.102-.43.234-.616.395H9.25V4.362c.159-.089.405-.181.736-.276a3.5 3.5 0 0 1 1.008-.148c.615 0 1.103.179 1.464.538.361.358.542.828.542 1.407zm-1.5 6.179H9.875V10.5H11.5v1.562zM7.249 12.063 3 8.744V7.381l4.249-3.318v1.716l-2.974 2.29 2.974 2.278v1.716z"/></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 16 16"><path fill="#FFF" d="M1 1h14v14H1V1z"/><path fill="#999" d="M1 1v14h14V1H1zm1 1h12v12H2V2z"/><path fill="#666" d="M13 5.883c0 .332-.037.627-.112.884a2.141 2.141 0 0 1-.31.662 2.437 2.437 0 0 1-.486.504c-.186.147-.355.282-.592.404v1.226H9.875V7.799c.177-.063.604-.127.746-.193.144-.066.295-.173.452-.321.147-.132.261-.285.343-.459.085-.174.127-.372.127-.592 0-.329-.081-.563-.243-.701-.159-.142-.385-.212-.676-.212-.179 0-.382.051-.609.153-.224.102-.43.234-.616.395H9.25V4.362c.159-.089.405-.181.736-.276a3.5 3.5 0 0 1 1.008-.148c.615 0 1.103.179 1.464.538.361.358.542.828.542 1.407zm-1.5 6.179H9.875V10.5H11.5v1.562zM7.249 12.063 3 8.744V7.381l4.249-3.318v1.716l-2.974 2.29 2.974 2.278v1.716z"/></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-script" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="mimetypes-x-content-script" 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 16 16'%3e%3cpath fill='%23FFF' d='M1 1h14v14H1V1z'/%3e%3cpath fill='%23999' d='M1 1v14h14V1H1zm1 1h12v12H2V2z'/%3e%3cpath fill='%23666' d='M13 5.883c0 .332-.037.627-.112.884a2.141 2.141 0 0 1-.31.662 2.437 2.437 0 0 1-.486.504c-.186.147-.355.282-.592.404v1.226H9.875V7.799c.177-.063.604-.127.746-.193.144-.066.295-.173.452-.321.147-.132.261-.285.343-.459.085-.174.127-.372.127-.592 0-.329-.081-.563-.243-.701-.159-.142-.385-.212-.676-.212-.179 0-.382.051-.609.153-.224.102-.43.234-.616.395H9.25V4.362c.159-.089.405-.181.736-.276a3.5 3.5 0 0 1 1.008-.148c.615 0 1.103.179 1.464.538.361.358.542.828.542 1.407zm-1.5 6.179H9.875V10.5H11.5v1.562zM7.249 12.063 3 8.744V7.381l4.249-3.318v1.716l-2.974 2.29 2.974 2.278v1.716z'/%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-script;
}

Download

Download