Bibliotecas de iconos.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

El selector de iconos en los elementos Icon y Circle counter ofrece cada conjunto de iconos registrado en tu sitio. DXPR Builder trae 14 conjuntos; módulos y temas pueden añadir más con un archivo YAML. Esta página enumera los incluidos, explica cómo se cargan y muestra cómo añadir uno. Para limitar los conjuntos que ve un rol, usa un perfil del constructor; consulta User profiles.

Conjuntos de iconos incluidos

Los conjuntos se registran en dxpr_builder.dxpr_icon_sets.yml:

Clave Etiqueta en el selector Prefijo de clase Biblioteca
bi Bootstrap Icons bi dxpr_builder/elements.bootstrap_icons
et ET Line Icons et dxpr_builder/elements.et_line_font
fab Font Awesome Free Brands fab dxpr_builder/elements.font_awesome_6_free
far Font Awesome Free Regular far dxpr_builder/elements.font_awesome_6_free
fas Font Awesome Free Solid fas dxpr_builder/elements.font_awesome_6_free
glyphicon Glyphicon Halflings glyphicon dxpr_builder/elements.glyphicons_halflings
pe Pixeden Line Icons pe dxpr_builder/elements.pe_icon_7_stroke
ph Phosphor Icons Regular ph dxpr_builder/elements.phosphor_icons
ph_bold Phosphor Icons Bold ph-bold dxpr_builder/elements.phosphor_icons_bold
ph_duotone Phosphor Icons Duotone ph-duotone dxpr_builder/elements.phosphor_icons_duotone
ph_fill Phosphor Icons Fill ph-fill dxpr_builder/elements.phosphor_icons_fill
ph_light Phosphor Icons Light ph-light dxpr_builder/elements.phosphor_icons_light
ph_thin Phosphor Icons Thin ph-thin dxpr_builder/elements.phosphor_icons_thin
fa Font Awesome (v4 compatibility) fa dxpr_builder/elements.font_awesome_6_free

El selector no ofrece el conjunto fa, porque no tiene lista de iconos. Hace que los iconos guardados con la vieja clase fa carguen la biblioteca Font Awesome. Las páginas guardadas con los viejos nombres de biblioteca Font Awesome también reciben la hoja de estilos dxpr_builder/elements.font_awesome_v4_shims, así que sus iconos siguen mostrándose.

Todos los conjuntos Font Awesome cargan Font Awesome Free 7. La biblioteca conserva su nombre de máquina de la versión 6, porque páginas guardadas y código personalizado la referencian. Font Awesome 7 en DXPR Builder enumera lo que cambió.

Cómo el selector y las páginas cargan iconos

El desplegable de conjuntos empieza con All icon sets, y luego enumera cada conjunto registrado que tiene lista de iconos. Los 13 conjuntos incluidos salvo fa tienen listas integradas, así que un sitio solo con DXPR Builder muestra 14 entradas. Un conjunto de otro módulo o tema necesita una lista icons en su YAML para aparecer.

Cuando una persona que edita escoge un icono, el elemento guarda las clases del icono, como bi bi-star, y el nombre de su biblioteca. Las visitas descargan entonces solo las fuentes de iconos que su página usa. En el editor, ET Line, Pixeden y Glyphicon se cargan con el propio editor; el selector carga las hojas de estilo de los demás conjuntos cuando se abre.

Cómo escogen y dan estilo a un icono las personas que editan está en Añadir un icono.

Limita conjuntos de iconos por rol

Cada perfil del constructor tiene un grupo Icon sets con una casilla por conjunto y una casilla Check/Uncheck all Icon sets. Configúralo en DXPR Studio > DXPR Builder > User Profiles; User profiles tiene los pasos. Cómo se comporta el grupo:

  • Con Check/Uncheck all Icon sets marcado, el rol ve cada conjunto, incluidos los añadidos después.
  • Sin marcar, el rol ve solo los conjuntos marcados. Un perfil nuevo empieza así, con cada conjunto marcado, así que un conjunto añadido después queda oculto hasta que lo marcas.
  • Sin marcar y sin ningún conjunto marcado, el selector está vacío.
  • Los iconos ya puestos en una página siguen mostrándose. El perfil solo cambia lo que ofrece el selector.

Añade un conjunto de iconos

Un conjunto de iconos es una entrada YAML más una biblioteca Drupal. DXPR Builder lee *.dxpr_icon_sets.yml de cada módulo y tema instalado. La referencia de propiedades y el hook de alteración están en Conjuntos de iconos personalizados.

  1. Crea mymodule/mymodule.dxpr_icon_sets.yml:

    brand:
      label: 'Brand icons'
      prefix: brand
      css: css/brand-icons.css
      library: mymodule/brand_icons
      icons:
        - 'brand brand-logo'
        - 'brand brand-arrow'
    

    css es relativo a la carpeta del módulo y se carga en el editor. Cada icono es el prefijo más una clase que empieza con el prefijo y un guion.

  2. Declara la biblioteca en mymodule.libraries.yml. Las páginas de visitas la cargan:

    brand_icons:
      css:
        theme:
          css/brand-icons.css: {}
    
  3. Limpia cachés con drush cr.

  4. Marca el conjunto nuevo en cada perfil del constructor que no tiene Check/Uncheck all Icon sets marcado.

  5. Abre los ajustes de un elemento Icon y elige Brand icons en el desplegable de conjuntos.

Un módulo personalizado también puede quitar un conjunto del selector con un hook de alteración; el código está en Referencia de la API de hooks. Los iconos de un conjunto incluido siguen cargándose en páginas guardadas. Los iconos de un conjunto personalizado quitado dejan de cargar su CSS, porque DXPR Builder solo adjunta una biblioteca que nombra un conjunto registrado.

Si falta un conjunto de iconos

  • Un conjunto nuevo no está en el desplegable. Su YAML no tiene lista icons, o la caché aún guarda el registro viejo. Añade la lista y ejecuta drush cr.
  • Falta un conjunto solo para algunas personas que editan. Su perfil del constructor no lo marca. Márcalo en Icon sets desde /admin/dxpr_studio/dxpr_builder/profile.
  • Los iconos se ven en el editor, pero no para las visitas. El editor carga el archivo css del conjunto, pero las páginas de visitas cargan su library. Asegúrate de que library nombra una biblioteca en mymodule.libraries.yml que contiene el archivo CSS.

¿Qué sigue?