module-viewpage

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 64 64"><path fill="#D04038" d="M0 0h64v64H0z"/><path fill="#FFF" d="M32 41.571c-6.5-.375-12-4.075-15.75-9.563 2.15-2.813 4.691-5.738 7.891-7.338-.8 1.4-1.141 3.326-1.141 4.926 0 5 4 8.657 9 8.6 5 .057 9-3.6 9-8.6 0-1.6-.262-3.626-1.062-4.926 3.1 1.6 5.562 4.526 7.812 7.338-3.65 5.488-9.25 9.188-15.75 9.563zm1-17.075c0 .5-.4 1-1 1-2.3 0-4.2 1.9-4.2 4.2 0 .5-.4 1-1 1s-1-.4-1-1c0-3.4 2.8-6.1 6.1-6.1.6-.1 1.1.4 1.1.9zm16.6 5.908c-3.7-6.1-10.5-10.2-17.6-10.2s-13.9 4.1-17.6 10.2c-.3.4-.4 1.293-.4 1.793s.2 1 .4 1.4c3.7 6.1 10.5 10.2 17.6 10.2s13.9-4.1 17.6-10.2c.3-.4.4-.9.4-1.4s-.2-1.393-.4-1.793z"/></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="#D04038" d="M0 0h64v64H0z"/><path fill="#FFF" d="M32 41.571c-6.5-.375-12-4.075-15.75-9.563 2.15-2.813 4.691-5.738 7.891-7.338-.8 1.4-1.141 3.326-1.141 4.926 0 5 4 8.657 9 8.6 5 .057 9-3.6 9-8.6 0-1.6-.262-3.626-1.062-4.926 3.1 1.6 5.562 4.526 7.812 7.338-3.65 5.488-9.25 9.188-15.75 9.563zm1-17.075c0 .5-.4 1-1 1-2.3 0-4.2 1.9-4.2 4.2 0 .5-.4 1-1 1s-1-.4-1-1c0-3.4 2.8-6.1 6.1-6.1.6-.1 1.1.4 1.1.9zm16.6 5.908c-3.7-6.1-10.5-10.2-17.6-10.2s-13.9 4.1-17.6 10.2c-.3.4-.4 1.293-.4 1.793s.2 1 .4 1.4c3.7 6.1 10.5 10.2 17.6 10.2s13.9-4.1 17.6-10.2c.3-.4.4-.9.4-1.4s-.2-1.393-.4-1.793z"/></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-viewpage" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-viewpage" 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='%23D04038' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='M32 41.571c-6.5-.375-12-4.075-15.75-9.563 2.15-2.813 4.691-5.738 7.891-7.338-.8 1.4-1.141 3.326-1.141 4.926 0 5 4 8.657 9 8.6 5 .057 9-3.6 9-8.6 0-1.6-.262-3.626-1.062-4.926 3.1 1.6 5.562 4.526 7.812 7.338-3.65 5.488-9.25 9.188-15.75 9.563zm1-17.075c0 .5-.4 1-1 1-2.3 0-4.2 1.9-4.2 4.2 0 .5-.4 1-1 1s-1-.4-1-1c0-3.4 2.8-6.1 6.1-6.1.6-.1 1.1.4 1.1.9zm16.6 5.908c-3.7-6.1-10.5-10.2-17.6-10.2s-13.9 4.1-17.6 10.2c-.3.4-.4 1.293-.4 1.793s.2 1 .4 1.4c3.7 6.1 10.5 10.2 17.6 10.2s13.9-4.1 17.6-10.2c.3-.4.4-.9.4-1.4s-.2-1.393-.4-1.793z'/%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-viewpage;
}

Download

Download