Icono Configurar extensión

La selección de un icono que muestra la finalidad del comando personalizado en SharePoint Framework (SPFx) permite a los usuarios encontrar más fácilmente el comando entre otras opciones visibles en la barra de herramientas o en el menú contextual. La especificación de un icono para un comando es opcional. Si no especifica un icono, solo se mostrará el título del comando en la barra de comandos.

SharePoint Framework admite la compilación de los siguientes tipos de extensiones:

• Personalizador de aplicación
• Personalizador de campo
• Conjunto de comandos

El conjunto de comandos es el único tipo de extensión de SharePoint Framework para el que se pueden configurar iconos.

Al implementar los conjuntos de comandos, puede elegir si los comandos deben estar visibles en:

• Barra de comandos:

  "location": "ClientSideExtension.ListViewCommandSet.CommandBar"
  

• Menú contextual:

  "location": "ClientSideExtension.ListViewCommandSet.ContextMenu"
  

• Ambos:

  "location": "ClientSideExtension.ListViewCommandSet"
  

Solo se muestran los iconos definidos para los diferentes comandos en los comandos que aparecen en la barra de comandos.

SharePoint Framework proporciona dos opciones para definir el icono de la extensión:

• Usar una imagen de icono externa
• Usar una imagen codificada en Base64

Usar una imagen de icono externa

Al crear grupos de comandos de SharePoint Framework, puede especificar un icono para cada comando especificando una dirección URL absoluta que apunte a la imagen de icono en el manifiesto de extensión. Esto se hace en la propiedad iconImageUrl.

{
  "id": "6cdfbff6-714f-4c26-a60c-0b18afe60837",
  "alias": "WeatherCommandSet",
  "componentType": "Extension",
  "extensionType": "ListViewCommandSet",
  ...
  "items": {
    "WEATHER": {
      "title": { "default": "Weather" },
      "iconImageUrl": "https://localhost:4321/temp/sun.png",
      "type": "command"
    }
  }
}

El icono de comando que aparece en la barra de comandos es de 16x16 píxeles. Si la imagen es más grande, el tamaño se ajusta proporcionalmente hasta coincidir con estas dimensiones.

Aunque el uso de imágenes personalizadas le da flexibilidad para elegir un icono para el comando, es necesario implementarlas junto con los demás activos de la extensión.

Es posible que la imagen pierda calidad cuando se muestre en valores de PPP más altos o en una configuración de accesibilidad específica. Para evitar la pérdida de calidad, puede usar imágenes SVG basadas en vectores.

Usar una imagen codificada en Base64

Si usa una imagen personalizada, en lugar de especificar una dirección URL absoluta para el archivo de imagen hospedado con otros activos de extensión, puede tener la imagen codificada en Base64 y usar la cadena de Base64 en lugar de la dirección URL.

Puede usar diversos servicios disponibles en línea para codificar la imagen en base64, como Convertir imágenes en base64.

Después de codificar la imagen, copie la cadena de base64 y úsela como valor de la propiedad iconImageUrl en el manifiesto de elemento web.

{
  "id": "6cdfbff6-714f-4c26-a60c-0b18afe60837",
  "alias": "WeatherCommandSet",
  "componentType": "Extension",
  "extensionType": "ListViewCommandSet",
  ...
  "items": {
    "WEATHER": {
      "title": { "default": "Weather" },
      "iconImageUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAB/hUlEQVR42u29ebwkWVUn/j03Ipe31PZqr+ruqu7q6pXuZlcRRgUVBRnUn0rpMAJuTDeLog4u48bMiDoMtCA0MjAwOqil4oI6qCO2oIiDTQ...",
      "type": "command"
    }
  }
}

La codificación base64 funciona para imágenes de mapa de bits, como PNG, e imágenes SVG vectoriales. La ventaja de usar imágenes codificadas en base64 es que no es necesario implementar la imagen de icono del elemento web además de la extensión SPFx.

Consulte también

• Información general de SharePoint Framework Extensions