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.
Puedes aprender SVG con EDteam
Empezamos creando el archivo icons.svg todos los íconos estarán en este único archivo.
1<svg xmlns="http://www.w3.org/2000/svg"> 2 <!-- Aquí estarán nuestros íconos --> 3</svg> 4
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: id y viewBox, 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
1<svg xmlns="http://www.w3.org/2000/svg"> 2 <symbol id="id-del-svg" viewBox="viewBox-del-symbol"> 3 <title>Título del symbol (No es obligatorio)</title> 4 <!-- Código SVG que almacenará el symbol --> 5 </symbol> 6</svg> 7
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:
- Copia el valor del viewbox del svg original (el que has descargado) en el viewbox del
icons.svg - Pega el contenido (todos los hijos del elemento
svg) del svg original (el que has descargado) dentro delsymbol. - Dale un
idal symbol (tu decides el valor) - Tu archivo debe quedar así (con un símbolo por cada ícono):
1<svg xmlns="http://www.w3.org/2000/svg"> 2 3 <symbol id="delete" viewBox="0 0 408.483 408.483"> 4 <title>Icon delete</title> 5 <g> 6 <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"/> 7 <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"/> 8 </g> 9 </symbol> 10 11 <symbol id="check" viewBox="0 0 26 26"> 12 <title>Icon check</title> 13 <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"/> 14 </symbol> 15 16 <symbol id="config" viewBox="0 0 512 512"> 17 <title>Icon config</title> 18 <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"/> 19 </symbol> 20 21 <symbol id="twitter" viewBox="0 0 612 612"> 22 <title>Icon twitter</title> 23 <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"/> 24 </symbol> 25 26</svg> 27
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:
1<svg> 2 <use href="ubicacion/icons.svg#id-del-symbol"/> 3</svg> 4
Ejemplo
1<button> 2 <svg><use href="icons.svg#delete"/></svg> 3 Borrar 4</button> 5
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)
1.cross-center { 2 /* Centramos verticalmente el ícono con el texto */ 3 display : flex; 4 align-items : center; 5} 6 7.svg-icon { 8 /* Le asignamos un tamaño y un margen al ícono */ 9 width : 1rem; 10 height : 1rem; 11 margin-right : 0.5rem; 12 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*/ 13} 14
Resultado
1<button class="cross-center"> 2 <svg class="svg-icon"><use href="icons.svg#delete"/></svg> 3 Borrar 4</button> 5 6<button class="cross-center"> 7 <svg class="svg-icon"><use href="icons.svg#check"/></svg> 8 Aceptar 9</button> 10 11<a href="#" class="cross-center"> 12 <svg class="svg-icon"><use href="icons.svg#config"/></svg> 13 Configuración 14</a> 15 16<a href="#" class="cross-center"> 17 <svg class="svg-icon"><use href="icons.svg#twitter"/></svg> 18 Síguenos en twitter 19</a> 20
Ya en este punto tienes el flow 🔥 suficiente para crear los paquetes de íconos que quieras y darles el formato que desees.