Aktualisieren Sie die Größen der Reaktionssymbole

HTML-Komponenten mit icons sind bei der Erstellung komplizierter Apps keine Seltenheit. Die Syntax zum Verwenden von Symbolen und zum Festlegen von Symbolgrößen ist Ihnen vermutlich vertraut, wenn Sie sich mit HTML und CSS auskennen.

In diesem Artikel erfahren Sie, wie Sie dies in ReactJS erreichen, indem Sie die Symbolgrößen aktualisieren.

Aktualisieren Sie die Größen der Reaktionssymbole

Die meisten React-Entwickler verwenden JSX, eine einzigartige Syntax zum Erstellen einfacher Komponentendefinitionen. Da seine Syntax HTML ähnlich ist, bevorzugen die meisten React-Ingenieure es.

Sie sind zweifellos daran gewöhnt, Symbolgrößen in HTML mithilfe von Klassen zu ändern. Das Attribut size in JSX muss auf eine Zahl gesetzt werden.

Eine einfache Definition mit dem Attribut size wäre wie folgt:

<FaBeer size={24} />

Ein JavaScript-Ausdruck, der eine ganze Zahl liefert, kann verwendet werden, um das Attribut Größe auf diesen Wert zu setzen. Es wäre hilfreich, wenn Sie die Ausdrücke in geschweifte Klammern setzen, um sicherzustellen, dass sie korrekt als JavaScript-Code erkannt werden.

Schauen wir uns eine Abbildung unten an:

import {FaBeer} from 'react-icons/fa';
const sizeValue = 14 * 5;
<FaBeer size={sizeValue} />
<FaFacebook size={sizeValue}></FaFacebook>

In dieser Abbildung kombinieren wir ein Standard-Icon Größe mit einem Integer-Wert, der dynamisch in einer Variablen gespeichert werden kann. Unser Attribut Größe entspricht nach Auswertung der Gleichung der ganzen Zahl 70.

Führen Sie nun die obige Codezeile in Replit aus, das mit React.js kompatibel ist. Es wird das folgende Ergebnis angezeigt. Sie können die Demo auch hier finden.

Ausgang:

Weitere Informationen zu Reaktionssymbolen finden Sie hier.