Toolipedia- Kostenlos
- Ohne Anmeldung
- Funktioniert auf jedem Gerät
Kein Tool passt zu Ihrer Suche.
- Kostenlos
- Ohne Anmeldung
- Funktioniert auf jedem Gerät
Erstellen Sie einen QR-Code für Link, WLAN, WhatsApp, Kontakt und mehr – oder lesen Sie einen aus einem Foto aus.
- Kostenlos
- Ohne Anmeldung
- Funktioniert auf jedem Gerät
Geben Sie die Details ein, um Ihren QR-Code zu sehen.
PNG für Smartphones, Chats und Websites. SVG und PDF bleiben in jeder Größe scharf und eignen sich am besten zum Drucken. Tipp: Richten Sie die Kamera Ihres Smartphones auf die Vorschau, um ihn zu testen.
3. Stil (optional): Farben, Punkte, Logo
Foto oder Screenshot auswählen oder hierher ziehen
Funktioniert mit Fotos gedruckter Codes, Screenshots und Bilddateien.
Suche nach QR-Codes…
SVG-zu-React-Komponente
Ein SVG in eine React-Komponente mit Props umwandeln, bereit zum Einfügen.
- Kostenlos
- Ohne Anmeldung
- Funktioniert auf jedem Gerät
Über SVG-zu-React-Komponente
Fügen Sie ein SVG ein und erhalten Sie eine React-Komponente, die Props wie width, height und color akzeptiert. Attribute werden zu camelCase (stroke-width wird zu strokeWidth) und class wird zu className. Ersetzen Sie feste Farben durch currentColor, damit das Symbol der umgebenden Textfarbe folgt.
So verwenden Sie SVG-zu-React-Komponente
- Füge dein SVG-Markup ein.
- Wähle Optionen wie TypeScript und Komponentenname.
- Kopiere die Komponente in dein React-Projekt.
Warum dieses Tool?
- Privat: Alles geschieht in Ihrem Browser. Nichts von Ihren Eingaben wird hochgeladen.
- Kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Nutzungslimit.
- Funktioniert auf Smartphones, Tablets und Computern: Android, iPhone, Windows, Mac und Linux. Keine Installation nötig.
- Kostenlos auf deiner eigenen Website einbettbar, mit fertigem Code zum Kopieren.
- Verfügbar in 10 Sprachen.
Auch bekannt als
Häufig gestellte Fragen
Wie ändere ich die Farbe eines SVG-Symbols in React?
Setzen Sie fill oder stroke im SVG auf currentColor und ändern Sie dann die CSS-Eigenschaft color beim übergeordneten Element oder übergeben Sie eine color-Prop.
Welche SVG-Attribute ändern sich in React?
Namen mit Bindestrichen werden zu camelCase, etwa stroke-width zu strokeWidth, und class wird zu className. Das Tool wendet das für dich an.
Wie kann ich die Icon-Größe einstellbar machen?
Die Komponente akzeptiert Props, übergib also Breite und Höhe oder lass sie 1em nutzen, um die umgebende Textgröße zu erben.
Ist SVG-zu-React-Komponente kostenlos?
Ja. SVG-zu-React-Komponente auf Toolipedia ist kostenlos nutzbar, ohne Anmeldung und ohne Wasserzeichen.
Ist die Nutzung sicher?
Ja. Alles wird in Ihrem Browser berechnet, und nichts von Ihren Eingaben wird an unseren Server gesendet.
Funktioniert es auf meinem Smartphone?
Ja. Es funktioniert in jedem modernen Browser auf Android und iPhone sowie auf Tablets und Computern. Sie müssen nichts installieren.
Brauche ich ein Konto?
Nein. Öffnen Sie einfach die Seite und nutzen Sie das Tool. Keine Anmeldung, keine E-Mail-Adresse nötig.
Kann ich SVG-zu-React-Komponente auf meiner eigenen Website einsetzen?
Ja. Nutze unter dem Tool die Schaltfläche „Auf deiner Website einbetten“, um ein kurzes Stück Code zu kopieren und in deine Seite einzufügen. Es ist kostenlos, braucht kein Konto, und das Tool funktioniert weiter innerhalb deiner Seite.