Pasar al contenido principal

🔥 Hoy comenzamos la especialidad en programación backend con PHP con Yesi Days ¡La primera clase es en vivo y gratis! 😍 Reserva tu lugar. Comienza en:

Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Crea tu paquete de íconos personalizado utilizando SVG

Aprende a crear un paquete de íconos de forma rápida y sencilla utilizando SVG

Portada Crea tu paquete de íconos personalizado utilizando SVG

Anteriormente, te mostré por qué usar SVG en lugar de icon fonts, y en esta ocasión te enseñaré a crear tu propio paquete de íconos SVG. Es recomendable tener conocimientos básicos en SVG para entender todo a la perfección.

Curso SVG Desde Cero
Puedes aprender SVG con EDteam

Empezamos creando el archivo icons.svg todos los íconos estarán en este único archivo.

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- Aquí estarán nuestros íconos -->
</svg>

Nota: algo que se debe tener en cuenta es que la ubicación del archivo icons.svg es primordial, ya que la necesitamos para poder estar llamando a nuestros íconos, por lo que lo recomendable es tenerla en una carpeta con fácil acceso como /img o algo por estilo.

Para agregar los íconos usaremos el elemento symbol, dicho elemento necesita dos atributos: idviewBox, si no sabes qué es el viewBox, no te preocupes, los archivos SVG que vamos a usar ya tienen uno establecido, sólo debes utilizar su valor en el symbol que vayas a crear. Si quieres aprender más sobre este tema, recuerda que EDteam tiene el curso SVG Desde Cero

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="id-del-svg" viewBox="viewBox-del-symbol">
        <title>Título del symbol (No es obligatorio)</title>
        <!-- Código SVG que almacenará el symbol -->
    </symbol>
</svg>

Para obtener los vectores usaremos Flaticon este sitio tiene miles de vectores gratuitos. Luego de descargar un svg, abrelo en un editor de código y sigue los siguientes pasos:

  1. Copia el valor del viewbox del svg original (el que has descargado) en el viewbox del icons.svg
  2. Pega el contenido (todos los hijos del elemento svg) del svg original (el que has descargado) dentro del symbol
  3. Dale un id al symbol (tu decides el valor)
  4. Tu archivo debe quedar así (con un símbolo por cada ícono):
<svg xmlns="http://www.w3.org/2000/svg">

    <symbol id="delete" viewBox="0 0 408.483 408.483">
        <title>Icon delete</title>
        <g>
	  <path d="M87.748,388.784c0.461,11.01,9.521,19.699,20.539,19.699h191.911c11.018,0,20.078-8.689,20.539-19.699l13.705-289.316 H74.043L87.748,388.784z M247.655,171.329c0-4.61,3.738-8.349,8.35-8.349h13.355c4.609,0,8.35,3.738,8.35,8.349v165.293 c0,4.611-3.738,8.349-8.35,8.349h-13.355c-4.61,0-8.35-3.736-8.35-8.349V171.329z M189.216,171.329 c0-4.61,3.738-8.349,8.349-8.349h13.355c4.609,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.737,8.349-8.349,8.349h-13.355 c-4.61,0-8.349-3.736-8.349-8.349V171.329L189.216,171.329z M130.775,171.329c0-4.61,3.738-8.349,8.349-8.349h13.356 c4.61,0,8.349,3.738,8.349,8.349v165.293c0,4.611-3.738,8.349-8.349,8.349h-13.356c-4.61,0-8.349-3.736-8.349-8.349V171.329z"/>
          <path d="M343.567,21.043h-88.535V4.305c0-2.377-1.927-4.305-4.305-4.305h-92.971c-2.377,0-4.304,1.928-4.304,4.305v16.737H64.916 c-7.125,0-12.9,5.776-12.9,12.901V74.47h304.451V33.944C356.467,26.819,350.692,21.043,343.567,21.043z"/>
	</g>
    </symbol>

    <symbol id="check" viewBox="0 0 26 26">
        <title>Icon check</title>
        <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z"/>
    </symbol>

    <symbol id="config" viewBox="0 0 512 512">
        <title>Icon config</title>
        <path d="M500.633,211.454l-58.729-14.443c-3.53-11.133-8.071-21.929-13.55-32.256c8.818-14.678,27.349-45.571,27.349-45.571 c3.545-5.903,2.607-13.462-2.256-18.325l-42.422-42.422c-4.863-4.878-12.407-5.815-18.325-2.256L347.055,83.53 c-10.269-5.435-21.006-9.932-32.065-13.433l-14.443-58.729C298.876,4.688,292.885,0,286,0h-60 c-6.885,0-12.891,4.688-14.546,11.367c0,0-10.005,40.99-14.429,58.715c-11.792,3.735-23.188,8.584-34.043,14.502l-47.329-28.403 c-5.918-3.516-13.447-2.607-18.325,2.256l-42.422,42.422c-4.863,4.863-5.801,12.422-2.256,18.325l29.268,48.882 c-4.717,9.302-8.672,18.984-11.821,28.901l-58.729,14.487C4.688,213.124,0,219.115,0,226v60c0,6.885,4.688,12.891,11.367,14.546 l58.744,14.443c3.56,11.294,8.188,22.266,13.799,32.798l-26.191,43.652c-3.545,5.903-2.607,13.462,2.256,18.325l42.422,42.422 c4.849,4.849,12.407,5.771,18.325,2.256c0,0,29.37-17.607,43.755-26.221c10.415,5.552,21.313,10.137,32.549,13.696l14.429,58.715 C213.109,507.313,219.115,512,226,512h60c6.885,0,12.876-4.688,14.546-11.367l14.429-58.715 c11.558-3.662,22.69-8.394,33.281-14.136c14.78,8.862,44.443,26.66,44.443,26.66c5.903,3.53,13.462,2.622,18.325-2.256 l42.422-42.422c4.863-4.863,5.801-12.422,2.256-18.325l-26.968-44.927c5.317-10.093,9.727-20.654,13.169-31.523l58.729-14.443 C507.313,298.876,512,292.885,512,286v-60C512,219.115,507.313,213.124,500.633,211.454z M256,361c-57.891,0-105-47.109-105-105 s47.109-105,105-105s105,47.109,105,105S313.891,361,256,361z"/>
    </symbol>

    <symbol id="twitter" viewBox="0 0 612 612">
        <title>Icon twitter</title>
        <path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/>    
    </symbol>

</svg>

 

 

Ya teniendo nuestros vectores, procederemos a mostrarlos en nuestra web. Para llamar a un vector usaremos el siguiente código en el lugar que querramos usarlos:

 

<svg>
    <use href="ubicacion/icons.svg#id-del-symbol"/>
</svg>

 

Ejemplo

 

<button>
    <svg><use href="icons.svg#delete"/></svg>
    Borrar
</button>

 

Ya para finalizar debemos aplicar CSS para normalizar los estilos de los SVG, para ello agregaremos la clase .svg-icon a las etiquetas <svg> que se utilizan para llamar al archivo principal y .cross-center al padre de la etiqueta anteriormente mencionada (no es necesario que utilices los mismos estilos o clases, diviértete en este aspecto)

 

.cross-center {
    /* Centramos verticalmente el ícono con el texto */
    display     : flex;
    align-items : center;
}

.svg-icon {
    /* Le asignamos un tamaño y un margen al ícono */
    width        : 1rem;
    height       : 1rem;
    margin-right : 0.5rem;
    fill         : currentColor; /* currentColor actua como una variable tomando el valor que tenga el color de texto del padre del elemento. Si estás utilizando vectores que poseen distintos rellenos, omite esta línea de código*/
}

 

Resultado

 

<button class="cross-center">
    <svg class="svg-icon"><use href="icons.svg#delete"/></svg>
    Borrar
</button>

<button class="cross-center">
    <svg class="svg-icon"><use href="icons.svg#check"/></svg>
    Aceptar
</button>

<a href="#" class="cross-center">
    <svg class="svg-icon"><use href="icons.svg#config"/></svg>
    Configuración
</a>

<a href="#" class="cross-center">
    <svg class="svg-icon"><use href="icons.svg#twitter"/></svg>
    Síguenos en twitter
</a>

 

Configuración Síguenos en twitter

 

Ya en este punto tienes el flow 🔥 suficiente para crear los paquetes de íconos que quieras y darles el formato que desees.

 

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal