{"id":272,"date":"2026-08-14T14:01:11","date_gmt":"2026-08-14T12:01:11","guid":{"rendered":"https:\/\/helloblog.io\/es\/iconos-svg-personalizados-wordpress-7-1\/"},"modified":"2026-08-14T14:01:11","modified_gmt":"2026-08-14T12:01:11","slug":"iconos-svg-personalizados-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/es\/iconos-svg-personalizados-wordpress-7-1\/","title":{"rendered":"C\u00f3mo registrar iconos SVG personalizados en WordPress 7.1"},"content":{"rendered":"\n

WordPress 7.1 incorpora una API p\u00fablica para registrar iconos SVG personalizados sin JavaScript ni proceso de compilaci\u00f3n. Desde un plugin podr\u00e1s agruparlos en colecciones, elegirlos desde el bloque core\/icon<\/code>, renderizarlos en PHP y consultarlos a trav\u00e9s de la API REST.<\/p>\n\n\n\n

La versi\u00f3n 7.1 est\u00e1 prevista para el 19 de agosto de 2026. Esta gu\u00eda crea un plugin peque\u00f1o con tres iconos, automatiza el registro de una carpeta completa y muestra c\u00f3mo reutilizar los iconos en el editor, en plantillas PHP y como iconos de bloques.<\/p>\n\n\n\n

\n\n

Requisitos<\/h4>\n\n\n

Necesitas WordPress 7.1 o posterior; la versi\u00f3n candidata 7.1 RC sirve para desarrollar. Prepara tambi\u00e9n algunos archivos SVG, un entorno local como LocalWP, WordPress Studio o wp-env<\/code>, y conocimientos b\u00e1sicos de PHP.<\/p>\n\n<\/div>\n\n\n\n

Qu\u00e9 aporta la API de iconos<\/h2>\n\n\n\n

La API gira en torno a tres funciones y a las colecciones. Una colecci\u00f3n es un grupo con nombre que act\u00faa como espacio de nombres: evita que myplugin\/plus<\/code> entre en conflicto con core\/plus<\/code> o con el icono de otro plugin.<\/p>\n\n\n\n

    \n\n
  • wp_register_icon_collection( $name, $args )<\/code>: crea una colecci\u00f3n de iconos con nombre.<\/li>\n\n\n
  • wp_register_icon( $name, $args )<\/code>: registra un icono individual.<\/li>\n\n\n
  • wp_get_icon( $name, $args )<\/code>: devuelve el SVG de un icono como una cadena para renderizarlo en PHP.<\/li>\n\n<\/ul>\n\n\n\n

    Cada icono debe pertenecer a una colecci\u00f3n y su identificador sigue el patr\u00f3n coleccion\/slug-del-icono<\/code>. Al registrarlo, aporta el SVG mediante content<\/code>, con el marcado SVG como cadena dentro de PHP, o mediante file_path<\/code>, con la ruta absoluta de un archivo .svg<\/code>. Elige solo una de las dos opciones para cada icono: content<\/code> resulta c\u00f3modo para uno o dos SVG; file_path<\/code> encaja mejor con bibliotecas almacenadas en una carpeta.<\/p>\n\n\n\n

    1. Crea el plugin y registra la colecci\u00f3n<\/h2>\n\n\n\n

    Registra la colecci\u00f3n antes que cualquiera de sus iconos. Si intentas a\u00f1adir un icono a una colecci\u00f3n que a\u00fan no existe, no aparecer\u00e1 en el selector sin mostrar un error.<\/p>\n\n\n\n

    Crea esta estructura dentro de wp-content\/plugins\/<\/code>:<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>