module-reactions

Introduced in v3.4.0

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="#E91E63" d="M0 0h64v64H0z"/><path fill="#FFF" d="M43.002 37a3.99 3.99 0 0 0-3.858 3h-9.969a9.202 9.202 0 0 0-1.456-4.09l-1.492 2.487c.336.801.523 1.68.523 2.603 0 3.722-3.028 6.75-6.75 6.75s-6.75-3.028-6.75-6.75c0-3.508 2.69-6.397 6.116-6.718l1.493-2.489A9.339 9.339 0 0 0 20 31.75 9.25 9.25 0 1 0 29.194 42h9.95a3.99 3.99 0 0 0 3.858 3 4 4 0 0 0 0-8zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/><path fill="#FFF" d="M41.251 20.998a9.25 9.25 0 1 0-18.5 0c0 3.008 1.443 5.673 3.667 7.362l-5.292 8.82A3.956 3.956 0 0 0 20 37a4 4 0 1 0 4 4c0-1.093-.44-2.082-1.151-2.804l5.283-8.805a9.2 9.2 0 0 0 3.87.857c.17 0 .337-.016.505-.026l-1.397-2.54c-3.301-.438-5.859-3.265-5.859-6.684a6.758 6.758 0 0 1 6.75-6.75 6.758 6.758 0 0 1 6.75 6.75c0 1.012-.23 1.968-.63 2.83l1.399 2.544a9.197 9.197 0 0 0 1.731-5.374zM20 43c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/><path fill="#FFF" d="M43.002 31.75a9.16 9.16 0 0 0-3.549.727l-4.716-8.574a3.978 3.978 0 0 0 1.264-2.905 4 4 0 1 0-4 4c.341 0 .666-.056.982-.136l4.721 8.584A9.299 9.299 0 0 0 34.672 37h2.906a6.738 6.738 0 0 1 5.424-2.75c3.722 0 6.75 3.028 6.75 6.75s-3.028 6.75-6.75 6.75A6.738 6.738 0 0 1 37.578 45h-2.906c1.493 3.103 4.657 5.25 8.33 5.25a9.25 9.25 0 1 0 0-18.5zm-11-8.752c-1.104 0-2-.897-2-2s.896-2 2-2c1.102 0 2 .897 2 2s-.898 2-2 2z"/></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"><path fill="#E91E63" d="M0 0h64v64H0z"/><path fill="#FFF" d="M43.002 37a3.99 3.99 0 0 0-3.858 3h-9.969a9.202 9.202 0 0 0-1.456-4.09l-1.492 2.487c.336.801.523 1.68.523 2.603 0 3.722-3.028 6.75-6.75 6.75s-6.75-3.028-6.75-6.75c0-3.508 2.69-6.397 6.116-6.718l1.493-2.489A9.339 9.339 0 0 0 20 31.75 9.25 9.25 0 1 0 29.194 42h9.95a3.99 3.99 0 0 0 3.858 3 4 4 0 0 0 0-8zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/><path fill="#FFF" d="M41.251 20.998a9.25 9.25 0 1 0-18.5 0c0 3.008 1.443 5.673 3.667 7.362l-5.292 8.82A3.956 3.956 0 0 0 20 37a4 4 0 1 0 4 4c0-1.093-.44-2.082-1.151-2.804l5.283-8.805a9.2 9.2 0 0 0 3.87.857c.17 0 .337-.016.505-.026l-1.397-2.54c-3.301-.438-5.859-3.265-5.859-6.684a6.758 6.758 0 0 1 6.75-6.75 6.758 6.758 0 0 1 6.75 6.75c0 1.012-.23 1.968-.63 2.83l1.399 2.544a9.197 9.197 0 0 0 1.731-5.374zM20 43c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/><path fill="#FFF" d="M43.002 31.75a9.16 9.16 0 0 0-3.549.727l-4.716-8.574a3.978 3.978 0 0 0 1.264-2.905 4 4 0 1 0-4 4c.341 0 .666-.056.982-.136l4.721 8.584A9.299 9.299 0 0 0 34.672 37h2.906a6.738 6.738 0 0 1 5.424-2.75c3.722 0 6.75 3.028 6.75 6.75s-3.028 6.75-6.75 6.75A6.738 6.738 0 0 1 37.578 45h-2.906c1.493 3.103 4.657 5.25 8.33 5.25a9.25 9.25 0 1 0 0-18.5zm-11-8.752c-1.104 0-2-.897-2-2s.896-2 2-2c1.102 0 2 .897 2 2s-.898 2-2 2z"/></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-reactions" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-reactions" 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%3cpath fill='%23E91E63' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='M43.002 37a3.99 3.99 0 0 0-3.858 3h-9.969a9.202 9.202 0 0 0-1.456-4.09l-1.492 2.487c.336.801.523 1.68.523 2.603 0 3.722-3.028 6.75-6.75 6.75s-6.75-3.028-6.75-6.75c0-3.508 2.69-6.397 6.116-6.718l1.493-2.489A9.339 9.339 0 0 0 20 31.75 9.25 9.25 0 1 0 29.194 42h9.95a3.99 3.99 0 0 0 3.858 3 4 4 0 0 0 0-8zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z'/%3e%3cpath fill='%23FFF' d='M41.251 20.998a9.25 9.25 0 1 0-18.5 0c0 3.008 1.443 5.673 3.667 7.362l-5.292 8.82A3.956 3.956 0 0 0 20 37a4 4 0 1 0 4 4c0-1.093-.44-2.082-1.151-2.804l5.283-8.805a9.2 9.2 0 0 0 3.87.857c.17 0 .337-.016.505-.026l-1.397-2.54c-3.301-.438-5.859-3.265-5.859-6.684a6.758 6.758 0 0 1 6.75-6.75 6.758 6.758 0 0 1 6.75 6.75c0 1.012-.23 1.968-.63 2.83l1.399 2.544a9.197 9.197 0 0 0 1.731-5.374zM20 43c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z'/%3e%3cpath fill='%23FFF' d='M43.002 31.75a9.16 9.16 0 0 0-3.549.727l-4.716-8.574a3.978 3.978 0 0 0 1.264-2.905 4 4 0 1 0-4 4c.341 0 .666-.056.982-.136l4.721 8.584A9.299 9.299 0 0 0 34.672 37h2.906a6.738 6.738 0 0 1 5.424-2.75c3.722 0 6.75 3.028 6.75 6.75s-3.028 6.75-6.75 6.75A6.738 6.738 0 0 1 37.578 45h-2.906c1.493 3.103 4.657 5.25 8.33 5.25a9.25 9.25 0 1 0 0-18.5zm-11-8.752c-1.104 0-2-.897-2-2s.896-2 2-2c1.102 0 2 .897 2 2s-.898 2-2 2z'/%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-reactions;
}

Download

Download