Como criar meus próprios ícones personalizados?
Como criar seus próprios ícones em SVG e atualiza-los no arquivo local-icons.json, para que o Workhub possa carrega-los:
Para que seja possível adicionar ícones personalizados no Workhub, são necessários 3 passos:
Obter arquivos .SVG, com os ícones: Este é o formato que o Workhub utiliza. A proporção da área do ícone é quadrada (viewbox) e tem tamanho sugerido de 30x30 (height e width)
Editar o arquivo local-icons.json, colocando lá o Nome do Ícone e o conteúdo do arquivo .SVG (que é um texto) , no local apropriado, depois de formatado com as regras mencionadas abaixo
Adicionar os nomes dos ícones novos, no campo "Icone", na lista "Navigation"
Os pontos acima são melhor detalhados, em 3 passos:
1 - Obtenha arquivos .SVG com a arte desejada. Este ícone SVG pode conter cores ou qualquer arte desejada. Repare que o arquivo .SVG nada mais é do que um arquivo texto com comandos sobre como desenhar o ícone. Precisaremos validar e copiar este código, que pode ser obtido, abrindo um arquivo. SVG em um editor de textos como o Notepad, por exemplo. Neste código, deve ser verificado que:
a) A proporção deve ser "quadrada". Isto implica em um comando "viewbox", que seja... quadrado. (Ex: viewBox='0 0 32 32' ou viewBox='0 0 512 512')
b) O tamanho da "janela" do ícone deve ser (valor sugerido) de 30x30. Você pode alterar estes valores, mas ao fazê-lo, o ícone vai aumentar ou diminuir. (Ex: width='30' height='30')
c) Todos os comandos que usam "aspas duplas", dever ter as aspas duplas trocadas para "aspas simples", antes de colar este conteúdo no arquivo local-icons.json. Ou seja, na progração do SVG não devem existir aspas duplas e apenas aspas simples devem constar lá d) O conteúdo da programação SVG do ícone deve estar em apenas 1 linha
2 - Com os ícones ajustados, você deve inseri-los dentro do arquivo que o Workhub usa para localizar os ícones personalizados: local-icons.json. Este arquivo se encontra em: Conteúdo do Site >> Pasta SiteAssets (ou Ativos do Site). Navegue até a pasta e você encontrará o arquivo local-icons.json lá. Agora, basta clicar nele para que ele abra e você possa edita-lo, colando 1 entrada para cada ícone novo. Repare que existe um formato, onde o nome do ícone deve estar em "internalName" e o conteúdo do arquivo .SVG deve estar no campo "svg". Como mencionado, o conteúdo do svg já deve estar formatado com as regras acima.
Repare adicionalmente, que o conteúdo do arquivo SVG deve constar em apenas 1 linha, no campo "svg". Ou seja, este conteúdo não pode ser "quebrado" em várias linhas.
Repare também que após o último ícone cadastrado, não pode existir uma vírgula (mencionamos isto pois é comum em arquivos json, existir esta vírgula no final).
Repare também que o conteúdo dos campos "internalName" e "svg" devem estar envoltos por aspas duplas. Estas aspas duplas que envolvem o conteúdo destes 2 campos, são as únicas aspas duplas encontradas dentro do arquivo local-icons.json. Veja um exemplo do conteúdo do local-icons.json, com apenas 2 ícones cadastrados:
[
{
"internalName": "letter-office",
"svg": "<svg width='30' height='30' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><g data-name='Layer 4'><path d='M29 11H3a1 1 0 00-1 1v17a1 1 0 001 1h26a1 1 0 001-1V12a1 1 0 00-1-1zm-1 17H4V13h24z'/><path d='M6.49 15.67l9 5.86a1 1 0 001.1 0l9-5.86A1 1 0 1024.41 14L16 19.5 7.59 14a1 1 0 10-1.1 1.67z'/></g></svg>"
},
{
"internalName": "medical-samples",
"svg": "<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 31.671 31.671'><path d='M13.188 2.723H2.158C.955 2.723 0 3.658 0 4.863v2.362c0 .997.645 1.835 1.52 2.098v14.869c0 .041.018.082.02.125.094 1.603 1.499 4.631 6.127 4.631 4.284 0 5.879-2.896 6.113-4.426.016-.108.043-.222.043-.33V9.323c.874-.263 1.52-1.101 1.52-2.098V4.863c-.001-1.205-.951-2.14-2.155-2.14zm-.011 3.744a.749.749 0 01-.756.736h-.034a.735.735 0 00-.728.75v16.238s-.424 2.576-3.968 2.576c-3.79 0-3.969-2.576-3.969-2.576V7.955a.762.762 0 00-.759-.75h-.036a.722.722 0 01-.724-.736v-.83c0-.411.313-.751.724-.751h9.494a.76.76 0 01.756.751v.828z'/><path d='M4.899 23.619S5.012 25.7 7.671 25.7c2.486 0 2.771-2.081 2.771-2.081v-6.884H4.899v6.884zM29.525 2.723H18.583a2.12 2.12 0 00-2.142 2.141v2.362c0 .997.646 1.835 1.521 2.098v14.869c0 .041.011.082.013.125.092 1.603 1.484 4.631 6.076 4.631 4.254 0 5.83-2.896 6.062-4.426.016-.108.037-.222.037-.33V9.323c.875-.263 1.521-1.101 1.521-2.098V4.863a2.12 2.12 0 00-2.146-2.14zm-.019 3.745c0 .41-.331.735-.738.735h-.038a.753.753 0 00-.742.75v16.238s-.411 2.576-3.932 2.576c-3.761 0-3.931-2.576-3.931-2.576V7.955c0-.41-.341-.75-.747-.75h-.036a.731.731 0 01-.733-.735v-.83c0-.41.328-.752.733-.752h9.425c.407 0 .738.342.738.752v.828z'/><path d='M21.305 23.619s.115 2.081 2.75 2.081c2.471 0 2.756-2.081 2.756-2.081V7.468h-5.506v16.151z'/></svg>"
}
]Veja abaixo os 2 arquivos .SVG que originaram o código usado no exemplo de local-icons.json acima:
Repare que ao editar um destes arquivos no Notepad, você tem acesso ao código do SVG.
Quando você abrir o seu próprio SVG, provavelmente vai ser necessário trocar as aspas duplas por simples e colocar o conteúdo dele em 1 linha, como descrito em passos acima.
Após editar o conteúdo do local-icons e salva-lo, falta apenas 1 passo para poder utilizar os ícones
Abaixo, um print da tela editando o arquivo local-icons.json, após ter clicarnele. Repare que para salvar as alterações feitas nele, é necessário clicar no ícone Salvar, no topo a esquerda, antes de fechar o arquivo.
Veja que apesar de parecer que o conteúdo do campo "svg" está em várias linhas, no print abaixo, na verdade, ele está em apenas 1 linha. Veja no primeiro ícone, que o conteúdo do "svg" está apenas na linha 4, no print abaixo.
3 - Agora, é necessário editar os valores contidos no campo Icone, na lista Navigation, para que eles estejam disponíveis. Para isto:
Clique em Conteúdo do site e depois na lista Navigation. Quando estiver visualizando o conteúdo da lista Navigation, clique no menu engrenagem (topo a direita) e depois em "Configurações da Lista".
Na tela que se abre, localize o campo "Icone" e clique nele. O terceiro campo desta tela (com título: "Digite cada opção em uma linha separada:") é uma lista de valores, que são os Nomes dos Ícones.
Precisamos apenas adicionar o NOME dos ícones que informamos no campo "internalName", do local-icons.json.
Seguindo o exemplo de local-icons.json no texto acima, deveríamos cadastrar estes 2 valores, nesta lista: letter-office e medical-samples .
Ao realizar este cadastro, salvar e sair, os ícones estarão prontos para uso e escolha no menu superior
Abaixo, alguns prints das telas envolvidas:
Após ter clicado na lista Navigation, veja um print, do local onde clicar para acessar a tela de configurações da lista, onde você encontrará o campo Icone, para clicar nele e editar sua lista:
Print do campo Icone, para clicar nele:
Veja um print, da tela mencionada acima (configurações da lista), para editar os valores do campo Icone, na lista Navigation:
Veja abaixo, um exemplo de ícones personalizados no Workhub:
Last updated