module-install-settings

Introduced in v1.1.1
Available in TYPO3 8.6 9.5 10.4 11.5

Usage

Markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="#1D588E" d="M0 0h64v64H0z"/><path fill="#FFF" d="m49.535 29.295-5.457-1.558a12.594 12.594 0 0 0-.517-1.27l2.751-4.953a.642.642 0 0 0-.108-.766l-2.952-2.952a.643.643 0 0 0-.766-.108l-4.953 2.751a12.69 12.69 0 0 0-1.27-.517l-1.558-5.457a.645.645 0 0 0-.62-.465h-4.171c-.288 0-.54.19-.617.465l-1.561 5.459c-.435.154-.859.319-1.27.517l-4.953-2.751a.64.64 0 0 0-.766.108l-2.949 2.949a.64.64 0 0 0-.108.766l2.751 4.953a12.69 12.69 0 0 0-.517 1.27l-5.459 1.558a.647.647 0 0 0-.465.621v4.173c0 .288.19.54.465.617l5.457 1.558c.154.435.319.859.517 1.27l-2.751 4.953a.642.642 0 0 0 .108.766l2.952 2.952a.643.643 0 0 0 .766.108l4.953-2.751c.411.198.836.363 1.27.517l1.558 5.457c.08.275.332.465.62.465h4.173c.288 0 .54-.19.617-.465l1.558-5.457c.435-.154.859-.319 1.27-.517l4.953 2.751a.642.642 0 0 0 .766-.108l2.952-2.952a.643.643 0 0 0 .108-.766l-2.751-4.953c.198-.411.363-.836.517-1.27l5.457-1.558a.645.645 0 0 0 .465-.62v-4.171a.645.645 0 0 0-.465-.619zM32 39.714c-4.261 0-7.714-3.453-7.714-7.714s3.453-7.714 7.714-7.714 7.714 3.453 7.714 7.714-3.453 7.714-7.714 7.714z"/></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="#1D588E" d="M0 0h64v64H0z"/><path fill="#FFF" d="m49.535 29.295-5.457-1.558a12.594 12.594 0 0 0-.517-1.27l2.751-4.953a.642.642 0 0 0-.108-.766l-2.952-2.952a.643.643 0 0 0-.766-.108l-4.953 2.751a12.69 12.69 0 0 0-1.27-.517l-1.558-5.457a.645.645 0 0 0-.62-.465h-4.171c-.288 0-.54.19-.617.465l-1.561 5.459c-.435.154-.859.319-1.27.517l-4.953-2.751a.64.64 0 0 0-.766.108l-2.949 2.949a.64.64 0 0 0-.108.766l2.751 4.953a12.69 12.69 0 0 0-.517 1.27l-5.459 1.558a.647.647 0 0 0-.465.621v4.173c0 .288.19.54.465.617l5.457 1.558c.154.435.319.859.517 1.27l-2.751 4.953a.642.642 0 0 0 .108.766l2.952 2.952a.643.643 0 0 0 .766.108l4.953-2.751c.411.198.836.363 1.27.517l1.558 5.457c.08.275.332.465.62.465h4.173c.288 0 .54-.19.617-.465l1.558-5.457c.435-.154.859-.319 1.27-.517l4.953 2.751a.642.642 0 0 0 .766-.108l2.952-2.952a.643.643 0 0 0 .108-.766l-2.751-4.953c.198-.411.363-.836.517-1.27l5.457-1.558a.645.645 0 0 0 .465-.62v-4.171a.645.645 0 0 0-.465-.619zM32 39.714c-4.261 0-7.714-3.453-7.714-7.714s3.453-7.714 7.714-7.714 7.714 3.453 7.714 7.714-3.453 7.714-7.714 7.714z"/></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#module-install-settings" /></svg>
    </span>
</span>

TYPO3 ViewHelper

<core:icon identifier="module-install-settings" 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 64 64'%3e%3cpath fill='%231D588E' d='M0 0h64v64H0z'/%3e%3cpath fill='%23FFF' d='m49.535 29.295-5.457-1.558a12.594 12.594 0 0 0-.517-1.27l2.751-4.953a.642.642 0 0 0-.108-.766l-2.952-2.952a.643.643 0 0 0-.766-.108l-4.953 2.751a12.69 12.69 0 0 0-1.27-.517l-1.558-5.457a.645.645 0 0 0-.62-.465h-4.171c-.288 0-.54.19-.617.465l-1.561 5.459c-.435.154-.859.319-1.27.517l-4.953-2.751a.64.64 0 0 0-.766.108l-2.949 2.949a.64.64 0 0 0-.108.766l2.751 4.953a12.69 12.69 0 0 0-.517 1.27l-5.459 1.558a.647.647 0 0 0-.465.621v4.173c0 .288.19.54.465.617l5.457 1.558c.154.435.319.859.517 1.27l-2.751 4.953a.642.642 0 0 0 .108.766l2.952 2.952a.643.643 0 0 0 .766.108l4.953-2.751c.411.198.836.363 1.27.517l1.558 5.457c.08.275.332.465.62.465h4.173c.288 0 .54-.19.617-.465l1.558-5.457c.435-.154.859-.319 1.27-.517l4.953 2.751a.642.642 0 0 0 .766-.108l2.952-2.952a.643.643 0 0 0 .108-.766l-2.751-4.953c.198-.411.363-.836.517-1.27l5.457-1.558a.645.645 0 0 0 .465-.62v-4.171a.645.645 0 0 0-.465-.619zM32 39.714c-4.261 0-7.714-3.453-7.714-7.714s3.453-7.714 7.714-7.714 7.714 3.453 7.714 7.714-3.453 7.714-7.714 7.714z'/%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-install-settings;
}

Download

Download