apps-pagetree-page-shortcut-external-root

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><circle cx="8" cy="8" r="8" fill="#59F"/><path fill="#AAD400" d="M14.973 7.378a7.034 7.034 0 0 0-3.545-5.48c-.092.097-.117.04-.117.137-.277.097-.646-.097-.923-.194a3.23 3.23 0 0 0-2.122-.097c-.277.097-.922.194-.646.776.184.292.645.583 1.107.195.184-.194.37-.485.645-.194.093.098.093.195.093.292-.093.29-.37.388-.646.388-.37.097-.74 0-1.108.097-.37.097-.923.194-.923.68 0 .58-.185.678-.647.775-.37 0-.553.194-.37.582.093.29.37.29.555.194.738-.388 1.384-1.358 2.214-.194l.184-.097c.185-.776.37-.29.554 0l.277.29c1.107-1.066.83.486 1.2.776-.74-.194-1.57.582-2.215.097-1.107-.872-1.845-.484-2.86.388-.83.68-1.015 1.552-.83 2.328.276.97 1.29 1.067 2.122.873.276-.098.83-.098.83.096-.185.873.83 1.455.46 2.424-.276.776.186 1.746.83 2.037.647.29 1.2-.485 1.478-1.164.092-.097 0-.29.092-.388.738-.97.646-2.424 1.568-3.394.277-.29 1.2-1.357.46-2.23 1.754-.485 1.11 1.26 1.478 2.037.276-.582.46-1.164.645-1.65.092-.29.16-.38.16-.38zM4.948 2.21c.29-.306.303-.356.594-.765a6.738 6.738 0 0 0-1.923 1.099l.168.177h.873s.097 0 .097-.1l.097-.103s.097 0 .097-.102l.096-.102.097-.103c-.29.205-.29.103-.194 0 0 .103 0 .103 0 0 0 .103 0 0 0 0l-.002-.001zM3.666 11.65s-.096-.092 0 0c-.096-.092-.096-.092 0 0v-.276l-.096-.092c-.095 0-.095-.093-.19-.093s-.19-.093-.286-.093h-.191s-.095 0-.095-.092c-.668-.37-.953-1.015-1.144-1.752 0-.185-.095-.37-.095-.554-.094-.093-.094-.185-.19-.278-.19-.184-.094-.553.096-.922v-.184c0-.093 0-.093.095-.185 0-.09 0-.09.096-.183.19-.37.572-.646.762-.923.095-.092.095-.092.095-.184v-.092c.095-.092.095-.277.19-.37 0-.09.096-.276.096-.368 0-.185 0-.277-.096-.46-.096-.278-.154-.518-.344-.703-.858 1.2-1.37 2.546-1.37 4.113 0 2.123.903 4.006 2.414 5.324 0 0 .061.026.061-.064v-.094c0-.092.095-.092.095-.184.096-.37.096-.922.097-1.291z"/><path fill="#212121" d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 1C4.14 1 1 4.14 1 8c0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7z" opacity=".2"/></g><g><path fill="#666" d="M13.05 5c-.705 0-1.369.276-1.869.776L9.823 7.134a2.628 2.628 0 0 0-.77 1.913h-.049c-.705 0-1.369.276-1.869.776L5.776 11.18A2.632 2.632 0 0 0 5 13.05c0 .705.276 1.369.777 1.869l.305.305c.5.5 1.164.776 1.869.776.705 0 1.369-.276 1.869-.776l1.358-1.358a2.63 2.63 0 0 0 .77-1.918l.059.001c.702 0 1.362-.274 1.859-.771l1.358-1.358a2.645 2.645 0 0 0 0-3.738l-.305-.305A2.626 2.626 0 0 0 13.05 5z"/><path fill="#DDD" d="M13.05 6c-.42 0-.84.161-1.162.483L10.53 7.841a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305A1.638 1.638 0 0 0 13.05 6zm-.125.766c.298-.015.639.123.913.396.437.437.527 1.051.201 1.377l-1.453 1.453c-.326.326-.941.237-1.378-.2s-.526-1.051-.2-1.378l1.453-1.453a.685.685 0 0 1 .464-.195zM9.003 10.047c-.42 0-.84.161-1.162.483l-1.358 1.358a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305a1.64 1.64 0 0 0-1.162-.483zm-.126.766c.298-.015.64.123.914.396.437.437.526 1.051.2 1.378L8.538 14.04c-.326.326-.94.236-1.377-.201-.437-.437-.527-1.051-.201-1.377l1.453-1.453a.686.686 0 0 1 .464-.196z"/><path fill="#212121" d="m10.529 10.166.305.305c.234.234.521.381.821.444l.899-.899c-.333.293-.922.2-1.347-.224.217-.141-.782.138-.678.374zM10.169 10.532l.305.305c.234.234.381.521.444.821l-.899.899c.293-.333.2-.923-.224-1.347-.142.217.136-.782.374-.678z" opacity=".3"/><path fill="#FFF" d="m8.452 11.496 3.049-3.049c.175-.175.553-.081.843.209.29.29.384.668.209.843l-3.049 3.049c-.175.175-.553.081-.843-.209-.29-.29-.384-.668-.209-.843z"/></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><circle cx="8" cy="8" r="8" fill="#59F"/><path fill="#AAD400" d="M14.973 7.378a7.034 7.034 0 0 0-3.545-5.48c-.092.097-.117.04-.117.137-.277.097-.646-.097-.923-.194a3.23 3.23 0 0 0-2.122-.097c-.277.097-.922.194-.646.776.184.292.645.583 1.107.195.184-.194.37-.485.645-.194.093.098.093.195.093.292-.093.29-.37.388-.646.388-.37.097-.74 0-1.108.097-.37.097-.923.194-.923.68 0 .58-.185.678-.647.775-.37 0-.553.194-.37.582.093.29.37.29.555.194.738-.388 1.384-1.358 2.214-.194l.184-.097c.185-.776.37-.29.554 0l.277.29c1.107-1.066.83.486 1.2.776-.74-.194-1.57.582-2.215.097-1.107-.872-1.845-.484-2.86.388-.83.68-1.015 1.552-.83 2.328.276.97 1.29 1.067 2.122.873.276-.098.83-.098.83.096-.185.873.83 1.455.46 2.424-.276.776.186 1.746.83 2.037.647.29 1.2-.485 1.478-1.164.092-.097 0-.29.092-.388.738-.97.646-2.424 1.568-3.394.277-.29 1.2-1.357.46-2.23 1.754-.485 1.11 1.26 1.478 2.037.276-.582.46-1.164.645-1.65.092-.29.16-.38.16-.38zM4.948 2.21c.29-.306.303-.356.594-.765a6.738 6.738 0 0 0-1.923 1.099l.168.177h.873s.097 0 .097-.1l.097-.103s.097 0 .097-.102l.096-.102.097-.103c-.29.205-.29.103-.194 0 0 .103 0 .103 0 0 0 .103 0 0 0 0l-.002-.001zM3.666 11.65s-.096-.092 0 0c-.096-.092-.096-.092 0 0v-.276l-.096-.092c-.095 0-.095-.093-.19-.093s-.19-.093-.286-.093h-.191s-.095 0-.095-.092c-.668-.37-.953-1.015-1.144-1.752 0-.185-.095-.37-.095-.554-.094-.093-.094-.185-.19-.278-.19-.184-.094-.553.096-.922v-.184c0-.093 0-.093.095-.185 0-.09 0-.09.096-.183.19-.37.572-.646.762-.923.095-.092.095-.092.095-.184v-.092c.095-.092.095-.277.19-.37 0-.09.096-.276.096-.368 0-.185 0-.277-.096-.46-.096-.278-.154-.518-.344-.703-.858 1.2-1.37 2.546-1.37 4.113 0 2.123.903 4.006 2.414 5.324 0 0 .061.026.061-.064v-.094c0-.092.095-.092.095-.184.096-.37.096-.922.097-1.291z"/><path fill="#212121" d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 1C4.14 1 1 4.14 1 8c0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7z" opacity=".2"/></g><g><path fill="#666" d="M13.05 5c-.705 0-1.369.276-1.869.776L9.823 7.134a2.628 2.628 0 0 0-.77 1.913h-.049c-.705 0-1.369.276-1.869.776L5.776 11.18A2.632 2.632 0 0 0 5 13.05c0 .705.276 1.369.777 1.869l.305.305c.5.5 1.164.776 1.869.776.705 0 1.369-.276 1.869-.776l1.358-1.358a2.63 2.63 0 0 0 .77-1.918l.059.001c.702 0 1.362-.274 1.859-.771l1.358-1.358a2.645 2.645 0 0 0 0-3.738l-.305-.305A2.626 2.626 0 0 0 13.05 5z"/><path fill="#DDD" d="M13.05 6c-.42 0-.84.161-1.162.483L10.53 7.841a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305A1.638 1.638 0 0 0 13.05 6zm-.125.766c.298-.015.639.123.913.396.437.437.527 1.051.201 1.377l-1.453 1.453c-.326.326-.941.237-1.378-.2s-.526-1.051-.2-1.378l1.453-1.453a.685.685 0 0 1 .464-.195zM9.003 10.047c-.42 0-.84.161-1.162.483l-1.358 1.358a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305a1.64 1.64 0 0 0-1.162-.483zm-.126.766c.298-.015.64.123.914.396.437.437.526 1.051.2 1.378L8.538 14.04c-.326.326-.94.236-1.377-.201-.437-.437-.527-1.051-.201-1.377l1.453-1.453a.686.686 0 0 1 .464-.196z"/><path fill="#212121" d="m10.529 10.166.305.305c.234.234.521.381.821.444l.899-.899c-.333.293-.922.2-1.347-.224.217-.141-.782.138-.678.374zM10.169 10.532l.305.305c.234.234.381.521.444.821l-.899.899c.293-.333.2-.923-.224-1.347-.142.217.136-.782.374-.678z" opacity=".3"/><path fill="#FFF" d="m8.452 11.496 3.049-3.049c.175-.175.553-.081.843.209.29.29.384.668.209.843l-3.049 3.049c-.175.175-.553.081-.843-.209-.29-.29-.384-.668-.209-.843z"/></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/apps.svg#apps-pagetree-page-shortcut-external-root" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="apps-pagetree-page-shortcut-external-root" 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%3ccircle cx='8' cy='8' r='8' fill='%2359F'/%3e%3cpath fill='%23AAD400' d='M14.973 7.378a7.034 7.034 0 0 0-3.545-5.48c-.092.097-.117.04-.117.137-.277.097-.646-.097-.923-.194a3.23 3.23 0 0 0-2.122-.097c-.277.097-.922.194-.646.776.184.292.645.583 1.107.195.184-.194.37-.485.645-.194.093.098.093.195.093.292-.093.29-.37.388-.646.388-.37.097-.74 0-1.108.097-.37.097-.923.194-.923.68 0 .58-.185.678-.647.775-.37 0-.553.194-.37.582.093.29.37.29.555.194.738-.388 1.384-1.358 2.214-.194l.184-.097c.185-.776.37-.29.554 0l.277.29c1.107-1.066.83.486 1.2.776-.74-.194-1.57.582-2.215.097-1.107-.872-1.845-.484-2.86.388-.83.68-1.015 1.552-.83 2.328.276.97 1.29 1.067 2.122.873.276-.098.83-.098.83.096-.185.873.83 1.455.46 2.424-.276.776.186 1.746.83 2.037.647.29 1.2-.485 1.478-1.164.092-.097 0-.29.092-.388.738-.97.646-2.424 1.568-3.394.277-.29 1.2-1.357.46-2.23 1.754-.485 1.11 1.26 1.478 2.037.276-.582.46-1.164.645-1.65.092-.29.16-.38.16-.38zM4.948 2.21c.29-.306.303-.356.594-.765a6.738 6.738 0 0 0-1.923 1.099l.168.177h.873s.097 0 .097-.1l.097-.103s.097 0 .097-.102l.096-.102.097-.103c-.29.205-.29.103-.194 0 0 .103 0 .103 0 0 0 .103 0 0 0 0l-.002-.001zM3.666 11.65s-.096-.092 0 0c-.096-.092-.096-.092 0 0v-.276l-.096-.092c-.095 0-.095-.093-.19-.093s-.19-.093-.286-.093h-.191s-.095 0-.095-.092c-.668-.37-.953-1.015-1.144-1.752 0-.185-.095-.37-.095-.554-.094-.093-.094-.185-.19-.278-.19-.184-.094-.553.096-.922v-.184c0-.093 0-.093.095-.185 0-.09 0-.09.096-.183.19-.37.572-.646.762-.923.095-.092.095-.092.095-.184v-.092c.095-.092.095-.277.19-.37 0-.09.096-.276.096-.368 0-.185 0-.277-.096-.46-.096-.278-.154-.518-.344-.703-.858 1.2-1.37 2.546-1.37 4.113 0 2.123.903 4.006 2.414 5.324 0 0 .061.026.061-.064v-.094c0-.092.095-.092.095-.184.096-.37.096-.922.097-1.291z'/%3e%3cpath fill='%23212121' d='M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 1C4.14 1 1 4.14 1 8c0 3.859 3.14 7 7 7 3.859 0 7-3.141 7-7 0-3.86-3.141-7-7-7z' opacity='.2'/%3e%3c/g%3e%3cg%3e%3cpath fill='%23666' d='M13.05 5c-.705 0-1.369.276-1.869.776L9.823 7.134a2.628 2.628 0 0 0-.77 1.913h-.049c-.705 0-1.369.276-1.869.776L5.776 11.18A2.632 2.632 0 0 0 5 13.05c0 .705.276 1.369.777 1.869l.305.305c.5.5 1.164.776 1.869.776.705 0 1.369-.276 1.869-.776l1.358-1.358a2.63 2.63 0 0 0 .77-1.918l.059.001c.702 0 1.362-.274 1.859-.771l1.358-1.358a2.645 2.645 0 0 0 0-3.738l-.305-.305A2.626 2.626 0 0 0 13.05 5z'/%3e%3cpath fill='%23DDD' d='M13.05 6c-.42 0-.84.161-1.162.483L10.53 7.841a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305A1.638 1.638 0 0 0 13.05 6zm-.125.766c.298-.015.639.123.913.396.437.437.527 1.051.201 1.377l-1.453 1.453c-.326.326-.941.237-1.378-.2s-.526-1.051-.2-1.378l1.453-1.453a.685.685 0 0 1 .464-.195zM9.003 10.047c-.42 0-.84.161-1.162.483l-1.358 1.358a1.64 1.64 0 0 0 0 2.324l.305.305a1.64 1.64 0 0 0 2.324 0l1.358-1.358a1.64 1.64 0 0 0 0-2.324l-.305-.305a1.64 1.64 0 0 0-1.162-.483zm-.126.766c.298-.015.64.123.914.396.437.437.526 1.051.2 1.378L8.538 14.04c-.326.326-.94.236-1.377-.201-.437-.437-.527-1.051-.201-1.377l1.453-1.453a.686.686 0 0 1 .464-.196z'/%3e%3cpath fill='%23212121' d='m10.529 10.166.305.305c.234.234.521.381.821.444l.899-.899c-.333.293-.922.2-1.347-.224.217-.141-.782.138-.678.374zM10.169 10.532l.305.305c.234.234.381.521.444.821l-.899.899c.293-.333.2-.923-.224-1.347-.142.217.136-.782.374-.678z' opacity='.3'/%3e%3cpath fill='%23FFF' d='m8.452 11.496 3.049-3.049c.175-.175.553-.081.843.209.29.29.384.668.209.843l-3.049 3.049c-.175.175-.553.081-.843-.209-.29-.29-.384-.668-.209-.843z'/%3e%3c/g%3e%3c/svg%3e");
}

Sass Background Variable

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

.myclass {
    background-size: 1em 1em;
    background-image: $icon-apps-pagetree-page-shortcut-external-root;
}

Download

Download