Adding Custom Icons to the Digital Hive Icon Library

Adding Custom Icons to the Digital Hive Icon Library

Question

Although the default Digital Hive icon library contains over 2,000 icons, our company has specific icons that we need to incorporate into our Hive design. Is it possible to extend the default icon library, beyond the default libraries, to include our custom icons?




Answer

In addition to the Core and Carbon icon sets that are included in the default Digital Hive icon library, it is possible to add custom icons. Custom icons have to be added individually, but the library can be extended.

Extending the icon library needs to be configured through files located on the Digital Hive server, so the proper administrative access to the server would be required.
  1. Download the Digital Hive module required to extend the icon library: https://releases.digitalhive.com/updates/myCustomSvgIcons.zip
  2. On the Digital Hive server, navigate to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules directory
  3. Copy the myCustomSvgIcons.zip file to the modules directory
  4. Extract the myCustomSvgIcons.zip file to the modules directory
  5. Copy your custom icons, in svg format, to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons\icons directory
  6. Navigate to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons directory
  7. Open the index.js file in a text editor
  8. This file has multiple sections to modify:
    1. Give the icon library a unique name. The default setting is const internalName = 'myIcons'  so replace the myIcons with a custom name (if desired, this is only a unique internal name)
    2. Add a friendly label as this is the label that will show up in the UI for your users. The default setting is const label = 'My Icons' so replace My Icons with the desired label
    3. Create the metadata listing for each individual svg file. As part of the example, 6 custom icons are included. These entries could be modified for your icons, or they can be duplicated and edited. For each svg file a section like this needs to be present, which defines how the values appear in the UI.  
    4. The value of lightning_cloud is an internal name but this has to be unique.
    5. the value for svgURL must point to the location on the Digital Hive server where the svg file resides. If step 5 was followed, only the blue_cloud.svg part of the value needs to be replaced with the file name for your icon
    6. The value for label is what the icon will be called in the UI
    7. The tags that are defined indicate what keywords will cause this icon to appear as part of the icon search
  9. Save the changes to the index.js file
  10. Navigate to the <install_directory>\DigitalHive\app\node1\tomcat\webapps\theia directory
  11. Open the config.json file in a text editor
  12. Modify the "modules" line so that it looks like this "modules": ["myCustomSvgIcons"], ensuring that the trailing comma is present
  13. Save the config.json file
No restart of the server would be required for the setting to take affect, but users will have to refresh their browsers to see the changes.

    • Related Articles

    • Adding Custom Metadata Fields to Enhance Digital Hive Content

      Question Looking at the properties for a report, there is metadata visible from the content systems like Tableau, PowerBI, and IBM Cognos Analytics, but is it possible to create custom metadata values on a report or dashboard. The objective is to ...

    • Adding Custom Fonts to Digital Hive

      Question The corporate branding guidelines for our company mandates a specific font be used for all material. Examining the available fonts within Digital Hive, the required font is not listed. Is there a way to add the custom font so that it's ...

    • How to 'Enable' Connector Content Within Digital Hive

      Question Once the connector parameters for a content system have been successfully applied, how do I select the desired content from the source to appear within Digital Hive? Answer As part of the connector creation process, once the required ...

    • Installing the Digital Hive Software

      Question How do you install Digital Hive? Answer Digital Hive can be installed in Windows or Linux environments. Installing Digital Hive on Windows Prerequisites for installing Digital Hive on Windows Microsoft® Visual C++ 2013 runtime library ...

    • Set a Custom Thumbnail for Content

      Question Not all of my content has an automatically generated thumbnail but I would like to have a thumbnail appear for a specific report. Is it possible to configure a thumbnail for a specific piece of content? Answer Yes, as of the Digital Hive 2.1 ...