Tutorial WordPress: Hacer una cuadrícula de iconos SVG inline con CSS utilitario

Introducción

Este tutorial muestra, paso a paso y con todo lujo de detalles, cómo crear una cuadrícula de iconos SVG inline en WordPress utilizando CSS utilitario. El enfoque se centra en: insertar los iconos como SVG inline (sprite o símbolos), exponerlos de forma segura en una plantilla o mediante un hook de WordPress, y aplicar utilidades CSS mínimas y reutilizables para construir una cuadrícula flexible, accesible y fácilmente personalizable.

Ventajas de usar SVG inline utilidades CSS

Escalabilidad: los SVG mantienen nitidez a cualquier tamaño.
Control por CSS: usando currentColor y propiedades utilitarias puedes cambiar color y tamaño desde clases.
Rendimiento: un sprite inline elimina peticiones adicionales y permite caché del HTML resultante.
Accesibilidad: puedes manejar títulos y descripciones para lectores de pantalla.
Compatibilidad: usar el sprite inline evita problemas de CORS/inline-usage que surgen con sprites externos.

Requisitos previos

Tema de WordPress donde puedas editar functions.php o un archivo de plantilla.
Conjunto de iconos SVG optimizados (recomendado: sin atributos de color fijos, usar fill=currentColor cuando corresponda).
Conocimientos básicos de PHP, HTML y CSS.

Paso 1 — Preparar los SVG

Conviene estandarizar los SVG para que funcionen bien con CSS utilitario:

Eliminar atributos de estilo incrustado (width/height en valores absolutos si no quieres fijarlos), y usar viewBox.
Usar fill=currentColor en los elementos que deban tomar color desde CSS.
Si son decorativos, no hace falta título accesible si representan contenido, proporciona lttitlegt y/o aria-labelledby.

Ejemplo de un icono optimizado (archivo individual o símbolo):

ltsvg viewBox=0 0 24 24 xmlns=http://www.w3.org/2000/svg aria-hidden=truegt
  ltpath fill=currentColor d=M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z/gt
lt/svggt

Paso 2 — Crear un sprite SVG inline (símbolos)

Una manera eficiente es centralizar todos los iconos dentro de un único ltsvggt en el DOM, usando ltsymbolgt para cada icono. Este bloque se puede imprimir una sola vez (por ejemplo, al inicio del ltbodygt), y luego usar ltusegt para reutilizar cada símbolo.

Formato del sprite (archivo sprite.svg o generado):

ltsvg xmlns=http://www.w3.org/2000/svg style=display:nonegt
  ltsymbol id=icon-home viewBox=0 0 24 24gt
    ltpath fill=currentColor d=M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z/gt
  lt/symbolgt

  ltsymbol id=icon-user viewBox=0 0 24 24gt
    ltpath fill=currentColor d=M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 5v1h18v-1c0-2.5-4-5-9-5z/gt
  lt/symbolgt
lt/svggt

Paso 3 — Incluir el sprite en WordPress correctamente

Lo ideal es inyectar el sprite inline una sola vez en el DOM (normalmente justo tras la apertura de ltbodygt). Usaremos el hook wp_body_open cuando esté disponible. Si tu tema no lo soporta, puedes insertar el sprite en header.php inmediatamente antes del contenido.

Ejemplo de función en functions.php que imprime el sprite desde un archivo en tu tema:

/
  Inyecta el sprite SVG inline al inicio del body.
 /
function tema_insert_svg_sprite() {
  sprite_path = get_template_directory() . /assets/icons/sprite.svg
  if ( file_exists( sprite_path ) ) {
    echo file_get_contents( sprite_path )
  }
}
add_action( wp_body_open, tema_insert_svg_sprite, 5 )

Si tu tema no soporta wp_body_open, puedes usar wp_head aunque por semántica es preferible body ajustar prioridad para que se inserte antes del contenido visible.

Paso 4 — HTML de los iconos usando ltusegt

Una vez el sprite está inline, cada icono se instancia con ltsvggtltusegt. Para que el color sea controlado por CSS, el path debe usar fill=currentColor.

ltdiv class=icons-gridgt
  ltbutton class=icon-item aria-label=Iniciogt
    ltsvg class=icon role=img aria-hidden=truegt
      ltuse href=#icon-homegtlt/usegt
    lt/svggt
    ltspan class=labelgtIniciolt/spangt
  lt/buttongt

  ltbutton class=icon-item aria-label=Perfilgt
    ltsvg class=icon role=img aria-hidden=truegt
      ltuse href=#icon-usergtlt/usegt
    lt/svggt
    ltspan class=labelgtPerfillt/spangt
  lt/buttongt
lt/divgt

Nota sobre ltusegt y atributos

Usar href=#icon-id es la sintaxis actual en navegadores más antiguos puede ser necesario xlink:href. Al usar inline (sprite dentro del mismo documento) no hay problemas de CORS.

Paso 5 — CSS utilitario para una cuadrícula de iconos

Diseñaremos utilidades mínimas y reutilizables (inspiradas en enfoque utility-first). Esto permite aplicar tamaño, color, espaciado y estructura de cuadrícula con clases sencillas.

/ Contenedor de cuadrícula flexible /
.icons-grid {
  display: grid
  gap: 1rem
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr))
  align-items: center
}

/ Elemento que contiene el icono   etiqueta /
.icon-item {
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  gap: .5rem
  padding: .75rem
  background: transparent
  border: none
  cursor: pointer
  color: #2c3e50 / color base, cambia con utilidades /
}

/ Base para el SVG: tamaño relativo a la fuente mediante em /
.icon {
  width: 2.25rem   / 36px aprox si 16px base /
  height: 2.25rem
  display: block
  flex: 0 0 auto
  fill: currentColor / importante: permite controlar color con color del contenedor /
}

/ Tamaños utilitarios /
.icon--sm  { width: 1.5rem height: 1.5rem }
.icon--md  { width: 2rem   height: 2rem }
.icon--lg  { width: 3rem   height: 3rem }

/ Colores utilitarios (ejemplo simple) /
.text-primary { color: #0a66c2 }
.text-muted   { color: #6b7280 }

/ Ajustes accesibles: indica foco visible /
.icon-item:focus {
  outline: 2px solid #2563eb
  outline-offset: 2px
  border-radius: 6px
}

Paso 6 — Ejemplo completo: cuadrícula responsiva

Este ejemplo combina sprite inline, HTML para los iconos y las utilidades CSS para generar una cuadrícula de iconos clara y responsive.

lt!-- (Sprite ya inyectado en el DOM con tema_insert_svg_sprite) --gt
ltsection class=icons-grid aria-label=Accesos rápidosgt

  ltbutton class=icon-item text-primary aria-label=Iniciogt
    ltsvg class=icon icon--md aria-hidden=truegtltuse href=#icon-homegtlt/usegtlt/svggt
    ltspan class=labelgtIniciolt/spangt
  lt/buttongt

  ltbutton class=icon-item text-muted aria-label=Perfilgt
    ltsvg class=icon icon--md aria-hidden=truegtltuse href=#icon-usergtlt/usegtlt/svggt
    ltspan class=labelgtPerfillt/spangt
  lt/buttongt

  lt!-- Repetir según necesidad --gt
lt/sectiongt

Paso 7 — Accesibilidad (a11y)

Si el icono es puramente decorativo, incluye aria-hidden=true en el ltsvggt para que los lectores lo ignoren.
Si el icono transmite información, añade un lttitle id=title-idgt y usa aria-labelledby=title-id en el ltsvggt o proporciona texto visible asociado (ej. la etiqueta).
Si usas botones, asegúrate de que tengan atributo aria-label o texto visible que describa la acción.
Ofrece indicadores de foco visibles (outline o box-shadow) para la navegación por teclado.

Paso 8 — Seguridad y consideraciones al aceptar SVG en WordPress

WordPress no permite SVG de forma predeterminada por razones de seguridad. Si vas a permitir subir SVG, sanitizea los archivos o usa plugins confiables que limpien el contenido (SVG Sanitizer, Safe SVG, etc.).
Si incluyes el sprite desde tu theme (archivo controlado por ti), no sufres el problema de uploads. Si aceptas uploads de SVG de usuarios, valídalos y sanitiza con una librería de confianza.
Evita incluir scripts dentro de SVG y elimina event handlers inline (onload, onclick) en el SVG antes de incrustarlo.

Paso 9 — Rendimiento y buenas prácticas

Genera el sprite durante tu proceso de build (Grunt/Gulp/webpack) para optimizar paths y eliminar metadatos innecesarios.
Comprimir SVG (SVGO) y reducir la complejidad de paths mejora tiempo de pintura.
Imprime el sprite una vez por página no dupliques el mismo bloque varias veces.
Para iconos dinámicos (por ejemplo, coloreados de forma diferente en cada instancia), sigue usando fill=currentColor y controla color desde la clase del contenedor.

Variaciones y patrones avanzados

Modo inline por componente: en lugar de un único sprite global, puedes renderizar solo los símbolos necesarios en el HTML cuando son pocos.
Combinación con CSS variables: usar variables para temas: –icon-color: #123456 y luego color: var(–icon-color).
Alternativa con sprites externos: si colocas sprite en un archivo externo, ten en cuenta CORS y la posible incompatibilidad de uso de ltusegt en algunos navegadores. Por eso, inline es más robusto.

Ejemplo: incluir sprite desde archivo y sanitización mínima

Solo como referencia, aquí se muestra una forma sencilla (no sustituto de una sanitización completa) de inyectar el contenido de un archivo SVG existente en el theme:

function tema_get_svg_sprite( path ) {
  if ( ! file_exists( path ) ) {
    return 
  }
  svg = file_get_contents( path )
  / Limpieza mínima: eliminar posibles etiquetas ltscriptgt (no es completa) /
  svg = preg_replace(#ltscript.?lt/scriptgt#is, , svg)
  return svg
}
add_action( wp_body_open, function() {
  echo tema_get_svg_sprite( get_template_directory() . /assets/icons/sprite.svg )
}, 5 )

Problemas comunes y soluciones

Iconos no se muestran: asegúrate de que el sprite esté presente en el DOM antes de las referencias ltusegt o que el selector href apunte correctamente al id.
Color no se aplica: comprueba que el path interno use fill=currentColor o elimina fills en los paths para usar CSS.
Fallo CORS con sprite externo: usa inline o configura correctamente encabezados CORS en el servidor si necesitas sprite externo.

Resumen

Crear una cuadrícula de iconos SVG inline con CSS utilitario en WordPress es una solución poderosa, accesible y eficiente. El flujo recomendado es:

Optimizar los SVG (viewBox, fill=currentColor).
Generar un sprite SVG y inyectarlo inline (ej. con wp_body_open).
Usar ltsvggtltusegt para instanciar iconos.
Aplicar utilidades CSS para tamaño, color y layout (grid responsive).
Garantizar sanitización y seguridad si permites subir SVG.

Recursos adicionales

Puedes leer sobre: SVG accessibility, SVGO para optimización, y plugins de WordPress que manejan SVG seguros. También es buena práctica automatizar la generación del sprite con tu pipeline de build para mantener el control de versiones y optimización.

SushiHost