module-documentation
Introduced in v1.0.0
Available in TYPO3
7.6 8.6 9.5 10.4 11.5 12.4 13.x
Module Menu Preview
Usage
Icon Identifier
module-documentation
Markup
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="currentColor" d="M48 16c-.43 0-1.09-.27-1.86-.59C44.71 14.82 42.74 14 40 14c-3.87 0-6.25 1.92-8 3.41-1.75-1.48-4.13-3.41-8-3.41-2.74 0-4.7.81-6.14 1.41-.77.32-1.43.59-1.86.59-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2 1.23 0 2.32-.44 3.47-.91C20.8 42.55 22.17 42 24 42c3.17 0 4.68 1.51 6.59 3.41.03.03.06.05.09.08s.07.06.11.09c.14.11.28.2.44.26h.01c.24.1.5.15.76.15s.52-.05.76-.15h.01c.16-.07.3-.16.44-.26.04-.03.07-.06.11-.09.03-.03.07-.05.09-.08C35.32 43.5 36.82 42 40 42c1.83 0 3.2.56 4.53 1.09 1.15.47 2.24.91 3.47.91 1.1 0 2-.9 2-2V18c0-1.1-.9-2-2-2ZM18 39.37V19.64c.46-.15.92-.34 1.39-.54C20.7 18.56 22.05 18 24 18c2.52 0 4.01 1.26 5.58 2.6.14.12.28.24.42.35v18.72c-1.54-.97-3.45-1.68-6-1.68s-4.56.79-6 1.37Zm28 0c-1.44-.58-3.41-1.37-6-1.37s-4.46.71-6 1.68V20.96c.14-.12.28-.23.42-.35 1.57-1.34 3.06-2.6 5.58-2.6 1.95 0 3.3.56 4.61 1.1.47.19.93.38 1.39.54v19.73Z"/><g opacity=".4"><path fill="currentColor" d="M50 22v20c0 1.1-.9 2-2 2-1.23 0-2.32-.44-3.47-.91C43.2 42.55 41.83 42 40 42c-3.17 0-4.68 1.51-6.59 3.41-.03.03-.06.05-.09.08s-.07.06-.11.09c-.14.11-.28.2-.44.26h-.01c-.24.1-.5.15-.76.15s-.52-.05-.76-.15h-.01c-.16-.07-.3-.16-.44-.26-.04-.03-.07-.06-.11-.09-.03-.03-.07-.05-.09-.08C28.68 43.5 27.18 42 24 42c-1.83 0-3.2.56-4.53 1.09-1.15.47-2.24.91-3.47.91-1.1 0-2-.9-2-2V22c-1.1 0-2 .9-2 2v22c0 1.1.9 2 2 2h14c0 2 2 4 4 4s4-2 4-4h14c1.1 0 2-.9 2-2V24c0-1.1-.9-2-2-2Z"/></g><path fill="var(--icon-color-accent, #ff8700)" d="M42 26h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM26 26h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM42 32h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM26 32h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 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="currentColor" d="M48 16c-.43 0-1.09-.27-1.86-.59C44.71 14.82 42.74 14 40 14c-3.87 0-6.25 1.92-8 3.41-1.75-1.48-4.13-3.41-8-3.41-2.74 0-4.7.81-6.14 1.41-.77.32-1.43.59-1.86.59-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2 1.23 0 2.32-.44 3.47-.91C20.8 42.55 22.17 42 24 42c3.17 0 4.68 1.51 6.59 3.41.03.03.06.05.09.08s.07.06.11.09c.14.11.28.2.44.26h.01c.24.1.5.15.76.15s.52-.05.76-.15h.01c.16-.07.3-.16.44-.26.04-.03.07-.06.11-.09.03-.03.07-.05.09-.08C35.32 43.5 36.82 42 40 42c1.83 0 3.2.56 4.53 1.09 1.15.47 2.24.91 3.47.91 1.1 0 2-.9 2-2V18c0-1.1-.9-2-2-2ZM18 39.37V19.64c.46-.15.92-.34 1.39-.54C20.7 18.56 22.05 18 24 18c2.52 0 4.01 1.26 5.58 2.6.14.12.28.24.42.35v18.72c-1.54-.97-3.45-1.68-6-1.68s-4.56.79-6 1.37Zm28 0c-1.44-.58-3.41-1.37-6-1.37s-4.46.71-6 1.68V20.96c.14-.12.28-.23.42-.35 1.57-1.34 3.06-2.6 5.58-2.6 1.95 0 3.3.56 4.61 1.1.47.19.93.38 1.39.54v19.73Z"/><g opacity=".4"><path fill="currentColor" d="M50 22v20c0 1.1-.9 2-2 2-1.23 0-2.32-.44-3.47-.91C43.2 42.55 41.83 42 40 42c-3.17 0-4.68 1.51-6.59 3.41-.03.03-.06.05-.09.08s-.07.06-.11.09c-.14.11-.28.2-.44.26h-.01c-.24.1-.5.15-.76.15s-.52-.05-.76-.15h-.01c-.16-.07-.3-.16-.44-.26-.04-.03-.07-.06-.11-.09-.03-.03-.07-.05-.09-.08C28.68 43.5 27.18 42 24 42c-1.83 0-3.2.56-4.53 1.09-1.15.47-2.24.91-3.47.91-1.1 0-2-.9-2-2V22c-1.1 0-2 .9-2 2v22c0 1.1.9 2 2 2h14c0 2 2 4 4 4s4-2 4-4h14c1.1 0 2-.9 2-2V24c0-1.1-.9-2-2-2Z"/></g><path fill="var(--icon-color-accent, #ff8700)" d="M42 26h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM26 26h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM42 32h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM26 32h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 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?v=1769809642593#module-documentation" /></svg>
</span>
</span>
TYPO3 ViewHelper
<core:icon identifier="module-documentation" size="small" />
TYPO3 Web Component
<typo3-backend-icon identifier="module-documentation" size="small"></typo3-backend-icon>
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='%23fff' d='M48 16c-.43 0-1.09-.27-1.86-.59C44.71 14.82 42.74 14 40 14c-3.87 0-6.25 1.92-8 3.41-1.75-1.48-4.13-3.41-8-3.41-2.74 0-4.7.81-6.14 1.41-.77.32-1.43.59-1.86.59-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2 1.23 0 2.32-.44 3.47-.91C20.8 42.55 22.17 42 24 42c3.17 0 4.68 1.51 6.59 3.41.03.03.06.05.09.08s.07.06.11.09c.14.11.28.2.44.26h.01c.24.1.5.15.76.15s.52-.05.76-.15h.01c.16-.07.3-.16.44-.26.04-.03.07-.06.11-.09.03-.03.07-.05.09-.08C35.32 43.5 36.82 42 40 42c1.83 0 3.2.56 4.53 1.09 1.15.47 2.24.91 3.47.91 1.1 0 2-.9 2-2V18c0-1.1-.9-2-2-2ZM18 39.37V19.64c.46-.15.92-.34 1.39-.54C20.7 18.56 22.05 18 24 18c2.52 0 4.01 1.26 5.58 2.6.14.12.28.24.42.35v18.72c-1.54-.97-3.45-1.68-6-1.68s-4.56.79-6 1.37Zm28 0c-1.44-.58-3.41-1.37-6-1.37s-4.46.71-6 1.68V20.96c.14-.12.28-.23.42-.35 1.57-1.34 3.06-2.6 5.58-2.6 1.95 0 3.3.56 4.61 1.1.47.19.93.38 1.39.54v19.73Z'/%3e%3cg opacity='.4'%3e%3cpath fill='%23fff' d='M50 22v20c0 1.1-.9 2-2 2-1.23 0-2.32-.44-3.47-.91C43.2 42.55 41.83 42 40 42c-3.17 0-4.68 1.51-6.59 3.41-.03.03-.06.05-.09.08s-.07.06-.11.09c-.14.11-.28.2-.44.26h-.01c-.24.1-.5.15-.76.15s-.52-.05-.76-.15h-.01c-.16-.07-.3-.16-.44-.26-.04-.03-.07-.06-.11-.09-.03-.03-.07-.05-.09-.08C28.68 43.5 27.18 42 24 42c-1.83 0-3.2.56-4.53 1.09-1.15.47-2.24.91-3.47.91-1.1 0-2-.9-2-2V22c-1.1 0-2 .9-2 2v22c0 1.1.9 2 2 2h14c0 2 2 4 4 4s4-2 4-4h14c1.1 0 2-.9 2-2V24c0-1.1-.9-2-2-2Z'/%3e%3c/g%3e%3cpath fill='var(--icon-color-accent, %23ff8700)' d='M42 26h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM26 26h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM42 32h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 2-2 2ZM26 32h-4c-1.1 0-2-.9-2-2s.9-2 2-2h4c1.1 0 2 .9 2 2s-.9 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-documentation;
}
Alias
- module-cshmanual