TYPO3: Turn SVG icons into sprite

[marble]

See Slack discussion

• https://typo3.slack.com/archives/C028JEPJL/p1643727390417909

The TYPO3 GmbH has provided a bunch of SVG icons

Thank you very much for that. @tomwarwick has uploaded them to a branch of our homepage repository: https://github.com/TYPO3-Documentation/DocsTypo3Org-Homepage/tree/add-icons-homepage-cards/Documentation/Icons

• Do they come with a license?
• Who deserves credit?
• Can we derive other work from them?

Turn SVG icons into icon font!?

Usually that's the way sets of icons are handled and used, like the fort-awesome package we are using.

• Has this already been done? That is: Do we already have an icon font containing those icons?
• Who knows how to do it? Somebody around?

See also

• https://mediatemple.net/blog/design-creative/creating-implementing-icon-font-tutorial/
• https://icomoon.io/app/#/select
• https://fontello.com/
• https://inkscape-manuals.readthedocs.io/en/latest/creating-custom-fonts.html

Format recommendations:

• https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/svg-sprites

About sprites

• https://css-tricks.com/css-sprites/#aa-svgs
• https://css-tricks.com/svg-sprites-use-better-icon-fonts/

[linawolf]

It was decided to use a sprite.

So I have to rephrase my question a bit: Has anybody combined those SVG already in a all-the-icons-combined-sprite.svgfile? Who would volunteer to do that? And create an html demo page showing them. Help wanted with this! Especially if you are a FRONTEND GUY please consider volunteering.

[marble]

from Slack, Alex:

have you checked https://github.com/TYPO3/TYPO3.Icons already? it is about the TYPO3 CMS icons and also considering sprites besides some other output styles, and pushing it to GitHub as well as to NPM for inclusion. would align the generation and deployment of your icon set to it as much as possible.

this seems to be the gulp task that is creating the sprite: https://github.com/TYPO3/TYPO3.Icons/blob/main/gulpfile.js#L287

[linawolf]

I think we will not turn them into a sprite. These svgs will only be loaded in few places so it is not worth the trouble