{"id":286,"date":"2026-08-14T14:01:05","date_gmt":"2026-08-14T12:01:05","guid":{"rendered":"https:\/\/helloblog.io\/pt\/icones-svg-personalizados-wordpress-7-1\/"},"modified":"2026-08-14T14:01:05","modified_gmt":"2026-08-14T12:01:05","slug":"icones-svg-personalizados-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/pt\/icones-svg-personalizados-wordpress-7-1\/","title":{"rendered":"Como criar \u00edcones SVG personalizados no WordPress 7.1"},"content":{"rendered":"\n

O WordPress 7.1 est\u00e1 a introduzir uma API p\u00fablica para \u00edcones SVG personalizados. Com ela, um plugin pode registar cole\u00e7\u00f5es e \u00edcones que surgem no seletor do bloco core\/icon<\/code>, que se renderizam em PHP e que ficam dispon\u00edveis atrav\u00e9s da REST API, sem JavaScript nem processo de build.<\/p>\n\n\n\n

Este guia cria um plugin m\u00ednimo que regista uma cole\u00e7\u00e3o, adiciona SVGs embebidos e ficheiros SVG, carrega automaticamente uma pasta inteira de \u00edcones e reutiliza-os no editor, em templates PHP, shortcodes e \u00edcones de blocos.<\/p>\n\n\n\n

\n\n

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

O WordPress 7.1 tem lan\u00e7amento previsto para 19 de agosto de 2026. Para desenvolveres antes dessa data, podes usar o WordPress 7.1 RC.<\/p>\n\n<\/div>\n\n\n\n

    \n\n
  • WordPress 7.1 ou posterior.<\/li>\n\n\n
  • Alguns ficheiros de \u00edcones SVG.<\/li>\n\n\n
  • Um ambiente de desenvolvimento local, como LocalWP, WordPress Studio ou wp-env.<\/li>\n\n\n
  • Conhecimentos b\u00e1sicos de PHP.<\/li>\n\n<\/ul>\n\n\n\n

    A API de \u00edcones em tr\u00eas fun\u00e7\u00f5es<\/h2>\n\n\n\n

    A API assenta em tr\u00eas fun\u00e7\u00f5es e no conceito de cole\u00e7\u00e3o. Uma cole\u00e7\u00e3o \u00e9 um grupo nomeado de \u00edcones; o respetivo nome funciona como namespace, evitando colis\u00f5es entre os \u00edcones do core, os de outros plugins e os teus.<\/p>\n\n\n\n

      \n\n
    • wp_register_icon_collection( $name, $args )<\/code> regista uma cole\u00e7\u00e3o de \u00edcones com nome.<\/li>\n\n\n
    • wp_register_icon( $name, $args )<\/code> regista um \u00edcone individual.<\/li>\n\n\n
    • wp_get_icon( $name, $args )<\/code> devolve a string SVG de um \u00edcone para a renderizares em PHP.<\/li>\n\n<\/ul>\n\n\n\n

      Cada \u00edcone tem de pertencer a uma cole\u00e7\u00e3o. Por isso, core\/plus<\/code> e myplugin\/plus<\/code> podem coexistir: o prefixo da cole\u00e7\u00e3o torna o nome completo \u00fanico.<\/p>\n\n\n\n

      Ao registares cada \u00edcone, fornece o SVG atrav\u00e9s de content<\/code>, com o markup SVG numa string PHP, ou atrav\u00e9s de file_path<\/code>, com o caminho absoluto para um ficheiro .svg<\/code>. Usa apenas uma destas op\u00e7\u00f5es em cada \u00edcone: content<\/code> \u00e9 pr\u00e1tico para um ou dois SVGs, enquanto file_path<\/code> adapta-se melhor a bibliotecas guardadas numa pasta.<\/p>\n\n\n\n

      Criar o plugin e registar a cole\u00e7\u00e3o<\/h2>\n\n\n\n

      A cole\u00e7\u00e3o tem de existir antes de tentares acrescentar-lhe \u00edcones. Se registares um \u00edcone para uma cole\u00e7\u00e3o inexistente, este n\u00e3o aparece no seletor, sem que o WordPress apresente um erro vis\u00edvel.<\/p>\n\n\n\n

      Dentro de wp-content\/plugins\/<\/code>, cria esta estrutura:<\/p>\n\n\n\n

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