devicon
v2.16.0
Demo · Anforderungssymbol · beitragen
<!-- in your header -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css " >
<!-- in your body -->
< i class =" devicon-devicon-plain " > </ i > develop gegen master Devicon zielt darauf ab, alle Logos zu sammeln, die Entwicklungssprachen und Tools darstellen. Jedes Symbol ist in mehreren Versionen erhältlich: Schriftart/SVG, Original/Ebene/Zeile, farbig/nicht gefärbt, Wordmark/No Wordmark. Devicon hat mehr als 150 Ikonen. Und es wächst!
In der Devicon.json oder auf unserer Website finden Sie eine vollständige und aktuelle Referenz aller verfügbaren Symbole.
Vielen Dank an alle unsere Mitwirkenden und die iComoon -App. Devicon wäre ohne dich nicht möglich.
Alle Produktnamen, Logos und Marken sind Eigentum ihrer jeweiligen Eigentümer. Alle auf dieser Website verwendeten Unternehmens-, Produkt- und Dienstnamen dienen nur zu Identifikationszwecken. Die Verwendung dieser Namen, Logos und Marken impliziert keine Bestätigung. Die Verwendung dieser Logos sollte gemäß der Markenrichtlinie des Unternehmens/der Marke/Service erfolgen. Für ein superschnelles Setup überprüfen Sie Devicon.dev.
Sie können entweder die RAW -SVG -Symbole, unsere Devicon -Schrift (auch über CDN erhältlich) verwenden oder selbst Devicon erstellen.
devicon -Schriftart (empfohlen) Sie können Devicon als Abhängigkeit von Ihrem Projekt entweder mit npm oder yarn installieren:
npm install --save devicon
yarn add deviconWenn Sie keinen Paketmanager verwenden möchten, können Sie auch Devicon.min.css neben den Schriftartdateien in Ihr Projekt herunterladen und einbeziehen. In Devicon.dev finden Sie Details zum Hinzufügen von Devicon zu Ihrem Projekt über ein CDN.
Nach dem Einrichten müssen Sie nur das Stylesheet in Ihren Header aufnehmen, um loszulegen:
< link rel =" stylesheet " href =" devicon.min.css " > Verwenden Sie Symbole mit <i> -Tag:
<!-- for devicon plain version -->
< i class =" devicon-devicon-plain " > </ i >
<!-- for devicon plain version with wordmark -->
< i class =" devicon-devicon-plain-wordmark " > </ i >
<!-- for devicon plain version colored with devicon main color -->
< i class =" devicon-devicon-plain colored " > </ i >
<!-- for devicon plain version with wordmark colored with devicon main color -->
< i class =" devicon-devicon-plain-wordmark colored " > </ i > Eine alternative Möglichkeit, devicon zu verwenden, besteht darin, den RAW -SVG -Code in Ihr Projekt zu kopieren/einfügen.
<!-- for devicon plain version -->
< svg id =" Devicon " class =' devicon-devicon-plain ' xmlns =" http://www.w3.org/2000/svg " viewBox =" 0 0 128 128 " > < path id =" plain " fill =" #60be86 " d =" M64,7.83H4.77L14.95,95.13l49,25,.06,0,49.07-25L123.23,7.83Zm42.77,54.86c0,.88,0,1.67-.77,2L73.25,80.44l-2.42,1.13-.27-3.15V72.23l.24-1.57,1.09-.47L95.07,59.81l-21.54-9.6L64.35,68.34,58.9,78.87l-1.22,2.27-2.05-.9L22,64.71a2.42,2.42,0,0,1-1.45-2V56.91a2.39,2.39,0,0,1,1.42-2l34-15.73,3.21-1.44v9.66l.24,1.34-1.56.7L34.45,59.79,56.3,69.42l8.05-16,6.21-12.65,1.13-2.28,1.81.91L106,54.89c.73.35.76,1.14.76,2Z " /> </ svg >Fügen Sie in Ihrem Stylesheet die folgenden CSS -Regeln hinzu:
. devicon-devicon-plain {
max-width : 2 em ;
}
/* if you want to change the original color */
. devicon-devicon-plain path {
fill : # 4691f6 ;
}img -Tag verwenden und auf ein SVG direkt aus dem Repository verweisen: < img src =' https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg ' > Wenn Sie ein Symbol anfordern möchten, können Sie bitte ein Problem erstellen. Weitere Informationen finden Sie in unserem Wiki.
Wir sind mit jedem Beitrag zufrieden, egal ob es sich um neue Ikonen, Features oder Betreuer handelt. Bitte sehen Sie sich unser Wiki an, um zu sehen, wie Sie zu diesem Projekt beitragen können.
Wir haben eine Discord -Community für Devicons. Sie können leicht Symbole anfordern, diskutieren und eine gute Zeit haben, mit den Community -Mitgliedern zu sprechen! Treten Sie dem offiziellen Discord -Server hier bei!
develop gegen master Alle offiziellen Veröffentlichungen sind im master . Alle Aktualisierungen zwischen (Symbole, Funktionen usw.) werden in der develop gehalten.
develop : enthält:master enthält:Nachdem eine Pull -Anfrage über 30 Tage ohne Aktivität oder Antwort des Autors geöffnet ist, wird sie automatisch als abgestanden markiert. Wir könnten Ihre Veränderungen verlangen und die Veränderungen selbst zusammenführen. Da Github Beiträge nach Commits verfolgt, werden Sie gutgeschrieben.
Befolgen Sie diese Schritte, um die Website und Symbole entweder lokal zu erstellen oder Gitpod.io zu verwenden.
Mit Gitpod.io können Sie die Symbole problemlos erstellen und die installieren
Erforderliche Abhängigkeiten in einem einzigen Klick. Es ist kein zusätzliches Setup erforderlich.
Beachten Sie , falls einige der Befehle nicht ordnungsgemäß ausgeführt werden, Sie können können
Befolgen Sie die folgenden Schritte und führen Sie dieselben Befehle auf gitpod.io aus
Geben Sie das Repository auf und klonen Sie das Forked Repository.
git clone https://github.com/ < your-github-username > /devicon.gitHinweis Wenn Sie nicht mit Git installiert sind, überprüfen Sie den offiziellen Leitfaden, um Git in Ihrem Betriebssystem zu installieren.
npm installBeachten Sie , falls Sie NPM nicht installiert haben. Überprüfen Sie diese ultimative Anleitung zum Installieren von Node.js und NPM. Diese Werkzeuge sind erforderlich, um Devicon ordnungsgemäß zu erstellen.
Hinweis stellen Sie sicher, dass Ihre Python -Installation PIP enthält
python3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1 Sobald alle Abhängigkeiten installiert sind, können Sie die neuesten Symbole erstellen.
Normalerweise erfolgt dies bei jeder Version, aber Sie können vor einer Veröffentlichung einen kleinen Einblick in einen Blick haben.
# Linux/Unix
npm run build-icons
# Windows
python3 ./.github/scripts/icomoon_build_githubless.py ./.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headlessDer Vorgang kann eine Weile dauern, abhängig von der Geschwindigkeit Ihres Betriebssystems und der Menge an Symbolen.
Wenn Fehler angezeigt werden, teilen Sie uns dies bitte mit, indem Sie ein Problem erstellen oder uns in unserer Discord -Community kontaktieren.
Führen Sie den folgenden Befehl aus, um das neue CSS -Stylesheet zu erstellen.
Diese Datei wird verwendet, um alle zuvor erstellten neuen Symbole anzuzeigen.
npm run build-cssFühren Sie den folgenden Befehl aus, um den Webserver mit Python zu starten.
npm run dev # Will run on port 8000Oder dieser Befehl, der genau das gleiche tut, der Port kann jedoch angepasst werden.
python3 -m http.server < port > Du bist jetzt fertig! ? Ihr Devicons -Aufbau sollte unter https://localhost:8000 (oder dem gewünschten Port) verfügbar sein.
