module-rte-ckeditor

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 64 64"><path fill="#0087D0" d="M0 0h64v64H0z"/><path fill="#FFF" d="M41.5 18.9c-.5 1-.7 2-.7 3.1 0 4.1 3.3 7.4 7.4 7.4v9.9c0 1.2-.7 2.4-1.8 3l-12.7 7.3c-1.1.6-2.4.6-3.5 0l-12.7-7.3c-1.1-.6-1.8-1.8-1.8-3V24.7c0-1.2.7-2.4 1.8-3l12.7-7.3c1.1-.6 2.4-.6 3.5 0 .1.1 7.8 4.5 7.8 4.5zm-17 6.5c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h14.4c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5zm0 5.4c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h10.3c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5zm0 5.4c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h14.4c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5z"/><path fill="#FFF" d="M48.2 15.8c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm1.6 7.6h-.6v1h-1v-1H46v-1l1.9-3h1.3v3h.6v1z"/><path fill="#FFF" d="M48.2 22.4v-1.8l-1.1 1.8z"/></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 64 64"><path fill="#0087D0" d="M0 0h64v64H0z"/><path fill="#FFF" d="M41.5 18.9c-.5 1-.7 2-.7 3.1 0 4.1 3.3 7.4 7.4 7.4v9.9c0 1.2-.7 2.4-1.8 3l-12.7 7.3c-1.1.6-2.4.6-3.5 0l-12.7-7.3c-1.1-.6-1.8-1.8-1.8-3V24.7c0-1.2.7-2.4 1.8-3l12.7-7.3c1.1-.6 2.4-.6 3.5 0 .1.1 7.8 4.5 7.8 4.5zm-17 6.5c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h14.4c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5zm0 5.4c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h10.3c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5zm0 5.4c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h14.4c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5z"/><path fill="#FFF" d="M48.2 15.8c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm1.6 7.6h-.6v1h-1v-1H46v-1l1.9-3h1.3v3h.6v1z"/><path fill="#FFF" d="M48.2 22.4v-1.8l-1.1 1.8z"/></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-rte-ckeditor" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-rte-ckeditor" 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 64 64'%3e%3cpath fill='%230087D0' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='M41.5 18.9c-.5 1-.7 2-.7 3.1 0 4.1 3.3 7.4 7.4 7.4v9.9c0 1.2-.7 2.4-1.8 3l-12.7 7.3c-1.1.6-2.4.6-3.5 0l-12.7-7.3c-1.1-.6-1.8-1.8-1.8-3V24.7c0-1.2.7-2.4 1.8-3l12.7-7.3c1.1-.6 2.4-.6 3.5 0 .1.1 7.8 4.5 7.8 4.5zm-17 6.5c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h14.4c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5zm0 5.4c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h10.3c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5zm0 5.4c-.5 0-.9.5-.9 1v.4c0 .5.4 1 .9 1h14.4c.5 0 .9-.5.9-1v-.4c0-.5-.4-1-.9-1H24.5z'/%3e%3cpath fill='%23FFF' d='M48.2 15.8c-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm1.6 7.6h-.6v1h-1v-1H46v-1l1.9-3h1.3v3h.6v1z'/%3e%3cpath fill='%23FFF' d='M48.2 22.4v-1.8l-1.1 1.8z'/%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-rte-ckeditor;
}

Download

Download