1-Disponible per als blocs Titular i Botó
Els blocs botó i titular de generateblocks permeten la utilització d’icones SVG. En este post aprendrem a utilitzar-les.
En primer lloc, afegirem des de l’editor un dels dos blocs esmentats, que són els que permeten inserció de textos i icones svg
Utilitzarem, per exemple, un bloc Titular:
Podem escriure el text que desitgem.
2-Configurem la icona SVG
Després, en la configuració del bloc, podem identificar una secció on es definirà la icona SVG. S’aprecien tres subseccions:
- Icona SVG HTML: Ací pegarem el codi SVG quan l’hàgem obtingut externament.
- General: Disposem d’alguns SVG genèrics
- Social: Disposem d’alguns SVG relacionats amb xarxes socials
3-Ús de repositoris externs de SVG
Si no trobem cap icona de les disponibles que ens encaixe, podem obtindre més icones de diferents temàtiques en algun repositori extern com SVG Repo – Free SVG Vectors and Icons
En el repositori indicat, podem buscar entre un gran nombre d’icones.
Quan seleccionem una, és important fixar-se en el tipus de llicència, que ens indicarà si hi ha algun tipus de restricció en el seu ús, per exemple, triarem esta icona amb llicència de domini públic.
A continuació, editem el vector i utilitzem l’opció de Copiar SVG
Tal com es veu en la captura, podeu editar certs paràmetres si us interessa, abans de copiar.
Ara peguem en la nostra secció d’Icona, en la configuració del bloc titular. Una vegada pegat el codi, es previsualiza la icona justa davall.
A més, també es visualitza la icona en el nostre bloc titular:
4-Últims ajustos: color de farciment de la icona i tamany
Depenent del codi de la icona que hàgem obtingut, pot ser necessari configurar el color. En este cas, observem que en el bloc es visualitza completament negre, incloent-hi el farciment. Això no és el que volíem. Perquè es visualitze tal com volem, amb el farciment blanc, simplement ajustarem, també en els ajustos del bloc, el color de la icona:
Immediatament, comprovarem que la icona es visualitza amb el farciment blanc, tal com volíem:
Este és un bloc titular, amb text i amb icona SVG
També podeu canviar el tamany de la icona, independentment del tamany del text, des de la configuració del bloc:
5-Altra opció: descarregar el svg com a fitxer
Des del repositori de svg, podem també exportar la icona a un fitxer svg. Este fitxer podrem després pujar-lo a la mediateca i utilitzar-lo amb un bloc d’imatge. Esta opció és la recomanada quan el codi svg en HTML no funciona bé en WordPress. De vegades, WordPress pot filtrar per seguretat alguna de les etiquetes del codi, produint que no es visualitze bé la icona.
