演示·請求圖標·貢獻
<!-- 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與masterDevicon旨在收集代表開發語言和工具的所有徽標。每個圖標都有多個版本:字體/svg,原始/普通/線,彩色/不著色,wordmark/no Wordmark。 Devicon有150多個圖標。而且它正在增長!
有關所有可用圖標的完整和最新參考,請參見Devicon.json或我們的網站。
感謝我們所有的貢獻者和Icomoon應用程序。沒有你,德文是不可能的。
所有產品名稱,徽標和品牌都是其各自所有者的財產。本網站中使用的所有公司,產品和服務名稱僅用於識別目的。使用這些名稱,徽標和品牌並不意味著認可。這些徽標的使用應根據公司/品牌/服務的品牌政策進行。對於超快速設置,請查看Devicon.dev。
您可以使用RAW SVG圖標,我們的Devicon字體(也可以通過CDN獲得),也可以自己構建Devicon。
devicon字體(推薦)您可以使用npm或yarn安裝Devicon作為項目的依賴性:
npm install --save devicon
yarn add devicon如果您不想使用軟件包管理器,則還可以下載並在您的項目旁邊包含devicon.min.css。有關如何通過CDN將Devicon添加到您的項目中的詳細信息,請參見Devicon.dev。
設置後,您只需要在標題中包括樣式表即可開始:
< link rel =" stylesheet " href =" devicon.min.css " >開始使用帶有<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 >使用devicon的另一種方法是將RAW SVG代碼複製到您的項目中。
<!-- 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 >在樣式表中添加以下CSS規則:
. devicon-devicon-plain {
max-width : 2 em ;
}
/* if you want to change the original color */
. devicon-devicon-plain path {
fill : # 4691f6 ;
}img標籤並直接從存儲庫引用SVG: < img src =' https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg ' > 當您要請求圖標時,請隨時創建問題。查看我們的Wiki以獲取更多信息。
無論是新的圖標,功能還是維護者,我們都對每項貢獻感到滿意。請看看我們的Wiki,看看如何為該項目做出貢獻。
我們有一個Devicons的不和諧社區。您可以輕鬆地請求圖標,討論並與社區成員交談!在此處加入官方的Discord服務器!
develop與master所有官方版本均應為master 。 (圖標,功能等)之間的任何更新都將保留在develop中。
develop包含:master包含:在沒有作者的活動或響應的情況下打開拉動請求超過30天之後,它將自動將其標記為陳舊。我們可能會分散您的變化並自己合併。由於Github跟踪Consits的貢獻,因此您將被歸功於您。
請按照以下步驟在本地或使用gitpod.io構建網站和圖標。
通過使用gitpod.io,您可以輕鬆構建圖標並安裝
單擊一次所需的依賴項。無需額外的設置。
注意如果某些命令無法正確運行,則可以
按照下面的步驟操作並在gitpod.io上運行相同的命令
分叉存儲庫,然後克隆分叉的存儲庫。
git clone https://github.com/ < your-github-username > /devicon.git請注意,如果您沒有安裝GIT,請檢查在操作系統上安裝GIT的官方指南。
npm install請注意,如果您沒有安裝NPM,請檢查有關安裝Node.js和NPM的最終指南。為了正確構建Devicon,需要這些工具。
注意確保您的Python安裝包括PIP
python3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1安裝了所有依賴項後,您可以繼續構建最新的圖標。
通常,這是在每個版本上完成的,但是您可以在釋放前偷看。
# 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 ./ --headless該過程可能需要一段時間,具體取決於操作系統的速度和圖標量。
如果顯示出任何錯誤,請通過創建問題或在我們的Discord社區中與我們聯繫,讓我們知道。
運行以下命令來構建新的CSS樣式表。
該文件用於顯示以前構建的所有新圖標。
npm run build-css運行以下命令以使用Python啟動Web服務器。
npm run dev # Will run on port 8000或此命令,該命令完全相同,但是可以自定義端口。
python3 -m http.server < port >你現在完成了! ?您的Devicons的構建應在https://localhost:8000 (或所需的端口)上找到。