HOLA SVG, una herramienta SVG muy útil
Cuándo usar SVG
En proyectos reales, solemos necesitar iconos para acciones del usuario, como flechas o botones de siguiente/anterior. SVG encaja muy bien: son formas simples y se pueden ajustar color y tamaño con facilidad.
HOLA SVG
Quiero compartir una web muy útil: HOLA SVG.
La usé por primera vez en la segunda mitad de 2020. Cuando regresé en 2021, me sorprendió ver muchas más opciones.
Apliqué varios iconos en mi proyecto worldtime: el icono de suma, el de resta y un símbolo hacia arriba.
Tomemos el icono de suma como ejemplo:
<svg fill='none' stroke='#0E1A27' stroke-width='8' stroke-dashoffset='0' stroke-dasharray='0' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="40"/>
<line x1="35" y1="50" x2="65" y2="50" />
<line x1="50" y1="35" x2="50" y2="65" />
</svg>Su estructura es muy clara: un svg envolvente, un <circle> y dos <line>.
Así lo usé dentro de mi proyecto:
<div className="w-10 ml3">
<svg className="grow"
fill='none' stroke='#555555' strokeWidth='10' strokeDashoffset='194' strokeDasharray='0' strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'
onClick={onPlusButton} >
<circle cx="50" cy="50" r="40"/>
<line x1="35" y1="50" x2="65" y2="50" />
<line x1="50" y1="35" x2="50" y2="65" />
</svg>
</div>P. D. Como usé React, cambié los atributos a camelCase.
stroke-width='8'
strokeWidth='10'Personalización fácil
Como el código es simple, personalizarlo también lo es. Puedes cambiar el color con stroke y el grosor con stroke-width.
Además, el sitio tiene una barra superior para ajustar grosor, color y bordes redondeados.
El tamaño también se puede controlar envolviendo el SVG con un <div>. En mi ejemplo, w-10, ml3 y grow son clases de Tachyons.
También puedes modificar la geometría del icono. Yo necesitaba un icono de mover hacia arriba y empecé con este símbolo:
<svg fill='none' stroke='#0E1A27' stroke-width='8' stroke-dashoffset='0' stroke-dasharray='0' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<line x1="20" y1="80" x2="80" y2="80" />
<line x1="50" y1="15" x2="50" y2="65" />
<polyline fill="none" points="30,30 50,15 70,30" />
</svg>Está compuesto por un <polyline>, una línea vertical y una horizontal.
Yo quería una versión más simple, así que quité las dos líneas y dejé solo el trazo en forma de flecha:
<div className="w-10 dib fr w2-ns">
<svg
onClick={() => {onUpButton(tz)}}
className="grow"
fill='none' stroke='#555555' strokeWidth='10' strokeDashoffset='194' strokeDasharray='0' strokeLinecap='round' strokeLinejoin='round' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<polyline fill="none" points="30,30 50,15 70,30" />
</svg>
</div>Otros recursos
Otro recurso SVG muy bueno es Font Awesome. Tiene muchos iconos cotidianos, aunque requiere instalación.
Si necesitas pocos iconos y de estilo funcional, HOLA SVG es una opción excelente. Su autora, Mariana Beldi, es diseñadora gráfica e ingeniera UI/UX de Argentina.