Rays für dein Projekt.

1.866 Icons. Als SVG, in JavaScript oder direkt in React.

@rays-icons/core

JavaScript

SVGs im Browser erzeugen oder auf dem Server rendern. Ohne Framework und ohne Laufzeitabhängigkeiten.

Paket laden ↓356 KB · .tgz

@rays-icons/react

React

Einzelne Komponenten importieren. Farbe, Größe und Strichstärke direkt über Props anpassen.

Paket laden ↓151 KB · .tgz

@rays-icons/svg

SVG

Alle 5.598 SVG-Dateien in Light, Regular und Bold. Dazu drei Sprites und das vollständige Manifest.

Paket laden ↓769 KB · .tgz

Direkt ausprobieren

React und JavaScript zeichnen dasselbe Icon. Ändere die Einstellungen und vergleiche beide.

IconStrichstärke1 pxGröße48 pxFarbe

Strichstärke in Pixeln beibehalten

React

JavaScript

Einzelimporte laden nur das gewählte Motiv. Der Code unten zeigt deine aktuellen Einstellungen.

import Search from '@rays-icons/react/icons/search';

<Search size={48} strokeWidth={1} color="#ff5c35" />

Im eigenen Projekt verwenden

Lade die gewünschten Pakete herunter und installiere sie aus deinem Downloadordner. React benötigt zusätzlich das Core-Paket. React selbst ist eine Abhängigkeit deiner Anwendung.

Im Ordner mit den heruntergeladenen Dateien ausführen. Für ein vorhandenes React-Projekt:

npm install ./rays-icons-core-0.2.96.tgz ./rays-icons-react-0.2.96.tgz

1 px Standard0,5–3 px StrichstärkeTypeScript-TypenDE / EN

Fragen zu den Icon-Paketen

Die Rays-Icon-Pakete bringen dieselben 1.866 Motive in JavaScript- und React-Projekte oder liefern die vollständige Sammlung als SVG-Dateien.

Wie installiere ich die React-Icons?

Lade das Core- und das React-Paket herunter und installiere beide lokalen .tgz-Dateien in deinem bestehenden React-Projekt. Der Installationsbefehl steht auf dieser Seite. React muss bereits als Abhängigkeit deiner Anwendung vorhanden sein.

Brauche ich React für Rays Icons?

Nein. Das JavaScript-Core-Paket funktioniert ohne Framework und ohne Laufzeitabhängigkeiten. Die SVG-Dateien kannst du auch ohne JavaScript verwenden.

Kann ich Farbe, Größe und Strichstärke im Code ändern?

Ja. Die JavaScript- und React-Pakete unterstützen diese Einstellungen. Die Live-Demo zeigt dieselben Motive und Anpassungen direkt im Browser.