overlay-restricted

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

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path fill="#666" d="M5.725 0h-.45C3.818 0 2.588 1.205 2.588 2.631v1.237c0 .649.287 1.38.769 1.99a2.784 2.784 0 0 1-.045.302l-.288.127c-.44.196-.896.398-1.455.558l-.116.033-.105.06C1.135 7.059 0 7.809 0 10v1h11v-1c0-2.275-1.175-2.978-1.396-3.088L9.52 6.87l-.089-.025c-.562-.16-1.019-.364-1.461-.56a42.292 42.292 0 0 0-.255-.113 3.48 3.48 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V2.631C8.412 1.156 7.232 0 5.725 0z"/><path fill="#FFC857" d="M9.156 7.806c-.949-.271-1.611-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V2.631C7.412 1.731 6.681 1 5.725 1h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.665.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/><path fill="#79A548" d="M9.156 7.806c-.949-.271-1.612-.642-2.272-.896.04.13.046.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.15-.017-.285-.666.254-1.332.63-2.289.903 0 0-.788.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/></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="#EFEFEF" d="M2 0v16h12V4l-4-4H2z"/><path fill="#FFF" d="M10 4V0l4 4h-4z" opacity=".65"/><path fill="#212121" d="M13 5v5L9 5h4z" opacity=".2"/><path fill="#999" d="M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z"/></svg>
    </span>
    <span class="icon-overlay">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path fill="#666" d="M5.725 0h-.45C3.818 0 2.588 1.205 2.588 2.631v1.237c0 .649.287 1.38.769 1.99a2.784 2.784 0 0 1-.045.302l-.288.127c-.44.196-.896.398-1.455.558l-.116.033-.105.06C1.135 7.059 0 7.809 0 10v1h11v-1c0-2.275-1.175-2.978-1.396-3.088L9.52 6.87l-.089-.025c-.562-.16-1.019-.364-1.461-.56a42.292 42.292 0 0 0-.255-.113 3.48 3.48 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V2.631C8.412 1.156 7.232 0 5.725 0z"/><path fill="#FFC857" d="M9.156 7.806c-.949-.271-1.611-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V2.631C7.412 1.731 6.681 1 5.725 1h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.665.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/><path fill="#79A548" d="M9.156 7.806c-.949-.271-1.612-.642-2.272-.896.04.13.046.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.15-.017-.285-.666.254-1.332.63-2.289.903 0 0-.788.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z"/></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/apps.svg#apps-pagetree-page" /></svg>
    </span>
    <span class="icon-overlay">
        <svg role="img"><use xlink:href="dist/sprites/overlay.svg#overlay-restricted" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="apps-pagetree-page" overlay="overlay-restricted" 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 11 11'%3e%3cpath fill='%23666' d='M5.725 0h-.45C3.818 0 2.588 1.205 2.588 2.631v1.237c0 .649.287 1.38.769 1.99a2.784 2.784 0 0 1-.045.302l-.288.127c-.44.196-.896.398-1.455.558l-.116.033-.105.06C1.135 7.059 0 7.809 0 10v1h11v-1c0-2.275-1.175-2.978-1.396-3.088L9.52 6.87l-.089-.025c-.562-.16-1.019-.364-1.461-.56a42.292 42.292 0 0 0-.255-.113 3.48 3.48 0 0 1-.053-.338c.47-.606.751-1.327.751-1.966V2.631C8.412 1.156 7.232 0 5.725 0z'/%3e%3cpath fill='%23FFC857' d='M9.156 7.806c-.949-.271-1.611-.642-2.272-.896-.063-.207-.214-.574-.25-1.418.454-.457.779-1.103.779-1.623V2.631C7.412 1.731 6.681 1 5.725 1h-.45c-.9 0-1.688.731-1.688 1.631v1.237c0 .525.329 1.177.789 1.635-.015.829-.171 1.194-.245 1.401-.665.254-1.331.629-2.287.902 0 0-.787.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z'/%3e%3cpath fill='%2379A548' d='M9.156 7.806c-.949-.271-1.612-.642-2.272-.896.04.13.046.197-.034.278-.675.731-2.081.675-2.7 0-.082-.082-.066-.15-.017-.285-.666.254-1.332.63-2.289.903 0 0-.788.45-.844 2.194h9c-.056-1.8-.844-2.194-.844-2.194z'/%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-overlay-restricted;
}

Download

Download