actions-eye-link

Introduced in v2.0.0
Available in TYPO3 10.4 11.5

Buttons

Button Label Button Label

Button Label Button Label

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="currentColor"><path d="M14.7 5.6V3.1c0-1.2-.9-2.1-2.1-2.1h-.5c-.6 0-1.1.2-1.5.6-.4.4-.6.9-.6 1.5v2.5c0 .9.6 1.7 1.4 2v.9c-.3.1-.6.3-.8.5-.4.3-.6.9-.6 1.4v2.5c0 1.2.9 2.1 2.1 2.1h.5c1.2 0 2.1-.9 2.1-2.1v-2.5c0-.9-.6-1.7-1.4-2v-.9c.8-.2 1.4-1 1.4-1.9zm-3.8 0V3c0-.2.1-.4.2-.6.3-.3.8-.4 1.3-.4.8 0 1.4.5 1.4 1.1v2.6c0 .3-.2.6-.5.8V5.2c0-.3-.4-.6-.9-.6s-.9.3-.9.6v1.2c-.4-.2-.6-.4-.6-.8zm2.9 4.8V13c0 .6-.6 1.1-1.4 1.1S11 13.6 11 13v-2.6c0-.2.1-.4.2-.6l.2-.2v1.2c0 .3.4.6.9.6s.9-.3.9-.6V9.6c.4.2.6.4.6.8zM8 12.9V12c-3.4 0-6-2-6-4 0-1.3 1-2.6 2.6-3.3-.3.4-.3 1-.3 1.6 0 2 1.6 3.6 3.7 3.6.1-.6.4-1.2.8-1.7l.4-.2C8.4 7.4 8 6.5 8 5.6v-.9c-.8 0-1.6.7-1.6 1.5 0 .1-.1.3-.4.3s-.5-.1-.5-.3c.1-1.1 1.3-2 2.5-2.1V3C4.1 3 1 5.3 1 8s3 5 7 5v-.1z"/></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="M14.7 5.6V3.1c0-1.2-.9-2.1-2.1-2.1h-.5c-.6 0-1.1.2-1.5.6-.4.4-.6.9-.6 1.5v2.5c0 .9.6 1.7 1.4 2v.9c-.3.1-.6.3-.8.5-.4.3-.6.9-.6 1.4v2.5c0 1.2.9 2.1 2.1 2.1h.5c1.2 0 2.1-.9 2.1-2.1v-2.5c0-.9-.6-1.7-1.4-2v-.9c.8-.2 1.4-1 1.4-1.9zm-3.8 0V3c0-.2.1-.4.2-.6.3-.3.8-.4 1.3-.4.8 0 1.4.5 1.4 1.1v2.6c0 .3-.2.6-.5.8V5.2c0-.3-.4-.6-.9-.6s-.9.3-.9.6v1.2c-.4-.2-.6-.4-.6-.8zm2.9 4.8V13c0 .6-.6 1.1-1.4 1.1S11 13.6 11 13v-2.6c0-.2.1-.4.2-.6l.2-.2v1.2c0 .3.4.6.9.6s.9-.3.9-.6V9.6c.4.2.6.4.6.8zM8 12.9V12c-3.4 0-6-2-6-4 0-1.3 1-2.6 2.6-3.3-.3.4-.3 1-.3 1.6 0 2 1.6 3.6 3.7 3.6.1-.6.4-1.2.8-1.7l.4-.2C8.4 7.4 8 6.5 8 5.6v-.9c-.8 0-1.6.7-1.6 1.5 0 .1-.1.3-.4.3s-.5-.1-.5-.3c.1-1.1 1.3-2 2.5-2.1V3C4.1 3 1 5.3 1 8s3 5 7 5v-.1z"/></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-eye-link" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="actions-eye-link" 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='M14.7 5.6V3.1c0-1.2-.9-2.1-2.1-2.1h-.5c-.6 0-1.1.2-1.5.6-.4.4-.6.9-.6 1.5v2.5c0 .9.6 1.7 1.4 2v.9c-.3.1-.6.3-.8.5-.4.3-.6.9-.6 1.4v2.5c0 1.2.9 2.1 2.1 2.1h.5c1.2 0 2.1-.9 2.1-2.1v-2.5c0-.9-.6-1.7-1.4-2v-.9c.8-.2 1.4-1 1.4-1.9zm-3.8 0V3c0-.2.1-.4.2-.6.3-.3.8-.4 1.3-.4.8 0 1.4.5 1.4 1.1v2.6c0 .3-.2.6-.5.8V5.2c0-.3-.4-.6-.9-.6s-.9.3-.9.6v1.2c-.4-.2-.6-.4-.6-.8zm2.9 4.8V13c0 .6-.6 1.1-1.4 1.1S11 13.6 11 13v-2.6c0-.2.1-.4.2-.6l.2-.2v1.2c0 .3.4.6.9.6s.9-.3.9-.6V9.6c.4.2.6.4.6.8zM8 12.9V12c-3.4 0-6-2-6-4 0-1.3 1-2.6 2.6-3.3-.3.4-.3 1-.3 1.6 0 2 1.6 3.6 3.7 3.6.1-.6.4-1.2.8-1.7l.4-.2C8.4 7.4 8 6.5 8 5.6v-.9c-.8 0-1.6.7-1.6 1.5 0 .1-.1.3-.4.3s-.5-.1-.5-.3c.1-1.1 1.3-2 2.5-2.1V3C4.1 3 1 5.3 1 8s3 5 7 5v-.1z'/%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-eye-link;
}

Alias

  • actions-version-workspaces-preview-link

Download

Download