Configurar um ícone de extensão

Escolher um ícone que ilustre a finalidade do seu comando personalizado na Estrutura do SharePoint (SPFx) ajuda seus usuários a localizar o comando entre outras opções visíveis na barra de ferramentas ou no menu de contexto. Especificar um ícone para um comando é opcional. Se você não especificar um ícone, apenas o título do comando será exibido na barra de comandos.

A Estrutura do SharePoint é compatível com a compilação dos seguintes tipos de extensão:

• Personalizador de Aplicativos
• Personalizador de Campos
• Conjunto de Comandos

O Conjunto de Comandos é o único tipo de extensão da Estrutura do SharePoint para a qual é possível configurar ícones.

Durante a implantação dos Conjuntos de Comandos, é possível escolher se os comandos devem ficar visíveis:

• Na barra de comandos:

  "location": "ClientSideExtension.ListViewCommandSet.CommandBar"
  

• No menu de contexto:

  "location": "ClientSideExtension.ListViewCommandSet.ContextMenu"
  

• Em ambos:

  "location": "ClientSideExtension.ListViewCommandSet"
  

Ícones definidos para os diversos comandos são exibidos somente para os comandos exibidos na barra de comandos.

A Estrutura do SharePoint fornece duas opções para definir o ícone de extensão:

• Usar uma imagem de ícone externa
• Usar uma imagem com codificação base64

Usar uma imagem de ícone externa

Ao compilar os conjuntos de comandos da Estrutura do SharePoint, você pode especificar um ícone para cada comando, fornecendo uma URL absoluta que aponta para a imagem do ícone no manifesto da extensão. Isso é feito na propriedade 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"
    }
  }
}

O ícone de comando exibido na barra de comandos tem 16 x 16 px. Se a imagem for maior, ela será dimensionada proporcionalmente para corresponder a essas dimensões.

Apesar do uso de imagens personalizadas oferecer flexibilidade na escolha de um ícone para o comando, isso exige que essas imagens sejam implantadas juntamente com outros ativos da extensão.

Além disso, a imagem pode perder qualidade se for exibida com um DPI mais alto ou em configurações de acessibilidade específicas. Para evitar essa perda de qualidade, use imagens SVG vetoriais.

Usar uma imagem com codificação base64

Ao usar uma imagem personalizada em vez de especificar uma URL absoluta para o arquivo de imagem hospedado com outros ativos de extensão, sua imagem pode ser codificada em base64, e é possível usar a cadeia de caracteres base64 em vez da URL.

Um número de serviços online estão disponíveis, onde você pode codificar sua imagem em base64, como o Converter imagens em Base64.

Após a codificação da imagem, copie a cadeia de caracteres da base64 e use-a como o valor da propriedade iconImageUrl no manifesto da Web Part.

{
  "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"
    }
  }
}

A codificação de base64 funciona tanto para imagens bitmap (por exemplo, PNG) como para imagens SVG vetoriais. A grande vantagem de usar imagens codificadas em base64 é que não é necessário implantar a imagem de ícone da Web Part adicionalmente à extensão da Estrutura do SharePoint.

Confira também

• Visão geral das extensões da Estrutura do SharePoint