devicon
v2.16.0
Demostración · icono de solicitud · contribuir
<!-- 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 tiene como objetivo recopilar todos los logotipos que representan lenguajes y herramientas de desarrollo. Cada icono viene en varias versiones: fuente/SVG, original/simple/line, coloreado/no colorado, marcas de palabras/sin calmar. Devicon tiene más de 150 íconos. ¡Y está creciendo!
Consulte el Devicon.json o nuestro sitio web para ver la referencia completa y actualizada de todos los iconos disponibles.
Gracias a todos nuestros contribuyentes y a la aplicación Icomoon. Devicon no sería posible sin ti.
Todos los nombres de productos, logotipos y marcas son propiedad de sus respectivos propietarios. Todos los nombres de empresas, productos y servicios utilizados en este sitio web son solo para fines de identificación. El uso de estos nombres, logotipos y marcas no implica el respaldo. El uso de estos logotipos debe realizarse de acuerdo con la política de marca de la empresa/marca/servicio. Para una configuración súper rápida, visite Devicon.dev.
Puede usar los iconos SVG sin procesar, nuestra fuente Devicon (que también está disponible a través de CDN) o construyendo Devicon usted mismo.
devicon (recomendada) Puede instalar Devicon como dependencia de su proyecto, ya sea con npm o yarn :
npm install --save devicon
yarn add deviconSi no desea usar un Administrador de paquetes, también puede descargar e incluir devicon.min.css junto a los archivos de fuentes en su proyecto. Consulte Devicon.dev para obtener detalles sobre cómo agregar Devicon a su proyecto a través de un CDN.
Después de configurar, solo debe incluir la hoja de estilo en su encabezado para comenzar:
< link rel =" stylesheet " href =" devicon.min.css " > Comience a usar iconos con <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 > Una forma alternativa de usar devicon es copiar/pegar el código SVG sin procesar a su proyecto.
<!-- 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 >Agregue las siguientes reglas CSS en su hoja de estilo:
. devicon-devicon-plain {
max-width : 2 em ;
}
/* if you want to change the original color */
. devicon-devicon-plain path {
fill : # 4691f6 ;
}img y hacer referencia a un SVG directamente desde el repositorio: < img src =' https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg ' > Cuando desee solicitar un icono, no dude en crear un problema. Consulte nuestro wiki para obtener más información.
Estamos contentos con cada contribución, ya sean nuevos íconos, características o mantenedores. Eche un vistazo a nuestro wiki para ver cómo puede contribuir a este proyecto.
Tenemos una comunidad de discordia para los Devicons. ¡Puede solicitar fácilmente íconos, discutir y pasar un buen rato hablando con los miembros de la comunidad! ¡Únase al servidor oficial de Discord aquí!
develop vs master Todos los lanzamientos oficiales estarán en master . Cualquier actualización entre (iconos, características, etc.) se mantendrá en develop .
develop contiene:master contiene:Después de que una solicitud de extracción haya estado abierta durante más de 30 días sin actividad o respuesta del autor, se marcará automáticamente como obsoleto. Podríamos desembolsar sus cambios y fusionar los cambios nosotros mismos. Dado que GitHub rastrea las contribuciones de Commits, se le acreditará.
Siga estos pasos para crear el sitio web e iconos localmente o usar gitpod.io.
Al usar gitpod.io, puede construir fácilmente los iconos e instalar el
Dependencias requeridas en un solo clic. No se requiere una configuración adicional.
Nota En caso de que algunos de los comandos no se ejecuten correctamente, puede
Siga los pasos a continuación y ejecute los mismos comandos en gitpod.io
Bifurca el repositorio y clona el repositorio bifurcado.
git clone https://github.com/ < your-github-username > /devicon.gitNota En caso de que no tenga instalado GIT, consulte la guía oficial para instalar GIT en su sistema operativo.
npm installNota En caso de que no tenga instalado NPM, verifique esta guía final en la instalación de Node.js y NPM. Se requieren estas herramientas para construir Devicon correctamente.
Nota Asegúrese de que su instalación de Python incluya PIP
python3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1 Una vez que se instalen todas las dependencias, puede proceder a construir los iconos más nuevos.
Por lo general, esto se hace en cada lanzamiento, pero puede echar un vistazo antes de un lanzamiento.
# 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 ./ --headlessEl proceso puede llevar un tiempo, dependiendo de la velocidad de su sistema operativo y la cantidad de íconos.
Si se muestran algún error, háganoslo saber creando un problema o contactándonos en nuestra comunidad de Discord.
Ejecute el siguiente comando para construir la nueva hoja de estilo CSS.
Este archivo se utiliza para mostrar todos los nuevos iconos construidos anteriormente.
npm run build-cssEjecute el siguiente comando para iniciar el servidor web con Python.
npm run dev # Will run on port 8000O este comando, que hace exactamente lo mismo, pero el puerto se puede personalizar.
python3 -m http.server < port > ¡Ya terminaste! ? Su construcción de Devicons debe estar disponible en https://localhost:8000 (o el puerto deseado).
