devicon
v2.16.0
การสาธิต·ขอไอคอน·มีส่วนร่วม
<!-- 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 VS master Devicon มีจุดมุ่งหมายเพื่อรวบรวมโลโก้ทั้งหมดที่แสดงถึงภาษาและเครื่องมือการพัฒนา ไอคอนแต่ละตัวมีหลายรุ่น: Font/SVG, Original/Plain/Line, สี/ไม่สี, WordMark/No Wordmark Devicon มีไอคอนมากกว่า 150 รายการ และมันก็เพิ่มขึ้น!
ดู devicon.json หรือเว็บไซต์ของเราสำหรับการอ้างอิงที่สมบูรณ์และทันสมัยของไอคอนที่มีอยู่ทั้งหมด
ขอบคุณผู้สนับสนุนทั้งหมดของเราและแอพ iComoon Devicon จะเป็นไปไม่ได้หากไม่มีคุณ
ชื่อผลิตภัณฑ์โลโก้และแบรนด์ทั้งหมดเป็นทรัพย์สินของเจ้าของที่เกี่ยวข้อง ชื่อ บริษัท ผลิตภัณฑ์และบริการทั้งหมดที่ใช้ในเว็บไซต์นี้มีวัตถุประสงค์เพื่อระบุตัวตนเท่านั้น การใช้ชื่อโลโก้และแบรนด์เหล่านี้ไม่ได้หมายความถึงการรับรอง การใช้โลโก้เหล่านี้ควรทำตามนโยบายของ บริษัท/แบรนด์/บริการ สำหรับการตั้งค่าที่รวดเร็วสุด ๆ ให้ไปตรวจสอบ Devicon.dev
คุณสามารถใช้ไอคอน SVG ดิบ, ตัวอักษร Devicon ของเรา (ซึ่งมีให้ผ่าน CDN) หรือโดยการสร้าง Devicon ด้วยตัวคุณเอง
devicon (แนะนำ) คุณสามารถติดตั้ง Devicon เพื่อพึ่งพาโครงการของคุณด้วย npm หรือ yarn :
npm install --save devicon
yarn add deviconหากคุณไม่ต้องการใช้ตัวจัดการแพ็คเกจคุณสามารถดาวน์โหลดและรวม devicon.min.css ถัดจากไฟล์ฟอนต์ไปยังโครงการของคุณ ดู devicon.dev สำหรับรายละเอียดเกี่ยวกับวิธีเพิ่ม Devicon ในโครงการของคุณผ่าน CDN
หลังจากตั้งค่าคุณเพียงแค่ต้องรวมสไตล์ชีทในส่วนหัวของคุณเพื่อเริ่มต้น:
< 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 คือการคัดลอก/วางรหัส 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 ของเราสำหรับข้อมูลเพิ่มเติม
เรามีความสุขกับการบริจาคทุกครั้งไม่ว่าจะเป็นไอคอนใหม่คุณสมบัติหรือผู้ดูแล โปรดดูวิกิของเราเพื่อดูว่าคุณสามารถมีส่วนร่วมในโครงการนี้ได้อย่างไร
เรามีชุมชน Discord สำหรับ Devicons คุณสามารถขอไอคอนพูดคุยและมีช่วงเวลาที่ดีในการพูดคุยกับสมาชิกชุมชน! เข้าร่วมเซิร์ฟเวอร์ Discord อย่างเป็นทางการที่นี่!
develop VS master การเผยแพร่อย่างเป็นทางการทั้งหมดจะอยู่ใน master การอัปเดตใด ๆ ในระหว่าง (ไอคอนคุณสมบัติ ฯลฯ ) จะถูกเก็บไว้ใน develop
develop ประกอบด้วย:master มี:หลังจากคำขอแบบดึงเปิดมานานกว่า 30 วันโดยไม่มีกิจกรรมหรือการตอบสนองจากผู้เขียนมันจะถูกทำเครื่องหมายโดยอัตโนมัติว่าเก่า เราอาจแยกการเปลี่ยนแปลงของคุณและรวมการเปลี่ยนแปลงด้วยตนเอง เนื่องจาก GitHub ติดตามผลงานโดย Cess คุณจะได้รับเครดิต
ทำตามขั้นตอนเหล่านี้เพื่อสร้างเว็บไซต์และไอคอนทั้งในพื้นที่หรือใช้ 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
npm run dev # Will run on port 8000หรือคำสั่งนี้ซึ่งทำเช่นเดียวกัน แต่พอร์ตสามารถปรับแต่งได้
python3 -m http.server < port > คุณทำเสร็จแล้ว! - การสร้าง Devicons ของคุณควรมีให้ที่ https://localhost:8000 (หรือพอร์ตที่ต้องการ)
