modulegroup-site

Introduced in v1.10.0
Available in TYPO3 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="M32 16c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16zm0 30a13.926 13.926 0 0 1-9.155-3.433c.027.008.103.023.103-.129v-.188c0-.184.19-.184.19-.368.192-.74.192-1.844.192-2.58l.002-.002v-.552l-.192-.184c-.19 0-.19-.186-.38-.186s-.38-.186-.572-.186h-.382s-.19 0-.19-.184c-1.336-.74-1.906-2.03-2.288-3.504 0-.37-.19-.74-.19-1.108-.188-.186-.188-.37-.38-.556-.38-.368-.188-1.106.192-1.844v-.368c0-.186 0-.186.19-.37 0-.18 0-.18.192-.366.38-.74 1.144-1.292 1.524-1.846.19-.184.19-.184.19-.368v-.184c.19-.184.19-.554.38-.74 0-.18.192-.552.192-.736 0-.37 0-.554-.192-.92-.19-.55-.309-1.024-.679-1.392a14.104 14.104 0 0 1 2.496-2.612l.331.349h1.746s.194 0 .194-.2l.194-.206s.194 0 .194-.204l.192-.204.194-.206c-.58.41-.58.206-.388 0l-.004-.002c.573-.604.609-.715 1.171-1.505A13.87 13.87 0 0 1 32 18c2.488 0 4.821.66 6.848 1.802-.177.181-.226.077-.226.267-.554.194-1.292-.194-1.846-.388a6.46 6.46 0 0 0-4.244-.194c-.554.194-1.844.388-1.292 1.552.368.584 1.29 1.166 2.214.39.368-.388.74-.97 1.29-.388.186.196.186.39.186.584-.186.58-.74.776-1.292.776-.74.194-1.48 0-2.216.194-.74.194-1.846.388-1.846 1.36 0 1.16-.37 1.356-1.294 1.55-.74 0-1.106.388-.74 1.164.186.58.74.58 1.11.388 1.476-.776 2.768-2.716 4.428-.388l.368-.194c.37-1.552.74-.58 1.108 0l.554.58c2.214-2.132 1.66.972 2.4 1.552-1.48-.388-3.14 1.164-4.43.194-2.214-1.744-3.69-.968-5.72.776-1.66 1.36-2.03 3.104-1.66 4.656.552 1.94 2.58 2.134 4.244 1.746.552-.196 1.66-.196 1.66.192-.37 1.746 1.66 2.91.92 4.848-.552 1.552.372 3.492 1.66 4.074 1.294.58 2.4-.97 2.956-2.328.184-.194 0-.58.184-.776 1.476-1.94 1.292-4.848 3.136-6.788.554-.58 2.4-2.714.92-4.46 3.508-.97 2.22 2.52 2.956 4.074.552-1.164.92-2.328 1.29-3.3.168-.53.291-.717.312-.747.035.407.062.816.062 1.232 0 7.718-6.282 14-14 14zm-8.728-6.757c-.022-.022-.027-.026 0 0z"/></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 64 64"><g fill="currentColor"><path d="M32 16c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16zm0 30a13.926 13.926 0 0 1-9.155-3.433c.027.008.103.023.103-.129v-.188c0-.184.19-.184.19-.368.192-.74.192-1.844.192-2.58l.002-.002v-.552l-.192-.184c-.19 0-.19-.186-.38-.186s-.38-.186-.572-.186h-.382s-.19 0-.19-.184c-1.336-.74-1.906-2.03-2.288-3.504 0-.37-.19-.74-.19-1.108-.188-.186-.188-.37-.38-.556-.38-.368-.188-1.106.192-1.844v-.368c0-.186 0-.186.19-.37 0-.18 0-.18.192-.366.38-.74 1.144-1.292 1.524-1.846.19-.184.19-.184.19-.368v-.184c.19-.184.19-.554.38-.74 0-.18.192-.552.192-.736 0-.37 0-.554-.192-.92-.19-.55-.309-1.024-.679-1.392a14.104 14.104 0 0 1 2.496-2.612l.331.349h1.746s.194 0 .194-.2l.194-.206s.194 0 .194-.204l.192-.204.194-.206c-.58.41-.58.206-.388 0l-.004-.002c.573-.604.609-.715 1.171-1.505A13.87 13.87 0 0 1 32 18c2.488 0 4.821.66 6.848 1.802-.177.181-.226.077-.226.267-.554.194-1.292-.194-1.846-.388a6.46 6.46 0 0 0-4.244-.194c-.554.194-1.844.388-1.292 1.552.368.584 1.29 1.166 2.214.39.368-.388.74-.97 1.29-.388.186.196.186.39.186.584-.186.58-.74.776-1.292.776-.74.194-1.48 0-2.216.194-.74.194-1.846.388-1.846 1.36 0 1.16-.37 1.356-1.294 1.55-.74 0-1.106.388-.74 1.164.186.58.74.58 1.11.388 1.476-.776 2.768-2.716 4.428-.388l.368-.194c.37-1.552.74-.58 1.108 0l.554.58c2.214-2.132 1.66.972 2.4 1.552-1.48-.388-3.14 1.164-4.43.194-2.214-1.744-3.69-.968-5.72.776-1.66 1.36-2.03 3.104-1.66 4.656.552 1.94 2.58 2.134 4.244 1.746.552-.196 1.66-.196 1.66.192-.37 1.746 1.66 2.91.92 4.848-.552 1.552.372 3.492 1.66 4.074 1.294.58 2.4-.97 2.956-2.328.184-.194 0-.58.184-.776 1.476-1.94 1.292-4.848 3.136-6.788.554-.58 2.4-2.714.92-4.46 3.508-.97 2.22 2.52 2.956 4.074.552-1.164.92-2.328 1.29-3.3.168-.53.291-.717.312-.747.035.407.062.816.062 1.232 0 7.718-6.282 14-14 14zm-8.728-6.757c-.022-.022-.027-.026 0 0z"/></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/modulegroup.svg#modulegroup-site" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="modulegroup-site" 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 64 64'%3e%3cg fill='%23fff'%3e%3cpath d='M32 16c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16zm0 30a13.926 13.926 0 0 1-9.155-3.433c.027.008.103.023.103-.129v-.188c0-.184.19-.184.19-.368.192-.74.192-1.844.192-2.58l.002-.002v-.552l-.192-.184c-.19 0-.19-.186-.38-.186s-.38-.186-.572-.186h-.382s-.19 0-.19-.184c-1.336-.74-1.906-2.03-2.288-3.504 0-.37-.19-.74-.19-1.108-.188-.186-.188-.37-.38-.556-.38-.368-.188-1.106.192-1.844v-.368c0-.186 0-.186.19-.37 0-.18 0-.18.192-.366.38-.74 1.144-1.292 1.524-1.846.19-.184.19-.184.19-.368v-.184c.19-.184.19-.554.38-.74 0-.18.192-.552.192-.736 0-.37 0-.554-.192-.92-.19-.55-.309-1.024-.679-1.392a14.104 14.104 0 0 1 2.496-2.612l.331.349h1.746s.194 0 .194-.2l.194-.206s.194 0 .194-.204l.192-.204.194-.206c-.58.41-.58.206-.388 0l-.004-.002c.573-.604.609-.715 1.171-1.505A13.87 13.87 0 0 1 32 18c2.488 0 4.821.66 6.848 1.802-.177.181-.226.077-.226.267-.554.194-1.292-.194-1.846-.388a6.46 6.46 0 0 0-4.244-.194c-.554.194-1.844.388-1.292 1.552.368.584 1.29 1.166 2.214.39.368-.388.74-.97 1.29-.388.186.196.186.39.186.584-.186.58-.74.776-1.292.776-.74.194-1.48 0-2.216.194-.74.194-1.846.388-1.846 1.36 0 1.16-.37 1.356-1.294 1.55-.74 0-1.106.388-.74 1.164.186.58.74.58 1.11.388 1.476-.776 2.768-2.716 4.428-.388l.368-.194c.37-1.552.74-.58 1.108 0l.554.58c2.214-2.132 1.66.972 2.4 1.552-1.48-.388-3.14 1.164-4.43.194-2.214-1.744-3.69-.968-5.72.776-1.66 1.36-2.03 3.104-1.66 4.656.552 1.94 2.58 2.134 4.244 1.746.552-.196 1.66-.196 1.66.192-.37 1.746 1.66 2.91.92 4.848-.552 1.552.372 3.492 1.66 4.074 1.294.58 2.4-.97 2.956-2.328.184-.194 0-.58.184-.776 1.476-1.94 1.292-4.848 3.136-6.788.554-.58 2.4-2.714.92-4.46 3.508-.97 2.22 2.52 2.956 4.074.552-1.164.92-2.328 1.29-3.3.168-.53.291-.717.312-.747.035.407.062.816.062 1.232 0 7.718-6.282 14-14 14zm-8.728-6.757c-.022-.022-.027-.026 0 0z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-modulegroup-site;
}

Download

Download