actions-database-reload - Actions - @typo3/icons SVG icons for the TYPO3 CMS backend

Buttons

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M12.3 14.2c.5 0 .9-.2 1.3-.4l.4.6c-.5.3-1.1.5-1.7.5-1.7 0-3-1.3-3-3h-.7c-.1 0-.2-.1-.1-.2l1-1.8c.1-.1.2-.1.2 0l1 1.8c.1.1 0 .2-.1.2H10c0 1.3 1 2.3 2.3 2.3zM11 10.2l-.4-.6c.5-.4 1-.6 1.7-.6 1.7 0 3 1.3 3 3h.6c.1 0 .2.1.1.2L15 14c-.1.1-.2.1-.2 0l-1-1.8c-.1-.1 0-.2.1-.2h.6c0-1.2-1-2.3-2.3-2.3-.4 0-.9.2-1.2.5z"/><path d="M7.39 13.94C4.736 13.825 3 13.016 3 12.461v-1.568c.936.58 2.426.927 4.008 1.031.005-.342.043-.675.113-.996-2.504-.154-4.12-.93-4.12-1.467H3V7.893c1.13.702 3.067 1.068 5 1.068l.056-.001A5.01 5.01 0 0 1 9.13 7.915 14.19 14.19 0 0 1 8 7.961c-3.005 0-4.998-.902-5-1.5V4.894c1.13.702 3.067 1.068 5 1.068 1.933 0 3.87-.366 5-1.068v1.569c0 .179-.199.384-.53.585.538.051 1.055.167 1.53.375v-3.96c0-3.283-12-3.283-12 0v9c0 1.64 3.013 2.498 5.99 2.5a4.966 4.966 0 0 1-.6-1.023zM8 1.961c3.006 0 5 .902 5 1.5-.002.597-1.995 1.499-5 1.499s-4.998-.902-5-1.5c0-.597 1.994-1.5 5-1.5z"/></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"><g fill="currentColor"><path d="M12.3 14.2c.5 0 .9-.2 1.3-.4l.4.6c-.5.3-1.1.5-1.7.5-1.7 0-3-1.3-3-3h-.7c-.1 0-.2-.1-.1-.2l1-1.8c.1-.1.2-.1.2 0l1 1.8c.1.1 0 .2-.1.2H10c0 1.3 1 2.3 2.3 2.3zM11 10.2l-.4-.6c.5-.4 1-.6 1.7-.6 1.7 0 3 1.3 3 3h.6c.1 0 .2.1.1.2L15 14c-.1.1-.2.1-.2 0l-1-1.8c-.1-.1 0-.2.1-.2h.6c0-1.2-1-2.3-2.3-2.3-.4 0-.9.2-1.2.5z"/><path d="M7.39 13.94C4.736 13.825 3 13.016 3 12.461v-1.568c.936.58 2.426.927 4.008 1.031.005-.342.043-.675.113-.996-2.504-.154-4.12-.93-4.12-1.467H3V7.893c1.13.702 3.067 1.068 5 1.068l.056-.001A5.01 5.01 0 0 1 9.13 7.915 14.19 14.19 0 0 1 8 7.961c-3.005 0-4.998-.902-5-1.5V4.894c1.13.702 3.067 1.068 5 1.068 1.933 0 3.87-.366 5-1.068v1.569c0 .179-.199.384-.53.585.538.051 1.055.167 1.53.375v-3.96c0-3.283-12-3.283-12 0v9c0 1.64 3.013 2.498 5.99 2.5a4.966 4.966 0 0 1-.6-1.023zM8 1.961c3.006 0 5 .902 5 1.5-.002.597-1.995 1.499-5 1.499s-4.998-.902-5-1.5c0-.597 1.994-1.5 5-1.5z"/></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/actions.svg#actions-database-reload" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-database-reload" 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 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M12.3 14.2c.5 0 .9-.2 1.3-.4l.4.6c-.5.3-1.1.5-1.7.5-1.7 0-3-1.3-3-3h-.7c-.1 0-.2-.1-.1-.2l1-1.8c.1-.1.2-.1.2 0l1 1.8c.1.1 0 .2-.1.2H10c0 1.3 1 2.3 2.3 2.3zM11 10.2l-.4-.6c.5-.4 1-.6 1.7-.6 1.7 0 3 1.3 3 3h.6c.1 0 .2.1.1.2L15 14c-.1.1-.2.1-.2 0l-1-1.8c-.1-.1 0-.2.1-.2h.6c0-1.2-1-2.3-2.3-2.3-.4 0-.9.2-1.2.5z'/%3e%3cpath d='M7.39 13.94C4.736 13.825 3 13.016 3 12.461v-1.568c.936.58 2.426.927 4.008 1.031.005-.342.043-.675.113-.996-2.504-.154-4.12-.93-4.12-1.467H3V7.893c1.13.702 3.067 1.068 5 1.068l.056-.001A5.01 5.01 0 0 1 9.13 7.915 14.19 14.19 0 0 1 8 7.961c-3.005 0-4.998-.902-5-1.5V4.894c1.13.702 3.067 1.068 5 1.068 1.933 0 3.87-.366 5-1.068v1.569c0 .179-.199.384-.53.585.538.051 1.055.167 1.53.375v-3.96c0-3.283-12-3.283-12 0v9c0 1.64 3.013 2.498 5.99 2.5a4.966 4.966 0 0 1-.6-1.023zM8 1.961c3.006 0 5 .902 5 1.5-.002.597-1.995 1.499-5 1.499s-4.998-.902-5-1.5c0-.597 1.994-1.5 5-1.5z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-actions-database-reload;
}

Download