Nach dem Ersetzen von Symbolen habe ich Schwierigkeiten, sie auszurichten

Unterstützung
1

Ich habe diese Anleitung befolgt, um die Symbole zu ersetzen

Ich habe die Android-Symbole hierher bekommen
Material Symbols and Icons - Google Fonts

Aber wenn sie ersetzt werden, sind sie falsch ausgerichtet, wie im folgenden Beispiel

image

image
image383×133 830 Bytes

Wie kann ich sie ausrichten?

2

Der einfachste Weg, dies zu verwalten, ist die Bearbeitung der Icons selbst.

Ein Faktor, den ich sehe, ist, dass das Icon-Set, das wir standardmäßig verwenden, FontAwesome, keine Abmessungen in seinen SVG-Dateien enthält, während Google dies tut.

FontAwesomes öffnendes Tag:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">

Googles (beachten Sie die Höhe und Breite, die um die viewBox hinzugefügt wurden)

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">

Ich würde also versuchen, die Höhe/Breite von Googles Icons zu entfernen… das resultierende Sprite-Sheet sieht so aus:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="google-bars" viewBox="0 96 960 960" ><path d="M150 816q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 756h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 816H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 336h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 396H150Z"/></symbol>
</svg>

und das Ergebnis ist ausgerichtet :tada:

Screenshot 2023-03-06 at 4.05.37 PM

3

Vielen Dank für deine Hilfe, ich habe es hier gemacht und es hat funktioniert, aber es gibt einige SVG-Icons, die auch dann groß bleiben, wenn ich sie entferne, wie die untenstehenden


<symbol id="baloon">
<svg xmlns="http://www.w3.org/2000/svg"><path d="M17.45 43.35v-10.4h-.8q-5.25.05-8.725-3.375Q4.45 26.15 4.45 21q0-5.15 3.575-8.75 3.575-3.6 8.725-3.6h3.2l-3.8-3.85 2-2.05 7.4 7.4-7.4 7.4-2-2.05 3.8-3.9h-3.2q-3.9 0-6.65 2.75Q7.35 17.1 7.35 21q0 4 2.775 6.7t6.725 2.7h3.5v5.9l5.95-5.9h5q3.9 0 6.65-2.75 2.75-2.75 2.75-6.7 0-3.9-2.775-6.65-2.775-2.75-6.675-2.75H29.5v-2.9h1.75q5.15 0 8.75 3.575 3.6 3.575 3.6 8.725 0 5.15-3.575 8.75-3.575 3.6-8.725 3.6h-3.75Z"/></svg>
</symbol>

<symbol id="points">
<svg xmlns="http://www.w3.org/2000/svg"><path d="M11.3 35.15q3.05-2.1 6.125-3.25T24 30.75q3.5 0 6.575 1.15t6.225 3.25q2.1-2.65 3.1-5.35 1-2.7 1-5.8 0-7.15-4.875-12.025T24 7.1q-7.15 0-12.025 4.875T7.1 24q0 3.1 1 5.8 1 2.7 3.2 5.35Zm12.7-9.4q-2.95 0-4.975-2.025Q17 21.7 17 18.75q0-2.95 2.025-4.975Q21.05 11.75 24 11.75q2.95 0 4.975 2.025Q31 15.8 31 18.75q0 2.95-2.025 4.975Q26.95 25.75 24 25.75Zm0 18.05q-4.1 0-7.675-1.55t-6.275-4.275q-2.7-2.725-4.275-6.3Q4.2 28.1 4.2 23.95q0-4 1.575-7.6 1.575-3.6 4.275-6.325t6.275-4.275Q19.9 4.2 24.05 4.2q4 0 7.6 1.575 3.6 1.575 6.3 4.275 2.7 2.7 4.275 6.3Q43.8 19.95 43.8 24q0 4.1-1.55 7.675t-4.275 6.275q-2.725 2.7-6.325 4.275Q28.05 43.8 24 43.8Zm0-2.9q2.7 0 5.35-.85 2.65-.85 5.1-2.8-2.4-1.75-5.075-2.65-2.675-.9-5.375-.9t-5.375.9q-2.675.9-5.025 2.65 2.4 1.95 5.05 2.8 2.65.85 5.35.85Zm0-18.1q1.75 0 2.9-1.15t1.15-2.9q0-1.75-1.15-2.9T24 14.7q-1.75 0-2.9 1.15t-1.15 2.9q0 1.75 1.15 2.9T24 22.8Zm0-4.05Zm0 18.5Z"/></svg>
</symbol>

image

Muss ich noch etwas tun, um sie kleiner zu machen?

4

Mir ist jetzt aufgefallen, dass die SVG-Icons, wenn ich sie von Google Fonts herunterlade, nicht mehr mit der Viewbox angezeigt werden, wie sie früher waren. Woran liegt das? Könnte das etwas damit zu tun haben?

5

Früher war das SVG-Symbol für den Arbeitsbereich so, mit einer viewBox (ich musste nur die Höhe und Breite entfernen und alles war in Ordnung)

<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M230.693 931.614q-62.886 0-105.596-42.711-42.711-42.71-42.711-105.596 0-62.885 42.711-105.595 42.71-42.711 105.596-42.711 62.885 0 105.595 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.711 42.711-105.595 42.711Zm499.422 0q-62.693 0-105.596-42.711-42.903-42.71-42.903-105.596 0-62.885 42.903-105.595 42.903-42.711 105.596-42.711 62.693 0 105.404 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.711 42.711-105.404 42.711Zm-499.497-58.383q37.228 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.31-26.385-63.539-26.385-37.228 0-63.613 26.31-26.385 26.31-26.385 63.539 0 37.228 26.31 63.613 26.31 26.385 63.539 26.385Zm499.23 0q37.229 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.309-26.385-63.346-26.385-37.036 0-63.613 26.31-26.48 26.31-26.48 63.368 0 37.228 26.481 63.613 26.481 26.385 63.368 26.385Zm-249.04-360.847q-62.693 0-105.596-42.903-42.903-42.903-42.903-105.596 0-62.693 42.903-105.404t105.596-42.711q62.693 0 105.403 42.711 42.711 42.711 42.711 105.404t-42.711 105.596q-42.71 42.903-105.403 42.903ZM480.54 454q37.229 0 63.614-26.48 26.385-26.481 26.385-63.368 0-37.229-26.31-63.613-26.31-26.385-63.346-26.385-37.037 0-63.614 26.31-26.577 26.309-26.577 63.346 0 37.036 26.481 63.613Q443.653 454 480.54 454Zm.075-89.923Zm249.308 419.23Zm-499.23 0Z"/></svg>

jetzt wird es so heruntergeladen, ohne viewBox und es ist auf der Website riesig

<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11.55 41.8q-3.15 0-5.3-2.15t-2.15-5.3q0-3.15 2.15-5.275 2.15-2.125 5.3-2.125t5.275 2.125Q18.95 31.2 18.95 34.35q0 3.15-2.125 5.3T11.55 41.8Zm24.95 0q-3.15 0-5.275-2.15-2.125-2.15-2.125-5.3t2.125-5.275Q33.35 26.95 36.5 26.95q3.15 0 5.275 2.125Q43.9 31.2 43.9 34.35q0 3.15-2.125 5.3T36.5 41.8Zm-24.95-2.95q1.85 0 3.175-1.3 1.325-1.3 1.325-3.2 0-1.85-1.325-3.175Q13.4 29.85 11.55 29.85q-1.85 0-3.175 1.325Q7.05 32.5 7.05 34.35q0 1.85 1.3 3.175 1.3 1.325 3.2 1.325Zm24.95 0q1.85 0 3.175-1.3Q41 36.25 41 34.35q0-1.85-1.325-3.175Q38.35 29.85 36.5 29.85q-1.85 0-3.175 1.325Q32 32.5 32 34.35q0 1.85 1.325 3.175Q34.65 38.85 36.5 38.85ZM24.05 20.8q-3.15 0-5.3-2.125T16.6 13.4q0-3.15 2.15-5.275Q20.9 6 24.05 6t5.275 2.125Q31.45 10.25 31.45 13.4q0 3.15-2.125 5.275Q27.2 20.8 24.05 20.8Zm0-2.9q1.85 0 3.175-1.325Q28.55 15.25 28.55 13.4q0-1.85-1.325-3.175Q25.9 8.9 24.05 8.9q-1.85 0-3.175 1.325Q19.55 11.55 19.55 13.4q0 1.85 1.325 3.175Q22.2 17.9 24.05 17.9Zm0-4.5ZM36.5 34.35Zm-24.95 0Z"/></svg>
6

Ja, das könnte einige Probleme verursachen, seltsam, dass es entfernt wurde… Ich frage mich, ob Google etwas geändert hat? Sie können versuchen, Höhe/Breite stattdessen in die viewBox-Werte zu verschieben, das würde so aussehen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">

7

Jetzt funktioniert es, vielen Dank für Ihre Hilfe!