In addition to the default Core and Carbon
icons from the Analytics Content Hub icon library, you can add custom icons to the
library.
About this task
The icon library can be extended with custom icons as you add them individually.
Important: To extend the icon library, you need administrative access to the files in
the Analytics Content Hub server.
Procedure
-
Download the Analytics Content Hub module that is required to extend the
icon library.
- On the Analytics Content Hub server, go to the
<install_directory>\AnalyticsContentHub\app\node1\tomcat\webapps\theia\modules
directory.
- Copy the myCustomSvgIcons.zip file to the modules directory. Then,
extract the file to the same directory.
- Copy your custom icons, in .svg format, to the
<install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons\icons
directory.
- Go to the
<install_directory>\DigitalHive\app\node1\tomcat\webapps\theia\modules\myCustomSvgIcons
directory and open the index.js file in a text editor.
- In the index.js file, modify the following sections:
- Optional: Give your icon library a unique name by changing the default
value
'myIcons'
of the const internalName
setting.
- Create a unique label for your users to see. Change
'My Icons'
in the
default setting const label = 'My Icons'
to your unique label.
- Create a metadata listing for each .svg file. To do this, modify the following section
for each icon:
lightning_cloud: {
svgUrl: 'icons/blue_cloud.svg',
label: 'Lightning Cloud',
tags: ['shock', 'cloud', 'lightning'],
svgInset: 4
},
- Each section name, such as
lightning_cloud
, must be unique.
- The value for
svgURL
is the location of the .svg file in the Analytics Content
Hub server. If you completed step 5, replace only the blue_cloud.svg
part of the
value with the file name for your icon.
- For
label
, put the name of the icon that is going to appear in the library's
interface.
- Provide keywords in
tags
to make the icon appear when you search for the
icon.
The section is the metadata for the Lightning Cloud icon in the next
example that includes six custom icons:
- Save the index.js file.
- Go to the
<install_directory>\DigitalHive\app\node1\tomcat\webapps\theia
directory and
open the config.json file in a text editor.
- Modify the
"modules"
line to "modules":
["myCustomSvgIcons"],
. Make sure that the trailing comma is included.
- Save the config.json file.
What to do next
You do not need to restart the server to see the changes in the icon library, but you can refresh
the browser to add your custom icons.