1-Disponible para los bloques Titular y Botón
Los bloques botón y titular de generateblocks permiten la utilización de iconos SVG. En este post aprenderemos a utilizarlos.
En primer lugar, añadiremos desde el editor uno de los dos bloques mencionados, que son los que permiten inserción de textos e iconos svg
Utilizaremos, por ejemplo, un bloque Titular:
Podemos escribir el texto que deseemos.
2-Configuramos el icono SVG
Después, en la configuración del bloque, podemos identificar una sección donde se definirá el icono SVG. Se aprecian tres subsecciones:
- Icona SVG HTML: Aquí pegaremos el código SVG cuando lo hayamos obtenido externamente.
- General: Disponemos de algunos SVG genéricos
- Social: Disponemos de algunos SVG relacionados con redes sociales
3-Uso de repositorios externos de SVG
Si no encontramos ningún icono de los disponibles que nos encaje, podemos obtener más iconos de diferentes temáticas en algún repositorio externo como SVG Repo – Free SVG Vectors and Icons
En el repositorio indicado, podemos buscar entre un gran número de iconos.
Cuando seleccionemos uno, es importante fijarse en el tipo de licencia, que nos indicará si hay algún tipo de restricción en su uso, por ejemplo, vamos a escoger este icono con licencia de dominio público.
A continuación, editamos el vector y utilizamos la opción de Copiar SVG
Tal como se ve en la captura, podemos editar ciertos parámetros si nos interesa, antes de copiar.
Ahora pegamos en nuestra sección de Icono, en la configuración del bloque titular. Una vez pegado el código, se previsualiza el icono justo debajo.
Además, también se visualiza el icono en nuestro bloque titular:
4-Últimos ajustes: color de relleno y tamaño del icono
Dependiendo del código del icono que hayamos obtenido, puede ser necesario configurar el color. En este caso, observamos que en el bloque se visualiza completamente negro, incluyendo el relleno. Eso no es lo que queríamos. Para que se visualice tal como queremos, con el relleno blanco, simplemente ajustaremos, también en los ajustes del bloque, el color del icono:
Inmediatamente, comprobaremos que el icono se visualiza con el relleno blanco, tal como queríamos:
Este es un bloque titular, con texto y con icono SVG
También podemos cambiar el tamaño del icono, independientementa del tamaño del texto.
5-Otra opción: descargar el svg como fichero
Desde el repositorio de svg, podemos también exportar el icono a un fichero svg. Este fichero podremos después subirlo a la mediateca y utilizarlo con un bloque de imagen. Esta opción es la recomendada cuando el código svg en HTML no funciona bien en WordPress. A veces, WordPress puede filtrar por seguridad alguna de las etiquetas del código, produciendo que no se visualice bien el icono.
