apps-pagetree-page-content-from-page-root

Introduced in v1.0.0
Available in TYPO3 7.6 8.6 9.5 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"><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"/><path fill="#FFF" d="M13 6H3v6.894A6.976 6.976 0 0 0 8 15c1.96 0 3.729-.808 5-2.106V6z"/><path fill="#666" d="M13 6H3v6.894c.306.312.641.595 1 .846V7h8v6.74a7.027 7.027 0 0 0 1-.846V6z"/><path fill="#333" d="M5 8h6v2H5z"/><path fill="#B9B9B9" d="M5 11h6v1H5zM5 13h6v1H5z"/></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"><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"/><path fill="#FFF" d="M13 6H3v6.894A6.976 6.976 0 0 0 8 15c1.96 0 3.729-.808 5-2.106V6z"/><path fill="#666" d="M13 6H3v6.894c.306.312.641.595 1 .846V7h8v6.74a7.027 7.027 0 0 0 1-.846V6z"/><path fill="#333" d="M5 8h6v2H5z"/><path fill="#B9B9B9" d="M5 11h6v1H5zM5 13h6v1H5z"/></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-content-from-page-root" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="apps-pagetree-page-content-from-page-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' viewBox='0 0 16 16'%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%3cpath fill='%23FFF' d='M13 6H3v6.894A6.976 6.976 0 0 0 8 15c1.96 0 3.729-.808 5-2.106V6z'/%3e%3cpath fill='%23666' d='M13 6H3v6.894c.306.312.641.595 1 .846V7h8v6.74a7.027 7.027 0 0 0 1-.846V6z'/%3e%3cpath fill='%23333' d='M5 8h6v2H5z'/%3e%3cpath fill='%23B9B9B9' d='M5 11h6v1H5zM5 13h6v1H5z'/%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-content-from-page-root;
}

Download

Download