overlay-translated

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"><g><circle cx="5.5" cy="5.5" r="5.5" fill="#59F"/><path fill="#212121" d="M5.5 1C7.982 1 10 3.019 10 5.5S7.982 10 5.5 10 1 7.981 1 5.5 3.019 1 5.5 1m0-1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" opacity=".2"/><path fill="#AAD400" d="M9.983 5.1a4.521 4.521 0 0 0-2.279-3.523c-.059.063-.075.026-.075.088-.178.063-.416-.062-.594-.124a2.073 2.073 0 0 0-1.364-.063c-.178.063-.592.125-.415.499.118.188.415.375.712.125.118-.125.238-.312.415-.125.06.063.06.125.06.188-.06.186-.238.249-.415.249-.238.062-.476 0-.712.062-.239.064-.595.126-.595.438 0 .373-.119.436-.416.498-.238 0-.355.125-.238.374.06.186.238.186.357.125.474-.249.89-.873 1.423-.125l.118-.062c.119-.499.238-.186.356 0l.179.187c.711-.685.533.312.771.499-.475-.125-1.009.374-1.424.062-.711-.561-1.186-.311-1.838.249-.534.438-.652.998-.534 1.497.178.624.83.686 1.365.561.177-.063.534-.063.534.062-.12.561.533.935.295 1.558-.177.499.12 1.122.534 1.309.416.186.771-.312.95-.748.059-.062 0-.186.059-.249.474-.624.415-1.558 1.008-2.182.178-.186.771-.872.296-1.434 1.127-.312.714.81.95 1.31.177-.374.295-.748.414-1.061.059-.186.103-.244.103-.244zM3.538 1.778c.187-.197.195-.229.382-.492-.391.138-.883.41-1.236.706l.108.114h.561s.062 0 .062-.064l.062-.066s.062 0 .062-.066l.062-.066.062-.066c-.186.132-.186.066-.125 0 0 .066 0 .066 0 0 0 .066 0 0 0 0zM2.714 7.846s-.061-.059 0 0c-.061-.059-.061-.059 0 0v-.177l-.061-.059c-.061 0-.061-.06-.122-.06s-.123-.06-.184-.06h-.123s-.061 0-.061-.059c-.43-.238-.613-.652-.736-1.126 0-.119-.061-.238-.061-.356-.06-.06-.06-.119-.122-.179-.122-.118-.06-.355.062-.593v-.118c0-.06 0-.06.061-.119 0-.058 0-.058.062-.118.122-.238.368-.415.49-.593.061-.059.061-.059.061-.118v-.059c.061-.059.061-.178.122-.238 0-.058.062-.177.062-.237 0-.119 0-.178-.062-.296-.062-.178-.099-.332-.221-.451C1.329 3.601 1 4.466 1 5.474a4.49 4.49 0 0 0 1.552 3.423s.039.017.039-.041v-.06c0-.059.061-.059.061-.118.062-.24.062-.594.062-.832z"/></g></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"><g><circle cx="5.5" cy="5.5" r="5.5" fill="#59F"/><path fill="#212121" d="M5.5 1C7.982 1 10 3.019 10 5.5S7.982 10 5.5 10 1 7.981 1 5.5 3.019 1 5.5 1m0-1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" opacity=".2"/><path fill="#AAD400" d="M9.983 5.1a4.521 4.521 0 0 0-2.279-3.523c-.059.063-.075.026-.075.088-.178.063-.416-.062-.594-.124a2.073 2.073 0 0 0-1.364-.063c-.178.063-.592.125-.415.499.118.188.415.375.712.125.118-.125.238-.312.415-.125.06.063.06.125.06.188-.06.186-.238.249-.415.249-.238.062-.476 0-.712.062-.239.064-.595.126-.595.438 0 .373-.119.436-.416.498-.238 0-.355.125-.238.374.06.186.238.186.357.125.474-.249.89-.873 1.423-.125l.118-.062c.119-.499.238-.186.356 0l.179.187c.711-.685.533.312.771.499-.475-.125-1.009.374-1.424.062-.711-.561-1.186-.311-1.838.249-.534.438-.652.998-.534 1.497.178.624.83.686 1.365.561.177-.063.534-.063.534.062-.12.561.533.935.295 1.558-.177.499.12 1.122.534 1.309.416.186.771-.312.95-.748.059-.062 0-.186.059-.249.474-.624.415-1.558 1.008-2.182.178-.186.771-.872.296-1.434 1.127-.312.714.81.95 1.31.177-.374.295-.748.414-1.061.059-.186.103-.244.103-.244zM3.538 1.778c.187-.197.195-.229.382-.492-.391.138-.883.41-1.236.706l.108.114h.561s.062 0 .062-.064l.062-.066s.062 0 .062-.066l.062-.066.062-.066c-.186.132-.186.066-.125 0 0 .066 0 .066 0 0 0 .066 0 0 0 0zM2.714 7.846s-.061-.059 0 0c-.061-.059-.061-.059 0 0v-.177l-.061-.059c-.061 0-.061-.06-.122-.06s-.123-.06-.184-.06h-.123s-.061 0-.061-.059c-.43-.238-.613-.652-.736-1.126 0-.119-.061-.238-.061-.356-.06-.06-.06-.119-.122-.179-.122-.118-.06-.355.062-.593v-.118c0-.06 0-.06.061-.119 0-.058 0-.058.062-.118.122-.238.368-.415.49-.593.061-.059.061-.059.061-.118v-.059c.061-.059.061-.178.122-.238 0-.058.062-.177.062-.237 0-.119 0-.178-.062-.296-.062-.178-.099-.332-.221-.451C1.329 3.601 1 4.466 1 5.474a4.49 4.49 0 0 0 1.552 3.423s.039.017.039-.041v-.06c0-.059.061-.059.061-.118.062-.24.062-.594.062-.832z"/></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/apps.svg#apps-pagetree-page" /></svg>
    </span>
    <span class="icon-overlay">
        <svg role="img"><use xlink:href="dist/sprites/overlay.svg#overlay-translated" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="apps-pagetree-page" overlay="overlay-translated" 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%3cg%3e%3ccircle cx='5.5' cy='5.5' r='5.5' fill='%2359F'/%3e%3cpath fill='%23212121' d='M5.5 1C7.982 1 10 3.019 10 5.5S7.982 10 5.5 10 1 7.981 1 5.5 3.019 1 5.5 1m0-1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z' opacity='.2'/%3e%3cpath fill='%23AAD400' d='M9.983 5.1a4.521 4.521 0 0 0-2.279-3.523c-.059.063-.075.026-.075.088-.178.063-.416-.062-.594-.124a2.073 2.073 0 0 0-1.364-.063c-.178.063-.592.125-.415.499.118.188.415.375.712.125.118-.125.238-.312.415-.125.06.063.06.125.06.188-.06.186-.238.249-.415.249-.238.062-.476 0-.712.062-.239.064-.595.126-.595.438 0 .373-.119.436-.416.498-.238 0-.355.125-.238.374.06.186.238.186.357.125.474-.249.89-.873 1.423-.125l.118-.062c.119-.499.238-.186.356 0l.179.187c.711-.685.533.312.771.499-.475-.125-1.009.374-1.424.062-.711-.561-1.186-.311-1.838.249-.534.438-.652.998-.534 1.497.178.624.83.686 1.365.561.177-.063.534-.063.534.062-.12.561.533.935.295 1.558-.177.499.12 1.122.534 1.309.416.186.771-.312.95-.748.059-.062 0-.186.059-.249.474-.624.415-1.558 1.008-2.182.178-.186.771-.872.296-1.434 1.127-.312.714.81.95 1.31.177-.374.295-.748.414-1.061.059-.186.103-.244.103-.244zM3.538 1.778c.187-.197.195-.229.382-.492-.391.138-.883.41-1.236.706l.108.114h.561s.062 0 .062-.064l.062-.066s.062 0 .062-.066l.062-.066.062-.066c-.186.132-.186.066-.125 0 0 .066 0 .066 0 0 0 .066 0 0 0 0zM2.714 7.846s-.061-.059 0 0c-.061-.059-.061-.059 0 0v-.177l-.061-.059c-.061 0-.061-.06-.122-.06s-.123-.06-.184-.06h-.123s-.061 0-.061-.059c-.43-.238-.613-.652-.736-1.126 0-.119-.061-.238-.061-.356-.06-.06-.06-.119-.122-.179-.122-.118-.06-.355.062-.593v-.118c0-.06 0-.06.061-.119 0-.058 0-.058.062-.118.122-.238.368-.415.49-.593.061-.059.061-.059.061-.118v-.059c.061-.059.061-.178.122-.238 0-.058.062-.177.062-.237 0-.119 0-.178-.062-.296-.062-.178-.099-.332-.221-.451C1.329 3.601 1 4.466 1 5.474a4.49 4.49 0 0 0 1.552 3.423s.039.017.039-.041v-.06c0-.059.061-.059.061-.118.062-.24.062-.594.062-.832z'/%3e%3c/g%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-translated;
}

Download

Download