Skip to content

Commit c225418

Browse files
committed
new svg icons for flags
1 parent f52ba84 commit c225418

4 files changed

Lines changed: 49 additions & 28 deletions

File tree

mycore.org/content/de/blog/2025-11-05_svg-sprites.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,17 @@ Das *XSLT-Stylesheet* führt mit dieser Datei folgende **Transformation** durch:
5252

5353
### Ausführen der Transformation
5454
Das Stylesheet ist XSLT 1.0 konform, so lässt sich die Transformation mit einem gängigen Browser durchführen. Allerdings benötigt man inzwischen einen Webserver (z.B [Apache HTTPD](https://httpd.apache.org/), [Tomcat](https://tomcat.apache.org/) oder [jwebserver](https://dev.java/learn/jvm/tool/jwebserver/)), da aktuelle Browser es lokalen HTML-Dateien nicht mehr gestatten, zusätzliche Daten von externen Quellen nachzuladen.
55-
Man startet beispielsweise *jwebserver* in dem Ordner, in dem sich die Beispiel-XML-Datei und die XSLT-Datei befinden, öffnet im Firefox-Browser die Seite [http://127.0.0.1:8000/sample_svg-sprite-icons.xml](http://127.0.0.1:8000/sample_svg-sprite-icons.xml) und speichert diese als SVG-Datei ab (z.B. als [sample-svg-sprite-icons.svg]({{<relURL "/downloads/snippets/blog/svg-sprite-icons/sample-svg-sprite-icons.svg">}})). Alternativ lässt sich die Transformation auch an der Kommandozeile mit einem Tool wie [xsltproc](https://manpages.ubuntu.com/manpages/noble/en/man1/xsltproc.1.html) durchführen.
55+
Man startet beispielsweise *jwebserver* in dem Ordner, in dem sich die Beispiel-XML-Datei und die XSLT-Datei befinden, öffnet im Firefox-Browser die Seite [http://127.0.0.1:8000/sample_svg-sprite-icons.xml](http://127.0.0.1:8000/sample_svg-sprite-icons.xml) und speichert diese als SVG-Datei ab (z.B. als [sample_svg-sprite-icons.svg]({{<relURL "/downloads/snippets/blog/svg-sprite-icons/sample_svg-sprite-icons.svg">}})). Alternativ lässt sich die Transformation auch an der Kommandozeile mit einem Tool wie [xsltproc](https://manpages.ubuntu.com/manpages/noble/en/man1/xsltproc.1.html) durchführen.
5656

5757
### Benutzung der SVG-Datei
5858
Als **Ergebnis** wird folgende SVG-Datei erzeugt:
59-
<img src="{{<relURL "/downloads/snippets/blog/svg-sprite-icons/sample-svg-sprite-icons.svg">}}" alt="SVG-Datei mit allen Symbolen" style="display:block;width:400px" class="border border-secondary" />
59+
<img src="{{<relURL "/downloads/snippets/blog/svg-sprite-icons/sample_svg-sprite-icons.svg">}}" alt="SVG-Datei mit allen Symbolen" style="display:block;width:400px" class="border border-secondary" />
6060

6161
Die **Verwendung** im HTML-Code einer Webseite erfolgt beispielhaft auf folgende Weise:
6262

6363
<button style="float:right;margin-left:3em;" type="button" class="btn btn-outline-danger">
6464
<svg class="icon" style="width: 1em; height:1em; vertical:align:-0.125em;">
65-
<use xlink:href="{{<relURL "/downloads/snippets/blog/svg-sprite-icons/sample-svg-sprite-icons.svg">}}#fa-solid_fa-bug" />
65+
<use xlink:href="{{<relURL "/downloads/snippets/blog/svg-sprite-icons/sample_svg-sprite-icons.svg">}}#fa-solid_fa-bug" />
6666
</svg> Käfer</button>
6767

6868
``` html
@@ -172,6 +172,12 @@ you can access and customize any SVG graphic elements inside the icon through st
172172
[GitHub](https://github.com/iconoir-icons/iconoir/)
173173
* Beispiel-XML: `<i class="iconoir-regular iconoir-jellyfish"></i>`
174174

175+
#### Flag-Icons
176+
*"A curated collection of all country flags in SVG"* (ca. 270 Symbole)
177+
* Ressourcen: [Homepage](https://flagicons.lipis.dev/),
178+
[GitHub](https://github.com/lipis/flag-icons/)
179+
* Beispiel-XML: `<i class="flag-icons flag-icons-ki"></i>`
180+
175181
#### Academicons
176182
*"Academicons is a specialist icon font for academics. It contains icons for websites and organisations related to academia that are often missing from mainstream font packages. It can be used by itself, but its primary purpose is to be used as a supplementary package alongside a larger icon set."* (ca. 150 Symbole)
177183
* Ressourcen: [Homepage](https://jpswalsh.github.io/academicons/),

0 commit comments

Comments
 (0)