Creating feature icons

The feature icons that are used in IBM® Content Navigator are Scalable Vector Graphics (SVG) images. These icons can be recolored at run time by using colors that are specified in your theme CSS. You can create your own SVG icons.

To create SVG feature icons to represent features in the web client:

1. Open a vector drawing application, for example, Adobe Illustrator. Then, open a new canvas or artboard.
2. Create the icons in a single row on the artboard with the following dimensions:

   Follow IBM Design icon guidelines for best practices and to keep your icons consistent: Guideline A: User interface > Icons & clip art.

   • Icons must be 24 pixels wide by 24 pixels high on a transparent background:
   • Make the target dimensions fit within 22 pixels by 22 pixels and surround it with 1 pixel of padding.
3. Copy the row of icons and paste the duplicates underneath your original row in the same artboard so that your icons are in a consistent grid.
4. Create a style for the icon when the feature is in the default state:
   1. Apply the gray color #878a8c to an object on the artboard.
   2. Select that object.
   3. Create a graphic style and name it iconBaseColor.
5. Create a style for the icon when the feature is in the active, selected state:
   1. Apply the blue color #008abf to an object on the artboard.
   2. Select that object.
   3. Create a graphic style and name it iconSelectedColor.
6. Ungroup all of the objects on your artboard so that you can apply the styles that you created. Graphic styles have no effect on grouped objects.
7. Select all of the default state icons and apply the iconBaseColor style. For example, select the top row of icons to be the default versions of the icons.
8. Select all of the selected state icons and apply the iconSelectedColor style. For example, select your bottom row of icons to be the selected versions of the icons.
9. Save the file as an AI file so that you can edit this file in the future.
10. Save a copy of the file to use in your application:
    1. Select SVG as the file type.
    2. Remove the word copy from the end of the file name.
    3. In the SVG Options dialog box, ensure that you specify the following options:
       Tip: The following settings apply to Adobe Illustrator. If you are using a different vector-based drawing program, your SVG options might have different names.

       SVG options	Values
       Type	SVG
       Image Location	Embed
       CSS Properties	Style Elements
       Decimal Places	1
       Encoding	UTF-8
       Responsive	Ensure that you clear this check box.

11. Verify the SVG code:
    1. Click SVG Code. Verify that the style tag has the following content:

       <style type="text/css">
           .iconBaseColor{fill:#878A8C;}
           .iconSelectedColor{fill:#008ABF;}
       </style>

       Confirm that there are exactly two classes in the style tag.

    2. If there is any additional code in the style tag, verify that all objects are ungrouped and that all objects are applied with one of the graphic styles, and then check the SVG code again.
12. Include the SVG file in the pluginPackage/WebContent subdirectory of the JAR file for the plug-in that contains the feature for which you created the icon.
13. Implement the SVG code in your plug-in by continuing the steps for creating a feature. See Creating a feature.