mimetypes-x-content-page-language-overlay

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

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 16 16"><g><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"/></g><g><circle cx="10.5" cy="10.5" r="5.5" fill="#59F"/><path fill="#212121" d="M10.5 6c2.481 0 4.5 2.019 4.5 4.5S12.981 15 10.5 15 6 12.981 6 10.5 8.019 6 10.5 6m0-1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z" opacity=".2"/><path fill="#AAD400" d="M14.982 10.1a4.521 4.521 0 0 0-2.279-3.523c-.059.062-.075.026-.075.088-.178.062-.415-.062-.593-.125a2.079 2.079 0 0 0-1.364-.062c-.178.062-.593.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-.24.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.712-.685.534.312.771.499-.476-.125-1.009.374-1.424.062-.712-.561-1.186-.311-1.838.249-.534.437-.652.998-.534 1.497.177.624.829.686 1.364.561.177-.063.534-.063.534.062-.119.561.534.935.296 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.309.177-.374.296-.748.415-1.061.058-.185.101-.243.101-.243zM8.538 6.778c.187-.197.195-.229.382-.492-.391.138-.883.41-1.236.707l.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 0v-.001zM7.714 12.846s-.062-.059 0 0c-.062-.059-.062-.059 0 0v-.177l-.062-.059c-.061 0-.061-.06-.122-.06s-.122-.06-.184-.06h-.122s-.061 0-.061-.059c-.429-.238-.613-.653-.735-1.126 0-.119-.061-.238-.061-.356-.06-.06-.06-.119-.122-.179-.122-.118-.06-.356.062-.593v-.118c0-.06 0-.06.061-.119 0-.058 0-.058.062-.118.122-.238.368-.415.49-.593.059-.059.059-.059.059-.118v-.059c.061-.059.061-.178.122-.238 0-.058.062-.177.062-.237 0-.119 0-.178-.062-.296-.061-.178-.099-.332-.221-.451-.551.771-.88 1.636-.88 2.644a4.49 4.49 0 0 0 1.552 3.423s.039.017.039-.041v-.06c0-.059.061-.059.061-.118.061-.24.061-.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" xml:space="preserve" viewBox="0 0 16 16"><g><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"/></g><g><circle cx="10.5" cy="10.5" r="5.5" fill="#59F"/><path fill="#212121" d="M10.5 6c2.481 0 4.5 2.019 4.5 4.5S12.981 15 10.5 15 6 12.981 6 10.5 8.019 6 10.5 6m0-1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z" opacity=".2"/><path fill="#AAD400" d="M14.982 10.1a4.521 4.521 0 0 0-2.279-3.523c-.059.062-.075.026-.075.088-.178.062-.415-.062-.593-.125a2.079 2.079 0 0 0-1.364-.062c-.178.062-.593.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-.24.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.712-.685.534.312.771.499-.476-.125-1.009.374-1.424.062-.712-.561-1.186-.311-1.838.249-.534.437-.652.998-.534 1.497.177.624.829.686 1.364.561.177-.063.534-.063.534.062-.119.561.534.935.296 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.309.177-.374.296-.748.415-1.061.058-.185.101-.243.101-.243zM8.538 6.778c.187-.197.195-.229.382-.492-.391.138-.883.41-1.236.707l.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 0v-.001zM7.714 12.846s-.062-.059 0 0c-.062-.059-.062-.059 0 0v-.177l-.062-.059c-.061 0-.061-.06-.122-.06s-.122-.06-.184-.06h-.122s-.061 0-.061-.059c-.429-.238-.613-.653-.735-1.126 0-.119-.061-.238-.061-.356-.06-.06-.06-.119-.122-.179-.122-.118-.06-.356.062-.593v-.118c0-.06 0-.06.061-.119 0-.058 0-.058.062-.118.122-.238.368-.415.49-.593.059-.059.059-.059.059-.118v-.059c.061-.059.061-.178.122-.238 0-.058.062-.177.062-.237 0-.119 0-.178-.062-.296-.061-.178-.099-.332-.221-.451-.551.771-.88 1.636-.88 2.644a4.49 4.49 0 0 0 1.552 3.423s.039.017.039-.041v-.06c0-.059.061-.059.061-.118.061-.24.061-.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/mimetypes.svg#mimetypes-x-content-page-language-overlay" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="mimetypes-x-content-page-language-overlay" 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 16 16'%3e%3cg%3e%3cpath fill='%23EFEFEF' d='M2 0v16h12V4l-4-4H2z'/%3e%3cpath fill='%23FFF' d='M10 4V0l4 4h-4z' opacity='.65'/%3e%3cpath fill='%23212121' d='M13 5v5L9 5h4z' opacity='.2'/%3e%3cpath fill='%23999' d='M2 0v16h12V4l-4-4H2zm1 1h6v4h4v10H3V1zm7 .4L12.6 4H10V1.4z'/%3e%3c/g%3e%3cg%3e%3ccircle cx='10.5' cy='10.5' r='5.5' fill='%2359F'/%3e%3cpath fill='%23212121' d='M10.5 6c2.481 0 4.5 2.019 4.5 4.5S12.981 15 10.5 15 6 12.981 6 10.5 8.019 6 10.5 6m0-1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 1 0 0-11z' opacity='.2'/%3e%3cpath fill='%23AAD400' d='M14.982 10.1a4.521 4.521 0 0 0-2.279-3.523c-.059.062-.075.026-.075.088-.178.062-.415-.062-.593-.125a2.079 2.079 0 0 0-1.364-.062c-.178.062-.593.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-.24.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.712-.685.534.312.771.499-.476-.125-1.009.374-1.424.062-.712-.561-1.186-.311-1.838.249-.534.437-.652.998-.534 1.497.177.624.829.686 1.364.561.177-.063.534-.063.534.062-.119.561.534.935.296 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.309.177-.374.296-.748.415-1.061.058-.185.101-.243.101-.243zM8.538 6.778c.187-.197.195-.229.382-.492-.391.138-.883.41-1.236.707l.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 0v-.001zM7.714 12.846s-.062-.059 0 0c-.062-.059-.062-.059 0 0v-.177l-.062-.059c-.061 0-.061-.06-.122-.06s-.122-.06-.184-.06h-.122s-.061 0-.061-.059c-.429-.238-.613-.653-.735-1.126 0-.119-.061-.238-.061-.356-.06-.06-.06-.119-.122-.179-.122-.118-.06-.356.062-.593v-.118c0-.06 0-.06.061-.119 0-.058 0-.058.062-.118.122-.238.368-.415.49-.593.059-.059.059-.059.059-.118v-.059c.061-.059.061-.178.122-.238 0-.058.062-.177.062-.237 0-.119 0-.178-.062-.296-.061-.178-.099-.332-.221-.451-.551.771-.88 1.636-.88 2.644a4.49 4.49 0 0 0 1.552 3.423s.039.017.039-.041v-.06c0-.059.061-.059.061-.118.061-.24.061-.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-mimetypes.scss";

.myclass {
    background-size: 1em 1em;
    background-image: $icon-mimetypes-x-content-page-language-overlay;
}

Download

Download