Esta es una API diseñada para insertar iconos SVG en aplicaciones web utilizando etiquetas personalizadas. No es necesario instalarla, simplemente sigue las instrucciones a continuación para integrarla en tu proyecto.
Para integrar la API en tu proyecto web, simplemente sigue estos pasos:
-
Agrega las referencias en tu HTML
En el
<head>de tu HTML, agrega las siguientes referencias para incluir los estilos CSS y el JavaScript de la API:<link rel="stylesheet" href="https://api.elementscssdaj.github.io/api/css"> <script src="https://api.elementscssdaj.github.io/api/js"></script>
-
Usa las etiquetas
<daj>en tu HTMLEn el cuerpo de tu HTML, utiliza etiquetas
<daj>con la clase que especifica qué icono quieres mostrar. Por ejemplo:<daj class="html"></daj>
Esta etiqueta mostrará el icono SVG de HTML.
Actualmente, la API incluye los siguientes iconos:
<daj class="html"></daj> <!-- Icono de HTML -->
<daj class="css"></daj> <!-- Icono de CSS -->
<daj class="js"></daj> <!-- Icono de JavaScript -->
<daj class="react"></daj> <!-- Icono de React -->
<daj class="vue"></daj> <!-- Icono de Vue.js -->
<daj class="node"></daj> <!-- Icono de Node.js -->
<daj class="php"></daj> <!-- Icono de PHP -->
<daj class="python"></daj> <!-- Icono de Python -->Puedes cambiar el tamaño de los iconos utilizando las clases small, medium o large:
<daj class="html small"></daj> <!-- Icono pequeño (16px) -->
<daj class="css medium"></daj> <!-- Icono mediano (24px) - tamaño por defecto -->
<daj class="js large"></daj> <!-- Icono grande (32px) -->Puedes cambiar el color de los iconos utilizando las clases predefinidas o con estilos CSS personalizados:
<daj class="html primary"></daj> <!-- Color primario (azul) -->
<daj class="css success"></daj> <!-- Color de éxito (verde) -->
<daj class="js danger"></daj> <!-- Color de peligro (rojo) -->
<daj class="react warning"></daj> <!-- Color de advertencia (amarillo) -->
<daj class="vue info"></daj> <!-- Color de información (celeste) -->También puedes aplicar estilos personalizados directamente:
<daj class="html" style="color: purple; width: 48px; height: 48px;"></daj><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de DAJ Icons</title>
<!-- Agregar referencias a la API -->
<link rel="stylesheet" href="https://api.elementscssdaj.github.io/api/css">
<script src="https://api.elementscssdaj.github.io/api/js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.icon-container {
display: flex;
gap: 20px;
margin: 20px 0;
flex-wrap: wrap;
}
.icon-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Ejemplos de DAJ Icons</h1>
<h2>Iconos de tecnologías web</h2>
<div class="icon-container">
<div class="icon-box">
<daj class="html large"></daj>
<p>HTML</p>
</div>
<div class="icon-box">
<daj class="css large primary"></daj>
<p>CSS</p>
</div>
<div class="icon-box">
<daj class="js large warning"></daj>
<p>JavaScript</p>
</div>
<div class="icon-box">
<daj class="react large info"></daj>
<p>React</p>
</div>
<div class="icon-box">
<daj class="vue large success"></daj>
<p>Vue.js</p>
</div>
</div>
</body>
</html>Si tienes alguna pregunta o necesitas ayuda para integrar la API en tu proyecto, no dudes en contactar al desarrollador:
Correo electrónico: [email protected]
¡Gracias por utilizar esta API!